构建优化指南

前言

在日常工作项目中，构建时间会随着项目的规模不断扩大而变得愈来愈缓慢(已使用happypack进行优化构建)，笔者目前构建项目目前是60s 左右，能否够更快进行构建呢，因此是时候进行一系列探索与优化。

升级方案

1.升级webpack 版本

目前webpack 已经有v5 的稳定版本了，官方经常会在版本中进行性能优化，而项目中是使用的是v4,因此首先考虑进行版本升级。首先升级 webpack、webpack-cli至latest 最新版本，进行构建时出现如下问题：

其实在webpack 升级后，对应的 loader,plugin 也会进行升级或者兼容处理，因此需要进行loader,plugin 升级。升级后开开心心进行打包，有出现以下问题：

原来在早期，webpack 的目的是为了让大多数的 Node.js 模块运行在浏览器中，但如今模块的格局已经发生了变化，现在许多模块主要是为前端而编写。webpack <= 4 的版本中提供了许多 Node.js 核心模块的 polyflls，一旦某个模块引用了任何一个核心模块（如 buffer 模块），webpack 就会自动引入 polyflls，解决方法就是增加 buffer 模块和配置

resolve: {
      fallback: { buffer: require.resolve('buffer/') },
}

2.缩小处理文件范围

在进行打包的时候会进行文件查找，如果我们能够更精确的指定文件的范围和明确指出需要处理的文件，排除不需要的文件，那么也是可以提升构建速度的. 我们需要精简项目，去除不必要的文件。

针对文件处理范围，我们可以在loader 中使用 include,exclude 进行指定，这就要求我们合理规划项目接口，明确处理的文件，如增加下面配置。

{
     test: /\.jsx?$/,
     use: ['happypack/loader?id=happyBabel'],
     include: [path.resolve(__dirname, 'src'],
},

在其他的loader 配置之后进行重新打包，构建时间减少3s左右

3.更快的压缩方式

目前webpack 默认的压缩方式是 terser, 它会分析语法的代码， 理解代码含义，从而能做到诸如: 去掉无效代码，去掉日志输出代码，缩短变量名等优化，压缩步骤是非常耗时。

除了 terser, esbuild 也是一个压缩工具，它是使用go 语言编写的，大量使用了并行操作，其压缩速度要比 terser 快了不少，vite 更是将esbuild 作为默认压缩选项，以ant包做对比，对比一下其压缩速度

可以看到 esbuild 对于压缩是有提升的，考虑将其移植到webpack中，社区中已有 esbuild-loader 来适配webpack 。增加如下配置：

new ESBuildMinifyPlugin({
    target: 'es2015',
    css: true 
})

在进行打包，发现时间确实提升一些

4.缓存构建结果

每次构建都是重新对全量模块开始进行解析，构建，生成等步骤，因此考虑可以复用之前的构建结果；通过配置wepback5 持久化缓存生成 webpack 模块和 chunk，改善构建速度。其配置如下：

cache: filesystem

简单来说，通过持久化缓存可以将构建过程的 webpack 模板进行缓存，大幅提升二次构建速度、打包速度，当构建突然中断，二次进行构建时，可以直接从缓存中拉取。配置之后再次打包，效果如下：

总结

为了加快构建速度，我们可以从缩小处理文件范围、升级打包版本、更快的压缩和处理方式等方面入手来提升打包速度。

参考资料

https://juejin.cn/post/6918195987869761549

https://viglucci.io/how-to-polyfll-buffer-with-webpack-5

https://cn.vitejs.dev/confg/#build-minify