记录一次webpack热更新优化过程

打包耗时

首先需要知道每次热更新中的耗时，网上一般都推荐 speed-measure-webpack-plugin 这个插件，不过可能很多项目使用都会有冲突，导致跑不起来

其实webpack有个记录进度的插件 ProgressPlugin

const handler = (percentage, message, ...args) => {
  // e.g. Output each progress message directly to the console:
  console.info(percentage, message, ...args);
};

new webpack.ProgressPlugin(handler);

支持传入一个函数，它注册了很多钩子，当钩子报告进度时将调用该函数，这里你可以通过他打印每个钩子之间的耗时 例如：

  let time = 0;
  const handler = (percentage, message, ...args) => {
      const timer2 = new Date();
      console.info(percentage, message,'|' ,...args,'|', timer2 - time);
      time = timer2
  };
  new webpack.ProgressPlugin(handler);

大概就是下面这个效果：

注意，每个阶段报告的耗时其实是上个阶段使用的时间，例如那个2367ms其实是ESLintPlugin花的时间

然后你就可以根据哪些地方耗时比较多着手

优化方式

其实想一下webpack打包过程中都做了什么，首先是loader，然后就是plugin

这里只分享几个大点

loader

可以减少loader的使用或者控制它打包范围

例如在开发环境中关闭babal-loader 或打开babal-loader的缓存功能，加快下次打包的速度 cacheDirectory

plugin

有一些plugin是非常耗时的，例如上图的ESLintPlugin，可以选择在开发环境关闭->去使用vscode的格式化插件或者在代码提交时利用husky进行校验

sourceMap

如果开发环境代码可以不用 sourceMap 那就选择关闭，如果不行那也不用选择devtool：source-map，可以尝试 cheap-module-source-map等等策略，只要能满足使用就好（Devtool）

减少打包量

以小程序为例子，但是思想都类似

例如你使用uniapp打包，它会根据你配置的页面json文件来作为入口进行打包，可以通过在打包命令增加分包名来主动修改它打包的入口页面

例如打包命令增加分包名： npm run dev subPackageA

packages = finalConfig.packages.filter(i => i.includes(__subPackage__name__))

其他办法

中间代码缓存 合理的分包 减少打印输出等等.......

最后

根据你自己项目的耗时点来做对应的优化才是适合自己的