Webpack 是一个现代化的 JavaScript 应用程序静态模块打包器。使用 Webpack 可以将整个项目拆分成多个模块进行交叉依赖,最终打包成一个或多个文件。在实际的开发中,Webpack 打包速度的优化是一个重要的问题。本文将介绍一些常用的优化打包速度的方法,以及如何在实际开发中使用这些方法。
1. 使用 DllPlugin 和 DllReferencePlugin 进行分离打包
如果你的项目中使用了一些第三方的库,这些库的代码很少改变,但是每次打包都会重新编译,这就浪费了时间。使用 DllPlugin 和 DllReferencePlugin 进行分离打包可以缓存第三方库的代码,从而节省打包时间。DllPlugin 将会生成一个包含给定名称的映射库。这个库包含了从这个库中导出的内容,并为这些导出创建了一个索引表,这些导出在入口中显示。然后,通过 DllReferencePlugin,主要的 webpack 配置文件可以告知一组“manifest”,这些 manifest 中描述了映射库中导出的信息,从而可以正确地访问这些依赖。
步骤:
- 在 webpack.config.js 中添加以下代码,将会创建一个名为
vendor-manifest.json
的文件。
----- ------- - ------------------ -------------- - - ------ - ------- --------- ------------ --------- -- -------- - --- ------------------- ----- ----------------- ----- -------------------- ----------------------- -- - -
- 在 index.html 中引入打包好的
<script>
文件:
------- -----------------------------
- 在 webpack.prod.config.js 中添加以下代码,引用 manifest 文件:
----- ------- - ------------------ ----- ---- - --------------- -------------- - - ------ - ----- ---------------- -- ------- - ----- ----------------------- -------- --------- ----------- -- -------- - --- ---------------------------- --------- ---------------------------- ------------------------ -- - -
这样就可以加快打包速度了。
2. 使用 HappyPack 进行多线程打包
Webpack 本身是单线程的。打包大型项目时,会有很多文件需要处理,这会消耗大量的时间。使用 HappyPack 可以让 Webpack 使用多线程处理代码,从而加快打包速度。HappyPack 将任务分配给多个 worker 进程以达到并行处理的目的。
步骤:
- 安装 HappyPack:
--- ------- --------- ----------
- 在 webpack.config.js 中添加以下代码:
----- --------- - -------------------- ----- -- - ------------- ----- --------------- - ---------------------- ----- ---------------- -- -------------- - - ------- - ------ - - ----- -------- ------- -------------------------------- - - -- -------- - --- ----------- --- ------------- ----------- ---------------- -------- ----------------- -------- ---- -- - -
这样就可以让 Webpack 使用多线程处理代码了。
3. 使用 MiniCssExtractPlugin 进行 CSS 提取
默认情况下,Webpack 把所有的 CSS 整合到 JavaScript 文件中。这会导致 JS 文件很大,加载时间很长。使用 MiniCssExtractPlugin 可以把 CSS 文件提取到独立的文件中,缩短页面加载时间。
步骤:
- 安装 MiniCssExtractPlugin:
--- ------- ----------------------- ----------
- 在 webpack.config.js 中添加以下代码:
----- -------------------- - ---------------------------------- -------------- - - ------- - ------ - - ----- --------- ---- - ---------------------------- ------------- ---------------- - - - -- -------- - --- ---------------------- --------- --------------------------- -------------- ------------------------ --- - -
这样就可以把 CSS 提取到独立的文件中了。
4. 使用 Tree Shaking 进行无用代码剔除
Tree Shaking 是一种可以使程序仅仅包含所需代码的技术,感谢 ES6 的 import 和 export 语句。使用 Tree Shaking 可以剔除掉无用的代码,减小打包体积,提高打包速度。
步骤:
确保使用 ES6 的
import
和export
语句,避免使用require
。在 webpack.config.js 中添加以下代码:
-------------- - - ----- ------------- ------------- - ------------ ---- - -
这样就可以使用 Tree Shaking 进行无用代码剔除了。
总结
以上是常用的优化 Webpack4 打包速度的方法,通过使用这些方法可以加快打包速度,提高开发效率。当然,这里提供的仅仅是入门级的方法,实际开发中还有更多更高效的方法。相信掌握了这些方法,对于前端性能优化会有很大的帮助。
参考文献:
- Webpack 官方文档 https://webpack.js.org/
- Github happy https://github.com/amireh/happypack
- Webpack Tree Shaking https://zhuanlan.zhihu.com/p/30455389
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/659f4f41add4f0e0ff7f97d5