优化生产环境的角度应用程序

Question

我正在尝试优化我的Angular应用程序进行生产。目前我正在使用Uglify，Compression，......我正在AOT编译。当我编译应用程序时，我收到此消息：

Asset     Size  Chunks                    Chunk Names
main.bundle.js  2.66 MB       0  [emitted]  [big]  main
main.bundle.js.gz   530 kB          [emitted]  [big]
../index.html   2.3 kB          [emitted]

查看Webpack Bundle Analyzer我看到了下一个：

我在这里看到了：

1.- @ angular / material正在将所有组件添加到bundle中，但我只使用其中一些。

2.-在我的SRC中添加了我的* .component.ts文件，还添加了我的* .component.ngfactory.ts（我的CSS也一样）

所以，我的问题是：有没有办法让Webpack不要包含我不使用的材料中的组件？而且，什么是ngfactory文件以及为什么要添加它们？

更新1：11/14/2017

嗨，我一直在调查，我已经看到了，当我为AOT编译我的browser.module.ngfactory.ts包含所有依赖项的“import * from ...”

import * as i81 from '../+app/+product/product.component';
import * as i82 from '../+app/+term/term.component';
import * as i83 from '../+app/+home/home.component';
import * as i84 from '../+app/+oops/oops.component';
import * as i85 from '@angular/material/toolbar';
import * as i86 from '@angular/material/button';
import * as i87 from '@angular/material/button-toggle';

例如，我没有使用角度/材质/工具栏，所以我不明白为什么要添加它。

Answer 1

您可以采取许多措施来优化生产构建（例如删除不必要的材料模块）。看起来好像你没有使用angular-cli，但是用于生产构建的--build-optimizer标志非常有用。

根据您的捆绑分析器报告，您的src模块非常大，为此我建议延迟加载。它允许您在用户导航到模块时随时加载模块，而不是在应用程序初始化时加载模块。您可以看到延迟加载here

的示例

Here are有关优化角度束大小的更详细解答