Vue CLI 3 中的 JS 性能优化：块拆分是如何解决问题的？

2024-03-14 17:17:06

## 在 Vue CLI 3 中优化 JavaScript 性能：块拆分

简介

在 Vue CLI v3 中构建项目时，你可能会遇到有关资产大小限制和入口点大小限制的警告。这些警告表明你的 JS 文件过大，会对 Web 性能产生负面影响。本文将指导你如何在 Vue CLI 3 中使用 webpack 性能对象或 splitChunks 插件将 JS 文件自动拆分成较小的块，以解决此问题。

问题：JS 文件过大

Web 性能对于用户体验至关重要。当 JS 文件过大时，它们需要更长的时间来加载，这会导致页面加载速度变慢。这可能会导致高跳出率和用户不满。

解决方案：块拆分

块拆分是一种优化技术，可以将大型 JS 文件拆分成较小的块。这有助于减少加载时间，因为浏览器可以并行加载这些块。

方法 1：使用 webpack 性能对象

在 Vue CLI 3 中，你可以使用 webpack 性能对象来配置自动块拆分。在项目根目录中创建 vue.config.js 文件并添加以下代码：

module.exports = {
  configureWebpack: {
    performance: {
      maxEntrypointSize: 512000, // 以字节为单位设置入口点大小限制
      maxAssetSize: 512000, // 以字节为单位设置资产大小限制
    },
  },
};

方法 2：使用 splitChunks 插件

你还可以使用 splitChunks 插件手动拆分 JS 文件。在 vue.config.js 文件中添加以下代码：

module.exports = {
  configureWebpack: {
    splitChunks: {
      chunks: 'all', // 拆分所有块
      minSize: 30000, // 将大于 30 KiB 的块拆分
      maxSize: 100000, // 将大于 100 KiB 的块拆分
      minChunks: 1, // 仅拆分被至少引用一次的块
      maxAsyncRequests: 5, // 限制异步块的数量
      maxInitialRequests: 3, // 限制初始块的数量
    },
  },
};

注意

确保你在项目的根目录中创建了 vue.config.js 文件。
确保你在构建项目时启用了生产模式。在命令行中运行 npm run build --mode production。
如果 vue.config.js 文件的更改没有生效，请尝试清除构建缓存：npm run build --clean。

结论

通过使用 webpack 性能对象或 splitChunks 插件，你可以将 JS 文件拆分成较小的块，从而改善 Web 性能并解决资产大小限制和入口点大小限制的警告。这将有助于提高页面加载速度，提高用户体验。

常见问题解答

1. 什么时候应该使用块拆分？

当你的 JS 文件超过 500 KiB 时， рекомендуется使用块拆分。

2. 我可以使用哪些工具来实现块拆分？

在 Vue CLI 3 中，你可以使用 webpack 性能对象或 splitChunks 插件。

3. 如何配置 webpack 性能对象？

在 vue.config.js 文件中添加以下代码：

module.exports = {
  configureWebpack: {
    performance: {
      maxEntrypointSize: 512000, // 以字节为单位设置入口点大小限制
      maxAssetSize: 512000, // 以字节为单位设置资产大小限制
    },
  },
};

4. 如何配置 splitChunks 插件？

在 vue.config.js 文件中添加以下代码：

module.exports = {
  configureWebpack: {
    splitChunks: {
      chunks: 'all', // 拆分所有块
      minSize: 30000, // 将大于 30 KiB 的块拆分
      maxSize: 100000, // 将大于 100 KiB 的块拆分
      minChunks: 1, // 仅拆分被至少引用一次的块
      maxAsyncRequests: 5, // 限制异步块的数量
      maxInitialRequests: 3, // 限制初始块的数量
    },
  },
};