Vue-Cli 3.0 打包优化实践

2023-10-30 14:23:31

1. 配置 gzip 压缩

Gzip 压缩是一种常用的文件压缩格式，可以有效地减小文件体积。在 Vue-Cli 3.0 中，我们可以通过在 webpack 配置文件中配置 CompressionPlugin 插件来启用 gzip 压缩。

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

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

通过以上配置，我们可以将打包后的 .js 和 .css 文件进行 gzip 压缩，并生成一个以 .gz 结尾的文件。

2. 使用 webpack-bundle-analyzer 分析包

webpack-bundle-analyzer 是一个用于分析 webpack 打包结果的工具，它可以帮助我们了解每个包在打包后的体积，以及各个包之间的依赖关系。

我们可以通过以下命令安装 webpack-bundle-analyzer：

npm install --save-dev webpack-bundle-analyzer

然后，在 webpack 配置文件的 plugins 数组中加入以下代码：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... other webpack configurations
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

这样，在运行 webpack 打包命令后，webpack-bundle-analyzer 会自动生成一个可视化的报告，帮助我们分析打包结果。

3. 使用 webpack splitChunks

webpack splitChunks 是一个用于提取公共代码的插件，它可以将公共代码提取到一个单独的文件中，从而减少重复代码的打包体积。

我们可以通过以下命令安装 webpack splitChunks：

npm install --save-dev webpack-split-chunks

然后，在 webpack 配置文件的 optimization 属性中加入以下代码：

const webpack = require('webpack');

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