Angular 2 和 WebPack：如何减小包的大小？答案

【问题标题】：Angular 2 and WebPack: how to reduce the size of the bundle?Angular 2 和 WebPack：如何减小包的大小？
【发布时间】：2017-02-22 01:41:17
【问题描述】：

我尝试了一些使用 WebPack 的 Angular 2 种子项目。当我构建捆绑包以将其发布到 Prod 时，我最终得到了一个大约 3MB 的文件。

我怎样才能减小这个文件的大小？

【问题讨论】：

您使用的是 tree shaking 和 aot 选项吗？ npm run build.prod.rollup.aot ?您也可以忽略 .map 文件的大小。

【解决方案1】：

我认为你提供的项目没有使用 webpack。

如果您只是在寻找种子项目，可以查看angular-cli。 ng build --target=production 做一个非常好的产品构建。

如果您现在正在使用 webpack，您可以检查的一件事是 webpack 配置中的 devtool，确保它不是 eval。使用source-map 可能会有所帮助。

【讨论】：

【解决方案2】：

对于空应用程序，Webpack 的最小大小约为 800kb，我怀疑你做错了什么。源地图是可选的。

【讨论】：

【解决方案3】：

有一些重要的事情可以减少你的包大小：

尝试使用延迟加载。这对于减小主包的大小非常有用，并且它会拆分为一个块文件。
参考这篇文档：https://angular.io/guide/router
删除不需要的包。
示例：
如果你想使用 boostrap modal 模块，你可以像这样导入它 import {modalModule} from ngx-boostrap/modal

【讨论】：