webpack3.x升级4.x之后打包速度优化

前言

上一篇我们讲到，webpack3.x 升级 4.x 后打包大小优化，今天讲一下 webpack 4.x（webpack 4.43.0） 的打包速度优化，其实在升级了 webpack4 之后对于打包速度就已经有了很大的提升，但是查找时间（缩小范围）、loader 处理时间（多进程）、二次打包时间（缓存）仍有可优化的空间。

打包分析

在优化之前我们需要清楚项目打包的性能情况，这里我们使用 speed-measure-webpack-plugin 插件来进行分析

webpack.base.js

+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

+const smp = new SpeedMeasurePlugin({
+  outputFormat: 'humanVerbose'
+});

const webpackConfig = merge(baseWebpackConfig, {
  // ..
});

-module.exports = webpackConfig;
+module.exports = smp.wrap(webpackConfig);

打包看下，本次耗时 62,361 ms，列出了 Plugins 和 Loaders 具体耗时的细节：

图比较长但是基本能看出，其中耗时较多的是 vue-loader 和 ts-loader

查找时间优化-exclude/include

webpack 从入口文件开始，根据依赖关系查找模块，我们要尽可能少的处理模块，最常见的就是排除 exclude: /node_modules/，exclude 和 include 同时使用时 exclude 优先级更高

webpack.base.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
        // 确保 node_modules 中 Vue 单文件组件的