如何在角度 2、4、6、7、8、9、10 中减小 vendor.js 的大小？

Posted 2023-03-07

【中文标题】如何在角度 2、4、6、7、8、9、10 中减小 vendor.js 的大小？

【英文标题】：How to decrease size of vendor.js in angular 2,4,6,7,8,9,10?

【发布时间】：2018-12-17 20:46:31

【问题描述】：

Angular CLI 创建vendor.js，我不知道为什么以及它的用途是什么？对于新应用，此文件的大小约为 3.2MB！

此文件是否包含 Angular 6 javascript 源代码？

你不认为这是在互联网上以低速连接加载的大文件吗？

【参考方案1】：

此文件包含您添加到项目中的所有库。如果您在生产模式下构建应用，文件大小会更小。

ng build --prod

【讨论】：

在使用 Prod 之后，我的项目大小也为 8Mb，这需要更多时间来加载。我可以知道该怎么做吗？？

你的意思是dist文件夹中的文件？您可以在该文件夹中检查导致此问题的文件。

【参考方案2】：

试试

ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path --buildOptimizer

我将 vender.**.js 从 12mb 减少到 2mb

【讨论】：

在 Angular 9 中，运行 ng build --prod 后我在任何地方都找不到供应商块

查看这里：***.com/questions/52179853/…

没有为我改变任何东西

不错。 8mb 到 880Kbs

【参考方案3】：

您可以完全删除文件，而不是减少它 通过指定 --build-optimizer 标志，cli 将从构建输出中禁用此文件。

CLI 现在会将供应商代码捆绑到 main.js 包中，这也将启用 uglification 以减小大小。

因此，您会看到 main.js 包的大小略有增加，与供应商块的大小相比，这是最小的

【讨论】：

我在我们的构建中没有给出任何区别

我和供应商没有区别

@Karthikeyan 然后检查版本文档。它在更新的角度版本中自动完成

【参考方案4】：

您可能还想更新 package.json 中的构建脚本以默认生成 prod 构建。我遇到了这个部署到 Heroku 的问题，因为它会自动运行“npm build”。默认情况下，“npm build”运行以下脚本：

ng build

如果你更新到

ng build --prod

在 package.json 中，Heroku/AWS/Azure 将改为基于部署创建生产构建。