减少Angular 2文件大小以进行部署

Question

我是新人,正在试验Angular2.我发现dist文件夹中的文件非常大,有一个由angular cli创建的空项目

这是我采取的步骤

1. 新的myProject
2. cd myProject
3. ng build --prod

我的dist文件夹里面的所有文件都是1.1mb!我相信它们都是部署所需的文件.尽可能放弃这个的最佳方法是什么？

---更新---运行build -e = prod --prod --no-sourcemap --aot后

尺寸下降到大约500kb.哪个好50%.但是,这篇文章Angular 2:减少应用程序大小提到文件大小已降至<100kb.好像这个家伙忽略了main.a2eb733289ef46cb798c.bundle.js由于某种原因是452kb的事实？我应该在dist文件夹中部署所有文件,如下图所示？或者我可以忽略一些来减少部署的规模？我确实在网上看到Angular团队设法将基本启动应用程序的文件大小降低到50kb.

Answer 1

要减小构建的大小,首先应该只查看gzip文件.如果您将Web服务器设置得很好,这些是它将提供的唯一文件.你甚至可以gzip你的index.html服务.大多数Web服务器(例如nginx)都带有加载静态gzip文件的功能.要启用此功能,请将其放在nginx配置中:

gzip on;
gzip_static on;

Apache有一个类似的模块来加载静态gzip文件.

每个流行的网络服务器至少都有提供动态gzip压缩文件的选项.这意味着当从Web服务器请求文件时,它将在传输过程中被压缩.这大约是您在构建文件夹中看到的生成的gzip文件的大小.

为了更加轻松地缩小应用程序的尺寸,我建议使用aot编译,它也会使用树形抖动.要启用此功能,并确保使用生产环境构建应用程序,请使用以下命令构建:

ng build --prod

在我的构建中,我注意到如果我自己使用7zip例如gzip文件,并将其设置为最高压缩,则文件大小进一步减小.请注意,在客户端解压缩这些文件将比使用较少压缩的文件使用更多的CPU,但是对于最近的CPU,可以安全地忽略这种差异.

在编译的供应商脚本中还有很多注释块(@license),您可以尝试通过另一轮缩小来运行js文件以摆脱这些并在其上再次添加其中一个 vendor.js

更新

你提到在另一个问题中,应用程序的大小降至<100kb.你的本来就是那个,你只需要查看js.gz文件,这是你的编译/压缩应用程序,而不是普通的js文件.你所指的50kb就是他们​​的路线图.据我记得,他们设法将文件大小降低到20kb,因为他们实现了自己的闭包编译器和不同的归档方法(brotli)

Closure Compiler是一个使JavaScript下载和运行更快的工具.它不是从源语言编译成机器代码,而是从JavaScript编译成更好的JavaScript.它解析您的JavaScript,分析它,删除死代码并重写并最小化剩下的内容.它还检查语法,变量引用和类型,并警告常见的JavaScript陷阱.

这就是他们将包装实施隐藏在内部的原因angular-cli.更改为另一个建筑和编译工具将更容易实现,而不会弄乱人们的应用程序.这将是一段时间,或者即使他们要实施它.就目前而言,我说100kb对于一个给你这么多的框架来说这是一个相当不错的大小:)