分享一篇关于 Webpack 编译速度的旧文

[yhxx]

看到这个帖子 https://www.v2ex.com/t/522869 里这么多人都在说打包时间动不动几分钟，分享一下自己的一点经验，希望能帮到大家。

基本都是一些网上随便能搜到的常见优化策略，配置起来也很简单，人生苦短，这点时间就不要再分给 Webpack 了~

文章链接： https://zhuanlan.zhihu.com/p/42465502

附上一个我目前的项目的打包时间，供参考 排除 node_modules 之后，代码大约 5M，cloc 了一下，23 万行 js，首次打包时间 5 秒左右，rebuild 时间 0.2 秒-0.4 秒 左右

webpack-dev-server --hot --config config/webpack.dev.conf.js

i ｢ wds ｣: Project is running at http://localhost:8080/

i ｢ wds ｣: webpack output is served from /

i ｢ wds ｣: Content not from webpack is served from /build/

i ｢ wds ｣: 404s will fallback to /index.html

Build completed in 5.052s

i ｢ wdm ｣: 1202 modules

i ｢ wdm ｣: Compiled successfully.

i ｢ wdm ｣: Compiling...

Build completed in 0.311s

i ｢ wdm ｣: 1202 modules

i ｢ wdm ｣: Compiled successfully.

[connection]

DllPlugin 很好用~~

[azh7138m]

我们说 rebuild 不是指 dev 的时候，而是第二次 build 的时间，第一次 build 的时候一些 loader 会创建缓存，webpack 也给 loader 提供了 cache 的 api。
当然啦，webpack5 开始强化缓存机制了。
当然啦，所有写 webpack 打包时间优化的文章，时间减少一半的，要么是 loader 加了缓存，要么就是 webpack 升了 4。

[hellowes]

我觉得 文件行数大 也是导致编译速度降低的原因，主要是生成 source-map 的时候会卡 2s 左右。大佬可以试一下，一个 20k 行的文件，你修改一下变量，再等待编译完毕就要 2s 之后，因为都是抽离出 source-map 导致速度降低了。
不知道大佬对这个有没有一些解决方法呢？谢谢！

[yhxx]

@hellowes 20K 行。。。我觉得是不是先看看代码组织上能不能优化一下？
我觉得一个文件 200 行就已经差不多了

[hellowes]

@yhxx 是的，尽量优化了，这是之前外包出去的项目你懂得。我觉得也是超过 1k 就要整理一下了