umi3 使用 hard-source-webpack-plugin 插件提升构建速度

umi3 的打包速度实属感人，在 umi2 默认使用了 hard-source-webpack-plugin 插件提升构建速度，不知道为啥在 umi3 干掉了这一功能，那我们只好自己配置啦。

第一步肯定是安装插件了

yarn add --dev hard-source-webpack-plugin

第二步在 config.ts 中使用 chainWebpack 配置插件

import { defineConfig } from 'umi';

export default defineConfig({
  // webpack 配置
  chainWebpack: function (config, { webpack }) {
    // 打包加速
    config.plugin('hardSource').use(HardSourceWebpackPlugin);
    // 对下面配置的 module 不进行缓存
    config.plugin('hardSourceExcludeModule').use(HardSourceWebpackPlugin.ExcludeModulePlugin, [
      [
        {
          test: /mini-css-extract-plugin[\\/]dist[\\/]loader/,
        },
        {
          test: /eslint-loader/,
        },
        {
          test: /.*\.DS_Store/,
        },
      ],
    ]);
  },
});

第一次构建速度不会有变化，后面再构建时会使用缓存进行构建，速度就会快很多。关于 hard-source-webpack-plugin 的更多配置可查看 github地址。

需要注意的是

• 当使用了 hard-source 加速，umi 提供的 SPEED_MEASURE 能力，也就是分析 Webpack 编译时间的插件就不能用了，两者同时开启再打包会报错，目前我还没有研究出解决方案。

• 因为还不清楚为什么 umi3 默认放弃使用 hard-source ，因此我怀疑 umi 在使用这个插件时可能会有坑，大家谨慎使用，我也是在测试中，后续一些问题及解决方案会同步更新...