如何在Angular 5中减少供应商/脚本bundle.js

Question

我已经使用ng build -prod -aot -vc -cc -dop --buildOptimize来减少已构建应用的大小。 现在这是我的情况：

是否有可能减少（或可能分裂）这些更大的块？ 有什么东西可以帮助我检查这些模块吗？

P.S。我已经使用webpack-analyzer来检查情况，但它无法深入了解这些文件。

Answer 1

使用源图构建应用程序，然后使用source-map-explorer等工具详细说明您正在使用的每个库的大小。

常见库的一些提示：

• 如果您使用的是RxJS 5.5或更高版本，请使用.pipe(operator1(), operator2())语法，当您不使用许多不同的运算符时，它会显着降低RxJS的大小
• 如果您正在使用moment.js，请务必仅导入您正在使用的区域设置
• 如果您正在使用Angular Material，请务必不要导入未使用的模块
• 如果您正在使用bootstrap和SASS，请仅导入所需的.scss个文件

如果您还没有这样做，请将您的应用划分为延迟模块，这将减少初始块的大小。

Answer 2

我遇到了类似的大型prod捆绑问题并修复了此命令的问题;

npm run build

我一直在使用

npm run ng build --prod

但--prod标志没有执行，我留下了vendor.bundle.js，这是2.9mbs

chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 3.89 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 122 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 349 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.96 MB [initial] [rendered]

只有npm run build（no ng），整个dist文件夹是400kb

chunk {0} polyfills.67d5a7eec41ba0d20dc4.bundle.js (polyfills) 101 kB [initial] [rendered]
chunk {1} main.3874ea54d23e70290fa8.bundle.js (main) 327 kB [initial] [rendered]
chunk {2} styles.0aad5eda327b47b9e9fa.bundle.css (styles) 1.56 kB [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]

Answer 3

对不起，请稍后回复。 此答案适用于所有较新版本的Angular。

1. 如果您使用的是Angular Material，则从特定的包导出器导入。

例如：

import {MatButtonModule} from '@angular/material/button';

代替

import {MatButtonModule} from '@angular/material';

1. 在整个应用程序中避免使用通用材料模块。

如果使用的是LazyLoading模块，请在特定模块中导入所需的软件包。

按照这些步骤，我将捆绑包的大小从9.0MB减小到1.45MB。

希望它也对你们有用：）。