优化生产环境的 Angular 应用程序答案

【问题标题】：Optimize Angular application for Production Environment优化生产环境的 Angular 应用程序
【发布时间】：2018-04-26 12:15:42
【问题描述】：

我正在尝试针对生产优化我的 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：2017 年 11 月 14 日

您好，我一直在调查并且发现，当我为 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，所以我不明白为什么要添加它。

【问题讨论】：

默认情况下（这实际上是模块系统的全部内容）编译器只会导入您要求的包。问题是你如何要求他们。我不使用 Material，但我会从 Rxjs 中举一个常见的例子：很多人天真地 import Rx from "rxjs/Rx"; 却没有意识到这会导致整个 Rxjs 都包含在应用程序包中，而不管它“实际使用什么” '。确保这样的事情不会发生在某处。
嗨@msanford，问题是我只是从材料中导入必要的模块，但编译后，所有模块都被添加了。

标签： angular webpack webpack-2 angular2-aot

【解决方案1】：

您可以做很多事情来优化您的产品构建（例如删除不必要的材料模块）。看起来您没有使用 angular-cli，但它们的 --build-optimizer 用于生产构建的标志非常有用。

根据您的包分析器报告，您的 src 模块非常大，为此我建议延迟加载。它将允许您在用户导航到它们时随着时间的推移加载模块，而不是在应用程序初始化时全部加载。可以看一个懒加载的例子here

Here are一些关于优化角度束大小的更详细的答案

【讨论】：

嗨，杰克，感谢您的回复。我会尝试实现延迟加载 :) 但我不知道该怎么做：“比如删除不必要的材料模块”。真的，我只是在加载必要的材料模块。