Question

我正在使用angular 5构建一个聊天机器人。我创建了一个带有8/9组件的小应用程序。现在的问题是生产构建（bundle js）文件总数达到 3.6 MB 。如果我必须在cdn上托管这些文件，那将花费很多。

如何将捆绑尺寸缩小到可行的范围，例如 100 kb ？

捆绑详情：

ng build
hunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 3.89 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 107 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 202 kB [initial] [rendered]
chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 204 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 216 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.12 MB [initial] [rendered]

ng build --prod
chunk {inline} inline.a07175516c55c4014717.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.2e592d7ffe3a062bbdc0.bundle.js (main) 183 kB [initial] [rendered]
chunk {polyfills} polyfills.a958547e95fad8a7be8a.bundle.js (polyfills) 202 kB [initial] [rendered]
chunk {scripts} scripts.d93272ec54002ead254c.bundle.js (scripts) 204 kB [initial] [rendered]
chunk {styles} styles.b54edcd81812769932a0.bundle.css (styles) 197 kB [initial] [rendered]
chunk {vendor} vendor.343d293a3f72c924cb46.bundle.js (vendor) 2.84 MB [initial] [rendered]

Answer 1

尝试运行ng build --prod --aot --build-optimizer。

- build-optimizer 删除了比 - prod 更多的死代码，但它需要 - aot 标记才能工作，这意味着Ahead of Time Compilation

您还可以get Typescript Hero Plugin组织和删除未使用的导入。

检查整个项目，寻找未使用的组件，模型，类，服务。删除它们会减少最终的捆绑包大小。希望这会有所帮助。

Answer 2

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

Changed

我一直在使用

{"properties":[{"name": "closedate", "value": 1528744207881}]}

但是如果你使用'ng'

，似乎会忽略--prod标志

在另一个帖子上查看我的完整答案 How to reduce vendor/script bundle.js in Angular 5

角度5束大小太大

2 个答案: