Angular 2 页面大小答案

【问题标题】：Angular 2 page sizeAngular 2 页面大小
【发布时间】：2016-07-25 10:53:20
【问题描述】：

我刚刚开始使用 Angular 2。它实际上让我想到了仅针对 Hello World 的页面大小。

请查看实际需要的脚本，它已经是 1.75 MB。

Offcourse 缩小大约会减少 30-35%。

但对于这个垃圾 Hello World 类型的应用程序，它仍然会超过 1 MB。以最少的方式添加引导 CSS / Jquery / Jquery UI 会更进一步，并根据 Web 应用程序类型添加图像。

问题是 1.75 MB 的脚本，没有编写任何与应用程序相关的代码。

这是使页面大小平均超过 4-5 MB 的新网络标准吗？

【问题讨论】：

【解决方案1】：

Angular2 现在会越来越小。见ngconf about this。它主要是 tree-shaking 缩小的结果（只加载真正使用的代码）。

Angular 2 seed project，大约 300kb 的产品构建负载已经可供使用。

【讨论】：

【解决方案2】：

有几种策略可以减小您网站的总大小。

为您的资产启用 gzip 压缩。由于大量重复的字符串，大多数文本文件（如 JS 文件）压缩得非常好。
使用您确定的库的最小化版本。
如果可能，请使用对 3rd 方库的 CDN 引用。这样，用户可能已经在他们的缓存中拥有该文件并且不需要重新获取它。一些 CDN 还支持 HTTP/2，这意味着可以并行请求更多文件。
利用 Angular 2 RC 5 中的 Ahead-Of-Time 编译（AOT，也称为离线编译），并切换为使用不带编译器的 Angular 2 版本。这样可以节省大约一半的 Angular 2 库文件大小。
您自己使用 HTTP/2 作为您的资产，并单独引用每个 JS 文件，而不是捆绑它。这样，如果它们没有改变，用户在重新加载时不需要再次下载它们。并且第一次可以并行获取所有文件。
使用条件 cmets 或服务器端处理来删除仅与 IE 等特定浏览器相关的 shims 和其他 JS 文件。这样，其他浏览器就不会下载那些无用的脚本。
使用Rollup 之类的工具或其他可以“摇树”的工具来删除未使用的代码。

可能还有其他方法可以节省更多，但这是一个很好的起点。

【讨论】：