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 在使用这个插件时可能会有坑，大家谨慎使用，我也是在测试中，后续一些问题及解决方案会同步更新...
