Webpack Angular 4 编译需要很长时间

Posted 2023-02-22

【中文标题】Webpack Angular 4 编译需要很长时间

【英文标题】：Webpack Angular 4 compilation takes ages

【发布时间】：2018-07-18 01:01:05

【问题描述】：

我的团队最近从 Angular 2 切换到 Angular 4。我们还将 Webpack 从 1.x 版本切换到 3.8.1。 编译时间变得异常缓慢（大约 50 分钟）。不过，重新编译小改动需要几秒钟。

前端的总大小为 300MB。最初的假设是由于 node_modules 中的库太多而发生问题。但是在删除了超过 90% 的项目文件（未触及 node_modules）后，编译时间变成了 2 分钟，总目录大小为 280MB。其中 5 MB 是我们项目文件的剩余空间，其余 275 MB 是 node_modules 文件夹。 所以问题应该出在配置中或我们编写代码的方式上。 以前有人遇到过这个问题吗？什么可能导致这些问题？

很遗憾，我不能分享任何代码。但如果有人有任何建议，将不胜感激。

【问题讨论】：

你的 node_modules 有多大并不重要。哪些包对捆绑包有贡献以及多少很重要。如果一个包仅贡献 20kb，那么它是否为 50mb 并不重要。

我们已经下载并使用了所有这些模块。现在我们的项目几乎不使用任何外部资源。但是 5MB 的项目文件的编译时间仍然是 2 分钟。

你没有指定最重要的部分，使用什么编译类型。这个数字对于 AOT 来说似乎是合理的。

不确定编译类型是什么意思。但是在我们只使用 npm 之前（一切都很好），现在我们已经迁移到了 yarn。我们正在使用“yarn start”来编译项目。其中'start'在package.json中被定义为“”webpack-dev-server --color --progress“。

编译类型，即 JIT 或 AOT。这对于构建速度至关重要。这取决于项目配置，而不是您正在运行的命令。

【参考方案1】：

几乎可以肯定，AOT 的构建时间要比 JIT 长。

对我的表现有帮助的事情

更新到 webpack v3.10.0 更新到 NodeJS v8.9.x 调整 Ugilfy 或完全禁用。 Use the new Ugilfy 更新我所有的加载器，尤其是less/sass 关注build performance guide 也有用：Slack's webpack field guide