Skip to content
文章目录

webpack之runtimeChunk

作用

runtimeChunk,直观翻译是运行时的 chunk 文件。是 chunk 的映射关系。这个配置可以将这个映射关系,从 app.js 中分离出来,避免运行时代码修改之后,app.js 的 contenthash 发生变化。

何为运行时代码

形如import('abc').then(res=>{})这种异步加载的代码,在webpack中即为运行时代码。 在 VueCli 工程中常见的异步加载路由即为runtime代码。

js
{
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    // component: About
  }

参考文章

webpack 之 optimization.runtimeChunk 作用