背景

最近收到反馈，项目打包时间长，打包错误率高等问题，所以调整了一下项目的打包逻辑，这里简单分享一下经验。

优化过程

1、提升基础环境版本

在一般项目中，提升打包速度最简单的方式就是升级项目技术环境，比如升级node版本，升级脚手架等等，在我们的实际项目中，我们也升级了部分依赖包，包括 node 升级到18.14.0 、vue-cli 升级到5.0.8、webpack升级到5.75、node-sass升级到8.0.0。

通过以上手段的升级，经过重新打包测试，已经可以提升20%的打包速度

2、esbuild-loader

我们都知道，在项目的打包过程中，是一定要压缩js的代码的，但js代码的压缩会牵扯到语法树的解析及大量的计算，所以这个过程会比较耗时。

webpack 默认使用 terser 来压缩js，优点是比较成熟，压缩率高，缺点也很明显，速度比较慢，虽然可以开启多线程，但是速度提升的不明显。所以我们引入了esbuild，esbuild主打的就是性能优势，正好符合我们提升打包速度的诉求，但是esbuild不仅仅可以用来压缩代码，也可以进行ts编译等等，我们在当前项目只用来做压缩。

查看文档后，需要安装依赖 esbuild-loader， 下面是需要修改的代码，注释部分是之前使用 terser 的配置。

//vue.config.js
const { ESBuildMinifyPlugin } = require('esbuild-loader');

module.exports = {
  configureWebpack: config => {
      // config.optimization.minimizer[0].options.minimizer.options.compress.pure_funcs = ['console.log', 'debugger'];
      config.optimization.minimizer[0] = new ESBuildMinifyPlugin({
        target: 'chrome80', // Syntax to compile to (see options below for possible values)
        drop: ['debugger', 'console'],
      });
  }
}

3、利用缓存来减少打包时间

使用 webpack5 的新特性，持久化缓存。

持久化缓存是 webpack5 所带来的非常强大的特性之一。一句话概括就是构建结果持久化缓存到本地的磁盘，二次构建(非 watch 模块)直接利用磁盘缓存的结果从而跳过构建过程当中的 resolve、build 等耗时的流程，从而大大提升编译构建的效率。下面是项目中修改的配置

//vue.config.js

module.exports = {
  configureWebpack: config => {
      config.cache = {
        type: 'filesystem',
        maxMemoryGenerations: Infinity,
        memoryCacheUnaffected: true,
        cacheDirectory: path.resolve(__dirname, '.temp_cache'),
      };
  }
}

因为我们项目是多页打包，所以构建不同模块其实依赖的包大致都相同，所以添加持久缓存可以大大提升打包效率，5分钟的包走了缓存只要1分多钟。

4、其他

还有很多其他优化手段，但因为项目技术架构的限制，不能在本项目中引用，但也标注在这里，大家可以用来参考

1、组件的按需加载

2、配置loader的include 和 exclude

3、配置 externals 使用cdn加载

4、webpack dllplugin 和 dllreferenceplugin 预编译第三方库文件

等等

技术拓展

在打包改造过程中，其中遇到一个问题，当node版本升级之后，会造成历史的分支项目无法打包，因为他们依赖低版本的node，为了解决这个问题，也调研了一下相关的工具，包括 n、nvm、volta等，最后选中了volta 这个包，这个包比较新，比nvm的切换性能要高，使用成本也低，只需要在打包机安装volta，然后在package.json中添加

"volta": { "node": "18.14.0", "yarn": "1.22.18" }

就可以切换当前目录下的node版本，也包括npm、yarn、pnpm 都可以。

有兴趣的可以去Volta的官网去看看。

结语

至此本次打包的调整内容全部介绍完毕，但这也仅仅只是一个思路，优化并不是一成不变的，还是需要考虑当前具体场景来进行选择优化。

而且在我们写代码的时候，也可以多思考，多注意一下细节，能可以提升不少效果和性能。

Tags：前端打包

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。