玩转webpack4：将你的vue2项目打包速度提升好几个档次！

2023-02-12 14:35:45

利用 webpack 4 的分包优化，优化前端项目体积，提升加载速度

前言

在前端开发中，项目体积往往是一个老大难问题。庞大的代码库和第三方库会让项目体积膨胀，影响加载速度和用户体验。webpack 4 中的分包优化功能为我们提供了解决这一难题的利器。本文将深入探究如何利用 webpack 4 的分包优化，优化前端项目体积，提升加载速度。

分析项目代码

优化项目体积的第一步是分析代码库，找出体积较大的模块和文件。我们可以使用 webpack 内置的分析工具 webpack-bundle-analyzer 来完成这项工作。

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

在 webpack 配置文件中添加以下代码：

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

运行 webpack 命令即可生成分析报告。

分包优化

根据分析报告，我们将体积较大的模块或文件单独打包成 chunk。webpack 的 splitChunks 配置项可以帮助我们实现这一目的。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'all'
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

进一步优化

分包只是第一步，我们还可以对打包后的 chunk 进行进一步优化，如：

Tree Shaking： 移除未使用的代码，减少代码体积。可以通过设置 webpack 的 mode 为 production 来启用 Tree Shaking。
代码压缩： 使用 webpack 的 UglifyJsPlugin 压缩代码，提高加载速度。
Gzip： 使用 webpack 的 CompressionPlugin 压缩网络传输体积，提升加载速度。

上传 CDN

最后，我们将优化后的 chunk 上传到 CDN，减少用户加载时间。七牛云、又拍云等 CDN 服务商可以帮助我们实现这一目的。

优化效果

经过以上优化，我们的项目体积从原来的 1.5M 减少到了 800K，加载速度也得到了显著提升。

常见问题解答