webpack构建时间优化

最近在尝试对webpack构建进行优化，在这里来记录一下。现环境vue-cli5

先用插件对打包进行分析

1. speed-measure-webpack-plugin: 用于分析打包过程中各个部分的耗时情况
2. webpack-bundle-analyzer: 用于分析包体积大小；vue-cli可直接用--report获取分析报告

优化构建时间

通过 speed-measure-webpack-plugin 得到构建耗时情况如下：

可以看到，主要都花费在了各个loader上。（这里已经通过parallel配置开启了thread-loader多线程处理）。这里先用swc-loader/esbuild-loader来对babel-loader进行替换，来提高打包速度。

• swc-loader：允许在webpack环境中使用 swc，swc是用Rust编写的。它支持支持输出es5、es6+代码，支持动态polyfill。
• esbuild-loader：esbuild基于Go语言编写，除了可以替换babel-loader,它还提供了代码压缩插件。支持输出es6+代码，不支持动态polyfill。

1. swc-loader

npm install @swc/core@1.9.3 swc-loader -D

修改vue.config.js

chainWebpack: (config) => {

    const rule = config.module.rule("js");
    rule.uses.clear();
    rule.use("swc-loader").loader("swc-loader").options({
      "jsc": {
        "parser": {
          "syntax": "ecmascript",
          "jsx": false,
          "dynamicImport": true
        }
      },
      "env": {
        "targets": [
          "> 1%",
          "last 2 versions",
          "chrome > 59"
        ],
        "corejs": "3"
      }
    })
 })

或者添加额外添加配置文件.swcrc来配置选项

开启后打包速度如下：

速度提升了 40%

2. swc代码压缩

代码压缩使用的是terser-webpack-plugin插件，它默认使用terser进行压缩，它也提供了minify来配置要使用的压缩工具。修改vue.config.js里的terser选项开启swc压缩：

terser: {
    minify: "swc",
    terserOptions: {
      compress: {
        drop_console: true,
        unused: true,
        drop_debugger: true,
      },
    }
  }

开启后速度如下：

3.esbuild代码压缩

需要先安装esbuild，修改配置：

terser: {
    minify: "esbuild",
    terserOptions: {
      target: "es2015",
      minify: true
    }
  }

构建速度如下：

压缩对比如下：

工具	速度	大小
terser	21.25s	4.59M(gzip: 1.33M)
swc	13.96s	4.48M(gzip: 1.3M)
esbuild	12.53s	4.86M(gzip:1.47M)

这一部分主要参考：

1. 使用 esbuild-loader 和 swc-loader 优化 Vue CLI 5 项目构建时间
2. swc与esbuild-将你的构建提速翻倍

4.开启cache

webpack5新增了cache选项，可以加快二次构建速度 在vue.config.js的configureWebpack下增加cache项：

cache: {
  type: "filesystem",
  // cacheDirectory 默认在node_modules/.cache里
  buildDependencies: {
    config: [__filename], // 当配置文件改变时，重新构建缓存
  },
}, // 开启构建缓存

5.其他方案

1. 缩小查找范围，比如设置 resolve 的 extensions、alias别名，设置exclude、include
2. 利用tree-shaking，移除无用代码，减少打包体积