webpack 性能优化

Posted on Edited on

引言

随着项目的复杂度升高项目模块的增多，webpack 的构建速度越来越慢，整个体验糟透了，尤其在性能不好的电脑上特别明显，特写此文来记录下实际项目中优化 webpack 过程。

性能分析

对于 webapck 的优化主要在两个方面，一是构建速度，二是包体积

构建速度

webpack 的 speed-measure-webpack-plugin 插件可以分析出在打包过程中 plugin 和 loader 处理的所花费的时间，对症下药才能更好的治疗。

1
npm install speed-measure-webpack-plugin --save-dev
1
2
3
4
5
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = smp.wrap({
  plugins: [new MyPlugin(), new MyOtherPlugin()],
});

speed-measure-webpack-plugin

bundle 体积

使用 webpack-bundle-analyzer 插件可以分析出整个项目 bundle 的依赖分布图，我们可以剔除一些没必要的文件或者拆分包大小

1
npm install --save-dev webpack-bundle-analyzer
1
2
3
4
5
6
7
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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

webpack-bundle-analyzer

优化策略

loader 缓存

从 speed-measure-webpack-plugin 给出的结果分析，总共的处理时间在 3 mins, 15.18 secs，其中 vue-loader 和 eslint-loader 耗时较高，

1、cache-loader

在一些性能开销较大的 loader 之前添加 cache-loader，将结果缓存中磁盘中。默认保存在 node_modueles/.cache/cache-loader 目录下。

首先安装依赖：

1
npm install --save-dev cache-loader

配置：

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
    //...
    
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: ['cache-loader','babel-loader']
            }
        ]
    }
}

eslint-loader 和 vue-loader 自带都支持缓存，所以不需要再在前面添加 cache-loader

thread-loader

webpack 每解析一个模块，thread-loader 会将它及它的依赖分配给 worker 进程中处理

安装：

1
npm install --save-dev thread-loader

配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'thread-loader',
          'babel-loader'
        ]
      },
      ...
    ]
    ...
  }
  ...
}

hard-source-webpack-plugin

HardSourceWebpackPlugin是 webpack 的插件，他可以节约二次构建的时间

1、安装

1
npm install --save-dev hard-source-webpack-plugin

2、配置

1
2
3
4
5
6
7
8
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  // ......
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

结语

其实针对 webpack 的优化方式还有有很多，不限于上面这些点，但是真正有效的很少，有时的提升也微乎其微的，最好的办法还是升级最新的版本。