使用hard-source-webpack-plugin优化vue编译速度

现在公司的项目文件越来越多, 感觉每次打包的速度有点慢, 就尝试了一下优化项目编译速度

dll方案

通过DllPlugin打包dll.js文件, 然后引入.
经过一番折腾的结果是打包时间反而增加了, 我纳闷得不行, 后来查询发现这个方案只对webpack2/3有效, 经查询自己项目用的webpack4, 踩坑+1

hard-source-webpack-plugin方案

官方介绍

HardSourceWebpackPlugin是 webpack 的插件，用于为模块提供中间缓存步骤。为了看到结果，你需要使用这个插件运行 webpack 两次：第一次构建需要正常的时间。第二次构建将明显更快。

为了对比时间, 要查询了如何显示打包时间, 最多的是修改node_modules源码的方式, 也有speed-measure-webpack-plugin可以显示, 但是会与这个插件冲突, 最后还是选择修改源码的方式

async function build (args, api, options) {
  // 开始时间
  const startTime = new Date().getTime()
  ...
  return new Promise((resolve, reject) => {
    webpack(webpackConfig, (err, stats) => {
      ...
      if (!args.silent) {
        ...
        if (args.target === 'app' && !isLegacyBuild) {
          if (!args.watch) {
          	// 打印时间
          	console.log('Cost '+(new Date().getTime()-startTime)+'ms')
            ...
          } else {
            ...
          }
        }
      }
	  ...其他代码
    })
  })
}

速度对比
未使用插件:

插件第一次:

插件第二次:

可以看到速度得到比较明显的提升

插件配置
安装

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

vue.config.js配置

const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");

module.exports = {
  chainWebpack: (config) => {
    // 打包缓存加速
    config.plugin("hardSource").use(HardSourceWebpackPlugin);
  },
};