角度cli中的角度4代码分裂

Question

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

1. 渲染阻止样式表（74 kb）
2. 巨大的vendor.bundle.js（1.1 MB）
3. 大main.bundle.js（每个组件使用延迟加载后为398 kb）

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

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

Answer 1

您可能需要使用webpack中的splitchunk

看看这篇文章：

https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

Answer 2

尝试使用--aot创建您的版本，这会减少vendor.bundle.js的尺寸。还可以在服务器上启用gzip压缩。

--aot提前编译也有一些很好的选择。总是尝试用它来创建你的构建。