如何缩小 Angular 4 Web 应用程序答案

【问题标题】：How to minify an Angular 4 web application如何缩小 Angular 4 Web 应用程序
【发布时间】：2019-03-20 13:44:49
【问题描述】：

我正在使用 Angular 4 和 angular/cli: 1.3.1 构建一个 Web 应用程序 node: 10.7.0

我可以使用这个插件来缩小我的应用程序，因为 vendor.bundle 文件大小约为 8mb。我在应用中实现了延迟加载。

我正在使用 Jenkins 构建应用程序：npm run build --prod --aot true --progress false

如果有人知道插件或有一些教程，那就太好了！

提前致谢。

【问题讨论】：

它是生产版本吗？ (ng build --configuration=production)
@MartinPaucot 我正在使用这个命令 npm run build --prod --aot true --progress false。我会试试你的命令。
@MartinPaucot 没有变化。文件大小相同。
这是一个相当广泛的问题，因为没有看到诸如 angular.json、package.json、tsconfig.ts 之类的东西，你的包是如何工作的等等。很难确定你缺少什么.但是，在 angular.json -> 配置 -> 生产中确保优化：true、sourceMap:false、buildOptimizer:true、extractCss:true、vendorChunk:true，如果 CLI 配置正确，则在大多数情况下只需运行 ng build --prod。
@MartinPaucot 您的命令仅对 Angular 6 + 项目有效。所以这不是这个问题的好答案。

标签： angular npm minify

【解决方案1】：

一般来说，您应该使用适当的 CLI 参数。如果是生产版本，它将是

ng build --prod

在 Angular 生产环境中，构建文件被缩小和丑化。

您还询问了一些指南，因此我提供了更多要阅读的内容：

https://angular.io/guide/deployment

https://medium.com/@kavisha.talsania/angular-development-vs-production-build-671b7fd5dbf4

【讨论】：

构建命令代码已优化。问题在于文件的大小。

【解决方案2】：

在我的例子中，我使用这个命令

ng build --prod --aot --build-optimizer --vendor-chunk --source-map=false

【讨论】：

之前测试过，问题与如何使用命令构建无关

【解决方案3】：

部分问题已解决。解决方案？以前，我们使用“npm run build --prod --aot true --progress false”从 jenkins 进行构建，出于某种原因，使用该命令供应商文件被命名为 vendor.bundle.js，大小为 8.3mb。现在我通过“ng build --prod --aot true --progress false”更改了该命令，供应商文件被命名为 vendor.fdd67abb220f03081b41.bundle.js 并且大小为 o 2.3mb。

有人知道为什么新供应商的名称中有哈希吗？

【讨论】：