即使包含 --aot --build-optimizer --sourcemaps=false 后，Angular Production Build 仍然非常庞大

Question

我的应用程序中有近 17 个模块，其大小与 Angular 生成的模块相比可以忽略不计。

chunk {common} common.chunk.js (common) 2.18 MB 
chunk {main} main.bundle.js (main) 4.42 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 616 KB [initial]

我知道 Angular 生成这些块是为了处理一些内部内容，但为什么主包是 4.5 MB。

我究竟做错了什么？

有什么办法可以减小这些尺寸吗？

Answer 1

没有特定的方法来减小尺寸。一种想法是延迟加载模块以减少初始块。

另一种是使用webpack 包分析器来分析块。

在捆绑分析器中，您可能会更深入地了解要优化的内容以及如何优化。生成用于生产构建的 JSON ( --aot --prod) 并使用捆绑分析器进行分析。

另外，如果您尚未将所有软件包更新为最新版本，树摇动可能无法正常工作，因此如果您导入以下内容：

import {Observable} from `rxjs/Rx`

它可能最终会捆绑整个库，您可能必须进行特定的导入，例如

import {Observable} from `rxjs/Observable`

当您在分析器中检查包时，树摇动是否存在可能会很明显。

即使使用 tree shake 一些依赖项（如momenjs）也可能很麻烦，因为它不是模块化的，更改为模块化替代方案可能会在这些情况下有所帮助。

还有Angular 文档中已经提到的source-map-explorer