加快webpack构建

随着项目的复杂,现在开发的移动端多页面项目构建时间超过二十秒,按一天重启二十次来说,一天有超过六分钟时间,一个月超过两小时用于构建webpack,如果能减少相关的时间,可以有效的节省开发时间。

1.在开发环境不使用babel转码,仅在生产环境使用。本地开发的chrome的es6的兼容性足够好,不需要babel转码,经测试,这一操作可以减少25%的构建时间。如果使用babel,可以开启babel的缓存

2.在开发环境不使用post-css,关闭压缩css,可以提升10%的速度。

3.在entry中仅引入当前开发的页面,这一举措可以提升一倍的构建速度,在其他步奏完成后,还需要12秒左右的构建速度,完成该步骤后,仅需五秒的构建时间。

4.启用代码热更新,想办法捕获热更新,避免热更新时刷新浏览器

5.启动happypack,并行编译

6.第三方代码库使用cdn

7.使用resolve.alias 优化资源的搜索路径,noParse忽略。

8.使用dll

本文章为前端进阶系列的一部分,
欢迎关注和star本博客或是关注我的github

支持作者

如果我的文章对你有帮助,欢迎 关注和 star 本博客 或是关注我的 github,获取更新通知。欢迎发送邮件到hpoenixf@foxmail.com与作者交流