針對生產環境優化Angular應用

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將所有組件添加到捆綁包中，但我僅使用其中的一部分。

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';

例如，我沒有使用angular / material / toolbar，所以我不明白為什么要添加它。

Answer 1

您可以做很多事情來優化生產構建（例如刪除不必要的材料模塊）。 看起來您好像沒有在使用angular-cli，但是用於生產構建的--build-optimizer標志非常有用。

根據包分析器報告，您的src模塊很大，為此，我建議您延遲加載。 當用戶導航到模塊時，它將允許您隨時間加載模塊，而不是在應用初始化時加載所有模塊。 您可以在此處看到延遲加載的示例

這 是有關優化角度束尺寸的一些更詳細的答案