chunk 分包

常见分包策略

多个入口点会自动生成多个 chunk。

使用 import() 语法动态加载模块时会自动将其分割成一个单独的 chunk。

import(/* webpackChunkName: "my-chunk" */ './myModule').then(module => {
  module.default()
})

如果希望将某些路由打包到同一个 chunk 中：

const routes = [
  { path: '/user/list', component: () => import(/* webpackChunkName: "user" */ '@/views/user/List.vue') },
  { path: '/user/edit/:id', component: () => import(/* webpackChunkName: "user" */ '@/views/user/Edit.vue') },
  { path: '/user/detail/:id', component: () => import(/* webpackChunkName: "user" */ '@/views/user/Detail.vue') },
]

更精细的控制，通过修改 optimization.splitChunks 选项：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 对所有类型的 chunk 进行分割
      minSize: 30000, // 最小 chunk 大小（字节）
      minChunks: 1, // 最小引用次数
      maxAsyncRequests: 5, // 最大异步请求数
      maxInitialRequests: 3, // 最大初始请求数
      automaticNameDelimiter: '~', // 自动生成的 chunk 名称分隔符
      name: true, // 自动生成 chunk 名称
      // 自定义分包规则
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 中的模块
          priority: -10, // 优先级
          name: 'vendors', // chunk 名称
        },
        default: {
          minChunks: 2, // 最小引用次数
          priority: -20, // 优先级
          reuseExistingChunk: true, // 重用已存在的 chunk
        },
      },
    },
  },
}

chunk 分包 ​

常见分包策略 ​

chunk 分包

常见分包策略