vue 优化 —— webpack配置splitChunks

总得来说

在 Vue 项目中，使用 splitChunks 是优化打包性能的重要手段。splitChunks 是 Webpack 提供的一个功能，用于将代码拆分成多个文件（chunks），从而减少初始加载时间，提升应用性能。

Vue CLI 基于 Webpack，因此可以通过配置 vue.config.js 来使用 splitChunks。

默认就配了

默认的 splitChunks 行为

Vue CLI 默认已经配置了 splitChunks，主要规则如下：

将 node_modules 中的第三方库打包到单独的 chunk 中（通常命名为 vendor）。
将异步加载的模块打包到单独的 chunk 中（例如通过 import() 动态导入的模块）。

自己改一些配置

自定义 splitChunks 配置

如果需要更细粒度的控制，可以在 vue.config.js 中修改 configureWebpack 或 chainWebpack 选项。

示例：vue.config.js

js 复制代码

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all', // 对所有类型的 chunks 进行拆分（包括同步和异步）
        minSize: 20000, // 文件大小超过 20KB 才拆分
        maxSize: 0, // 不限制最大文件大小
        minChunks: 1, // 至少被引用一次才拆分
        maxAsyncRequests: 30, // 每个异步加载模块最多拆分成 30 个 chunks
        maxInitialRequests: 30, // 初始加载时最多拆分成 30 个 chunks
        automaticNameDelimiter: '~', // 文件名分隔符
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 中的模块
            priority: -10, // 优先级
            name: 'vendors', // 打包后的文件名
          },
          default: {
            minChunks: 2, // 至少被引用两次才拆分
            priority: -20, // 优先级
            reuseExistingChunk: true, // 重用已存在的 chunk
          },
        },
      },
    },
  },
};

配置详解

chunks

async：只拆分异步加载的模块（默认）。
initial: 只拆分同步加载的模块。
all：拆分所有模块（同步和异步）。

minSize

文件大小超过指定值（单位：字节）才会被拆分。

maxSize

文件大小超过指定值（单位：字节）时，尝试进一步拆分。

minChunks

模块被引用次数超过指定值才会被拆分。

cacheGroups

定义如何分组打包模块。
- test：匹配模块路径的正则表达式。
- priority：优先级，数值越大优先级越高。
- name：打包后的文件名。
- reuseExistingChunk：是否重用已存在的 chunk。

常见场景

第一种：把node_modules单独打包

js 复制代码

cacheGroups: {
  vendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10,
    name: 'vendors',
  },
}

第二种：把common公共代码单独打包

js 复制代码

cacheGroups: {
  common: {
    minChunks: 2, // 至少被引用两次
    priority: -20,
    name: 'common',
    reuseExistingChunk: true,
  },
}

第三种：按需加载的路由组件

Vue Router 的动态导入（import()）会自动生成单独的 chunk，无需额外配置。

运行 npm run build 后，可以在 dist/js 目录下看到生成的 chunk 文件。例如：

app.[hash].js：主应用代码。
vendors.[hash].js：第三方库代码。
common.[hash].js：公共代码。

注意事项

不要过度拆分，否则可能会导致 HTTP 请求过多，反而影响性能。
使用 maxSize 时，Webpack 会尝试将大文件拆分成更小的文件，但可能会增加额外的请求。