前段时间实在太忙, 都没时间写博客, 最新稍微好点, 必须安排一个。
思路
项目越来越大,总是感觉编译一次越来越慢,不能忍...
既然想要提速, 就需要知道webpack的整个编译的过程原理, 包括:
-
输入是什么
-
编译过程是什么
-
输出又是什么
输入
先来分析一下输入, 以现在流行的SPA来说, 从入口文件开始可以生成整个项目的依赖树, 那么输入就很清晰了:
-
业务代码
-
图片
-
CSS
-
第三方依赖
上面几个就是主要的东西了。
输出
我们再来看看输出是什么, 这个就需要根据不同项目来看了.
-
编译好的JS文件
-
CSS文件
-
图片
这里最主要的就是JS文件了, 因为这个占了编译的大头, 我们聚焦一下
编译过程
至于Webpack的整体机制如loader/plugin啊这些就不在这里说了， 官网或者网上太多了， 只讲讲本人一路过来的思路和体验。
知道了输入和输出, 我们就可以有针对性的进行优化了。总体逃不过IO和运算的问题。
思路1：启用多线程或多进程，把不同的工作交给不同的线程来做， threadloader和Happypack喜欢用哪个就用哪个
思路2： 应该可以把编译的过程或结果进行缓存啊, 查查各种loader文档是否支持缓存， cache：true来一波
思路3：输出的vendor包我都好久没改过了， 这个其实就不用每次编译啊， 机制， DLLPlugin了解一下
思路4： 有些依赖都不用打包啊， 我直接用CDN的就好了啊， 对啊External就是干这个的
思路5： 好像HotReload模式下我改个文件编译很快的啊， 按理说每次新编译也可以啊，对了， webpack5的新cache策略很nice
以上方法本人都使用并验证过，最好用的还是Webpack5的新缓存策略，所以能升级就升级啦，跟紧时代脚步。
总结
总体来说， 还是需要根据不同项目的需求来做。本地开发构建和生产构建是二回事，本地开发构建直接使用webpack5的内置缓存策略就好了。
但是生产构建就不同了， 需要考虑懒加载，拆包，公用模块打包策略，三方依赖用external还是自己打vendor，CSS单独抽取还是跟随JS， 图片要不要做雪碧图，生产环境开没开HTTP2，这些都会决定你的生产环境打包策略。