likes
comments
collection
share

Webpack项目优化实战:打包速度优化一文搞定

作者站长头像
站长
· 阅读数 36
目录:
1、速度分析
2、cdn分包
3、多进程构建
4、缩小构建范围
5、使用缓存


1、打包速度分析在进行打包速度优化之前,需要对当前项目每个部分的打包时间了解清楚。

我们借助 speed-measure-webpack-plugin 插件,它分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时,从而让我们对打包时间较长的部分进行针对性优化。

通过以下命令安装插件:

yarn add speed-measure-webpack-plugin -D

再次build就能看到各个部分的打包耗时Webpack项目优化实战:打包速度优化一文搞定


2、CDN分包之前对打包体积进行分析的时候,发现react-dom、react是占据体积非常大的几个包,在打包这些包的时候就非常耗时。cdn分包可以让我们在打包过程中将特定包分离出来,从而提升打包速度。

排除部分库的打包需要借助 html-webpack-externals-plugin 插件,执行如下命令安装:

yarn add html-webpack-externals-plugin -D

但是如果Webpack的版本过高,安装可能出现版本冲突:Webpack项目优化实战:打包速度优化一文搞定

可以先用 --force命令强制安装,等出现冲突问题再卸载解决。

可以发现使用cdn分包,构建速度快了2s左右Webpack项目优化实战:打包速度优化一文搞定


3、多进程构建对于耗时较长的模块,同时开启多个 nodejs 进程进行构建,可以有效地提升打包的速度。可以采取的一些方式有:

thread-loaderHappyPack(作者已经不维护)parallel-webpack

本文采用thread-loader进行多进程构建。

yarn add thread-loader -D

更改webpack.config.js对应loader的rules部分,需要注意的是,该条rule需要放在其他rule的上方。

module: {
      strictExportPresence: true,
      rules: [
        // 多进程构建
        {
          test: /.js$/,
          include: path.resolve('src'),
          use: [
            "thread-loader",
            // 耗时的 loader (例如 babel-loader)
          ],
        },

实际打包时间又优化了2s。

Webpack项目优化实战:打包速度优化一文搞定

4、缩小构建范围构建过程是默认全局查找,这非常的耗时。通过手动配置rules中的文件查找范围,可以减少打包的范围,从而提升打包的速度。在webpack.config.js文件中如下配置:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
};

由于babel-loader对文件的转化是非常耗时的,所以缩小构建范围首先就是缩小需要babel-loader处理的文件范围。

可以通过 test 、 include 、 exclude 三个配置项来命中 Loader 要应用规则的文件,用include去命中需要被babel-loader处理的文件,exclude去排除不需要被处理的文件,从而缩小了 Loader 处理文件的范围。


5、使用缓存

通过使用缓存机制能有效提升二次打包速度。目前webpack5 内置了 cache 模块,缓存生成的 webpack 模块和 chunk,来改善构建速度。它在开发环境下会默认设置为 type: 'memory' 而在生产环境中被禁用。可以通过设置 cache: { type: 'filesystem' } 来开放更多配置项。

比如我在webpack.config.js中如下配置:

module.exports = {
  cache: {
    type: 'filesystem',
  },
};

那么第一次打包后,就会在node_modules文件夹下面生成一个cache文件夹,从而第二次打包速度显著提升。

Webpack项目优化实战:打包速度优化一文搞定