化繁为简：使用 compression-webpack-plugin 压缩 chunk-vendors.js 文件，优化 Vue 应用加载速度

2024-01-18 05:15:05

前言

在构建 Vue 应用时，为了提高代码的可维护性和复用性，我们通常会采用代码分割的方式，将代码拆分为多个小的模块，并在需要的时候加载这些模块。但是，代码分割也会带来一个问题，那就是可能会产生大量的小的 JavaScript 文件，这些文件需要在页面加载时分别请求并解析，从而拖慢页面加载速度。

chunk-vendors.js 文件是什么？

chunk-vendors.js 文件是 Vue 在构建过程中自动生成的，它包含了所有第三方库和依赖项的代码。由于这些库和依赖项通常都是比较庞大的，因此 chunk-vendors.js 文件往往会比较大。当页面加载时，浏览器需要请求并解析 chunk-vendors.js 文件，这会拖慢页面的加载速度。

如何优化 chunk-vendors.js 文件？

为了优化 chunk-vendors.js 文件，我们可以使用 compression-webpack-plugin 插件。compression-webpack-plugin 插件可以对 webpack 生成的 JavaScript 文件进行压缩，从而减小文件的大小。

使用 compression-webpack-plugin 插件优化 chunk-vendors.js 文件

在项目中安装 compression-webpack-plugin 插件：

npm install compression-webpack-plugin --save-dev

在 webpack 配置文件中添加 compression-webpack-plugin 插件：

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
};