vue.config.js中如何配置分包策略

た入场券 2024-03-24 18:44 45阅读 0赞

构建大型 Vue.应用时，代码的体积逐渐增大，可能会影响应用的性能和加载速度。为了优化应用的加载性能，Vue 提供了一种配置分包策略的方法，允许将代码分割成更小的块，按需加载，从而减小初始加载的大小。在本文中，我们将学习如何在 `vue.config.js` 文件中配置分包策略，以及一些常见的配置选项。

#### 1、什么是代码分包？ ####

代码分包是一种将应用的代码按照一定的规则和策略分割成不同的块，然后在需要的时候进行加载的方法。这可以帮助减小初始加载的文件大小，从而提高页面加载速度。Vue 提供了一种配置分包策略的方式，允许您将不同模块、库以及异步加载的代码分割成单独的文件，从而更好地利用浏览器的缓存机制。

#### 2、配置分包策略 ####

在 Vue 项目中，可以通过修改 `vue.config.js` 文件来配置分包策略。以下是一个简单的配置示例：

module.exports = {
      configureWebpack: {
        optimization: {
          splitChunks: {
            cacheGroups: {
              vendor: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'all',
              },
            },
          },
        },
      },
    };

在上述示例中，我们使用了 `splitChunks` 选项来配置分包策略。`cacheGroups` 对象允许您定义不同的缓存组，每个组代表一个分包的规则。在这里，我们创建了一个名为 `vendor` 的缓存组，它会匹配 `node_modules` 下的模块，并将它们打包成一个单独的 `vendor.js` 文件。

#### 3、分包配置选项 ####

在配置分包策略时，有几个常用的选项可以帮助您更好地控制分包行为：

*  `test`: 用于匹配需要分割的模块，可以使用正则表达式或函数。
 *  `name`: 指定生成的分包文件的名称，可以是字符串或函数。
 *  `chunks`: 指定分包策略应用于哪些块，可以是 `'initial'`、`'async'`、`'all'` 等。
 *  `priority`: 指定缓存组的优先级，数字越大优先级越高。
 *  `minSize` 和 `maxSize`: 指定分包的大小范围，超过或小于这个范围的模块会被分割。
 *  `reuseExistingChunk`: 是否重用已有的分包，避免重复打包。

通过调整这些选项，您可以根据实际需求来优化分包策略，从而实现更好的加载性能。

#### 4、分包示例一 ####

本示例将echart组件进行单独分包。

module.exports = {
      configureWebpack: {
        optimization: {
          splitChunks: {
            cacheGroups: {
              // 将 echarts 单独分包
              echarts: {
                test: /[\\/]node_modules[\\/]echarts[\\/]/,
                name: 'echarts',
                chunks: 'all',
                priority: 30,
              },
              // 默认分包配置
              default: {
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true,
              },
            },
          },
        },
      },
    };

#### 5、分包示例二 ####

本示例将node\_modules文件夹下的所有组件，根据大小进行分包，maxSize超过300k的进行分包，分包的大小不小于minSize设置100k。也就是超过300k进行分包，小于100k的不进行分包。

module.exports = {
      configureWebpack: {
        optimization: {
          splitChunks: {
            cacheGroups: {
              vendor: {
                test: /[\\/]node_modules[\\/]/,
                name(module) {
                  // get the name. E.g. node_modules/packageName/not/this/part.js
                  // or node_modules/packageName
                  const packageName = module.context.match(
                    /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                  )[1];
                  // npm package names are URL-safe, but some servers don't like @ symbols
                  return `npm.${packageName.replace("@", "")}`;
                },
                chunks: "all",
                enforce: true,
                priority: 10,
                minSize: 100000,  // 100KB
                maxSize: 300000,
                reuseExistingChunk: true,
              }, 
            },
          },
        },
      },
    };

#### 6、总结 ####

Vue.js 提供了灵活的分包策略配置选项，使得优化应用的加载性能变得更加简单。通过合理地配置分包策略，您可以将代码分割成更小的块，从而加快页面加载速度，提升用户体验。在实际项目中，根据应用的情况来调整分包策略，从而获得最佳的性能和用户体验。

--------------------

[新时代农民工][Link 1]

[Link 1]: https://www.sgknight.cn/