Webpack 热更新 CSS 引起的栈溢出(out of memory)

发现使用 webpack 热更新 CSS 多次后会引起内存溢出导致 webpack 退出。



搞了半天时间找原因,最后终于发现是什么在捣鬼。

网上找资料发现 webpack issues/6929# 对这个问题有详细的讨论,列了几个可能的原因:

  • postcss-loader 的 bug 导致的循环引用;
  • 静态资源被写入内存,频繁更新导致的内存溢出
  • hot-update.json 的hash频繁改变导致的

针对第一种情况,已经在 postcss-loader 2.6.1 被修复,请检查自己的 postcss-loader 版本;
第二种情况没有找到解决方法 emmmm
第三种我看我的 hot-update.json hash每次都是固定的,所以应该不是这个问题,如果是因为这个问题,可以参考Removal of *.hot-update.json files 给 hot-update.json 一个固定的命名。

但是当我把解决措施应用在我的 webpack 的时候,发现并不能解决我的问题,此时,我发现我的 bebel 有一个 warning:

[BABEL] Note: The code generator has deoptimised the styling of D:\recharge-exchange-gift-singalDay\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the max of 500KB.

bebel 对库里的 react-dom 做了处理,推测可能是因为这个原因,参考了# What does “The code generator has deoptimised the styling of [some file] as it exceeds the max of ”100KB“” mean?
中 Marcus Junius Brutus 的答案,在 处理 js 的 rules 中把 node_modules 排除掉了。
警告没了,但是问题依然存在。
无奈只好对比同事的 webpack 跑跑看,发现原来是在 development 阶段就使用了 es3ify-webpack-plugin 这个将代码转为 es3 的插件,在 development 阶段把插件排除掉,问题解决了~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 看了古典老师的文章集,感触颇深,一开始看就停不下来,导致在逛街的时候都忍不住要停下来找个座位坐下来继续看完。 我们...
    黯蓝megumi是Amy阅读 595评论 1 2
  • 今天把拉下的订阅专栏补了一部分,回归正常工作状态。 把拖延着一直没去的健身房咨询也完成了,剩下的就是去锻炼了。 买...
    休止符UPUP阅读 316评论 0 0
  • 西虹市首富这部电影即讲了主人公如何花光十亿来继承爷爷的遗产,有向我们展示了,人与财富的关系。 在刚开始...
    杨郑重阅读 440评论 0 0

友情链接更多精彩内容