vue-cli5 配置 hard-source-webpack-plugin 遇到的坑与替代方案

在优化项目时发现当前项目编译/打包时间在40s左右, 时间较长, 可以使用 hard-source-webpack-plugin 减少打包时间

按照文档上安装并配置

npm i hard-source-webpack-plugin

vue.config.js

......
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
......
configureWebpack: config => {
  ......
  config.plugins = [
    new HardSourceWebpackPlugin()
  ]
  ......
}

启动项目报以下错误

网上搜索解决方案时发现该插件能正常使用的是 webpack5 以下的版本, 而 vue-cli5 配套的是 webpack5. 针对在 webpack5 使用报错问题 github 上 2019 年提的 issues 也尚未解决. 其中有个答主提到 webpack5 不需要该插件, 本身支持 cache 的配置, 去查看官方文档后改造配置如下

configureWebpack: config => {
  ......
  config.cache = {
    type: 'filesystem',
    allowCollectingMemory: true
  }
  ......
}

编译成功后时间

配置 cache 后编译时间:

未配置 cache 编译时间:

相比之下减少了 90% 提升效果非常明显, 如果项目使用 vue-cli5 搭建的或者使用的是 webpack5 版本可增加 cache 配置提升效率