angular-cli 中的 Angular 4 代码拆分答案

【问题标题】：Angular 4 code splitting in angular-cliangular-cli 中的 Angular 4 代码拆分
【发布时间】：2017-11-12 20:32:58
【问题描述】：

我正在使用 angular-cli 构建我的项目（ng build --prod）。我的生产版本有 3 个问题：

我想在 2G 连接上快速加载我的网站。当我在灯塔上测试它时，第一个有意义的页面是 7 秒。然后我将我的项目从 angular cli 转换为 webpack (ng eject --force)。然后vendor.bundle.js 大小变为 5.9 mb。

我想拆分我的 vendor.bundle.js 并使用 angular-cli 删除阻塞样式表。

【问题讨论】：

【解决方案1】：

你可能需要使用 webpack 中的 splitchunk

看看这篇文章：

【讨论】：

【解决方案2】：

尝试使用--aot 创建您的构建，它将减小您的vendor.bundle.js 的大小。还要在您的服务器上启用 gzip 压缩。

--aot Ahead-Of-Time 编译也有一些好处。始终尝试使用它创建您的构建。

【讨论】：