npm 编译慢_如何有效提升快应用(Webpack)编译速度

背景

在开发快应用时，少不了构建操作：npm run build(官方 IDE 集成了这些操作，本质上也是调用同样方法)。这是因为快应用有自己的 DSL 语法，直接写出来，在底层不能识别，需要把业务代码编译成底层能运行的代码(感兴趣的同学，可在 build 文件夹查看编译后的代码产物)。整个过程就跟 Vue 和 React 工程的打包一样。等待的过程总是漫长，当项目越来越大的时候，难免还要花上点时间。可谁不希望这个过程越快越好呢？本篇就在于探讨，如何有效提升快应用(Webpack)编译速度。

快应用工程是基于 hap-toolkit 编译打包的。而它的功能，部分是基于 Webpack 开发。所以下面跟大家分享的，关于提升快应用编译速度的方法，同样也适用于基于 Webpack 构建的 Web 应用。

基于插件

不过毕竟是 Webpack 上的封装，所以不是所有方法都可以用上。现在 hap-toolkit 支持一些自定义配置了，可以使用部分 loader 和 plugin。详情请查看 ToolKit 项目配置 里面有自定义 webpack plugin 的代码示例。我们这里要讲的就是使用 hard-source-webpack-plugin 插件来为编译加速。

对于做过 Webpack 性能优化的同学，可能有用到过 HardSourceWebpackPlugin 插件，用于为模块提供中间缓存步骤。它能明显提升第二次构建速度：

HardSourceWebpackPlugin is a plugin for webpack to provide an intermediate caching step for modules. In order to see results, you'll need to run webpack