在使用 Webpack 的 ` performance ` 配置对象时，如何在 Vue CLI 3 中把 JavaScript 文件拆分成多个 chunk？

在使用 Vue CLI 3 创建的项目中，Webpack 已经被内置并配置好了，包括用于代码分割的配置。在 Vue CLI 3 和更高版本中，默认情况下，它使用了基于 Webpack 的代码分割策略来提高应用程序的加载速度和效率。这是通过 splitChunks 配置实现的，它在内部配置了 Webpack 的 optimization 部分。

步骤 1: 理解 Vue CLI 项目的结构

在 Vue CLI 3 生成的项目中，Webpack 的配置被封装起来了，通常不直接在项目文件中显示。但是，你可以通过 vue.config.js 文件来扩展或修改默认的 Webpack 配置。

步骤 2: 修改 vue.config.js

要对代码分割进行自定义，你可以修改或创建一个 vue.config.js 文件在项目的根目录。下面是如何配置这个文件来自定义代码分割的一个基本示例：

javascript
module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({
      chunks: 'all',
      maxInitialRequests: 5, // 首次加载时的最大并行请求数
      minSize: 30000, // 形成一个新代码块最小的体积
      automaticNameDelimiter: '.', // 生成名字时的分隔符
      cacheGroups: {
        vendor: {
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    });
  }
}

步骤 3: 了解 splitChunks 选项

• chunks: 指定哪些 chunks 将被选中进行优化。当值为 'all' 时，意味着即使在异步和非异步 chunk 也可以共享块。
• maxInitialRequests: 允许入口点的最大并行请求数。
• minSize: 形成一个新代码块最小的体积。
• cacheGroups: 配置缓存组来分割代码。你可以定义多个缓存组，根据需要进行细分。

步骤 4: 测试并验证

修改配置后，运行项目并使用浏览器的开发者工具查看网络请求，验证 JS 文件是否按照预期被分割成不同的块。你也可以使用 Webpack 的 Bundle Analyzer 插件来视觉化地查看输出文件的大小和组成。

结论

通过这种方式，你可以在 Vue CLI 3 项目中灵活地使用 Webpack 的性能特性来优化前端资源的加载。这对于大型应用来说尤其重要，因为它可以减少首次加载时间，改善用户体验。