webpack优化

123 阅读1分钟

1、使用缓存,开启Webpack 的 cache 配置

开启 cache 的情况下,Webpack 会缓存模块和生产的 chunk,下次构建的时候如果内容没有发生变化可以直接复用缓存的内容,改善编译性能。

2、HardSourceWebpackPlugin,适用于生产环境

Webpack 内部没有缓存编译过程中的中间结果。如果能将 Webpack 编译过程中的中间结果缓存起来,那么下次再进行编译的时候就可以提高编译的速度。HardSourceWebpackPlugin 就是用来解决这个问题的。

3、多线程

除了缓存外,另一种提升 Webpack 编译速度的思路是通过多线程并行执行。比较有代表性的工具是 HappyPack 和 Webpack 的 thread-loader。两者的功能相似,HappyPack 需要同时配置 plugin 和 loader,后者 thread-loader 只需要在 loader 中进行配置就行,而且也是 Webpack 官方维护的工具,所以我们采用 thread-loader。

4、预先编译

DllPlugin 插件:用于打包出单独的 dll(动态链接库)文件。 DllReferencePlugin 插件:用于在配置文件中去引入 DllPlugin 插件打包好的 dll 文件。