减少Angular 2文件大小以进行部署 [英] Reduce Angular 2 file size for deployment

问题描述

我是新手，正在Angular2上进行实验.我发现dist文件夹中的文件很大，有一个由angular cli创建的空项目.

I am new and experimenting on Angular2. I have found that the files in dist folder is quite large with an empty project that was created by angular cli

这是我采取的步骤

1. ng new myProject
2. cd myProject
3. ng build --prod

我dist文件夹中的所有文件均为1.1mb！我相信它们都是部署所需的所有文件.尽可能删除此内容的最佳方法是什么?

And all the files inside my dist folder are 1.1mb!! I believe they are all the files required for deployment. What are the best way to drop this as much as possible?

-更新- 我跑步后 ng build -e = prod --prod --no-sourcemap --aot

---Update--- After I run ng build -e=prod --prod --no-sourcemap --aot

大小减小到大约500kb.好50％.但是，这篇文章角度2:减小应用程序大小提到文件大小降至< 100kb.似乎该人出于某种原因忽略了main.a2eb733289ef46cb798c.bundle.js为452kb的事实?是否应将我的所有文件部署在dist文件夹中，如下图所示?还是我可以忽略一些减少部署规模的内容?我确实在网上看到某个地方，Angular团队设法将基本启动应用程序的文件大小降低到50kb.

the size got down to approximately 500kb. Which is 50% better. However, this post Angular 2: Reduce app size mentioned that the file size got down to <100kb. Seems like the guy ignored the fact that main.a2eb733289ef46cb798c.bundle.js is 452kb for some reason? Should I deploy ALL my files in the dist folder as shown in the image below? Or can I ignore some to reduce the size of deployment? I did see somewhere online that the Angular team managed to drop the file size down to 50kb for basic startup app.

推荐答案

要减小构建的大小，首先应该只查看gzip文件.如果您将网络服务器设置得很好，那么它们将是唯一的文件.您甚至可以gzip您的index.html并将其送达.大多数Web服务器(例如nginx)都具有加载静态gzip文件的功能.要启用此功能，请将其放置在您的nginx配置中:

To reduce the size of the built, you should at first only look at the gzip files. If you set your webserver up well, these are the only files it will serve. You can even gzip your index.html and have that served. Most webservers (for instance nginx) come with the functionality to load static gzip files. To enable this, place this in your nginx configuration:

gzip on;
gzip_static on;

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

Apache has a similar module to load static gzip files.

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

And every popular webserver has at least the option to serve dynamic gzipped files. Which means that when the file is requested from the webserver, it will get zipped during transport. This will be approximately the size of the generated gzip files you see in your build folder.

要进一步缩小应用程序的大小，我建议使用aot编译，该编译也将使用树状摇动.要启用此功能，并确保使用生产环境来构建您的应用程序，请使用以下命令进行构建:

To even downsize the application more, I suggest to use aot compilation, which will use tree-shaking as well. To enable this, and to make sure your application gets build using the production environment, use this command to build:

ng build --prod

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

In my build I did notice that if I gzipped the files myself using 7zip for instance, and set it on the highest compression, the file size got even further reduced. Be aware though, that decompressing these files on the client side will use more CPU than less compressed files, but with recent CPUs, this difference can be safely ignored.

<罢工> 在已编译的供应商脚本中也有很多注释块(@license)，您可以尝试通过另一轮缩小来运行js文件以消除它们，然后在vendor.js顶部再次添加其中一个

There are also a lot of comment blocks (@license) inside the compiled vendor script, you can try to run the js files through another round of minification to get rid of those and add one of them again on top of the vendor.js

更新

您提到在另一个问题中，应用程序大小降至< 100kb.您已经知道，只需查看js.gz文件，这是您的已编译/压缩应用程序，而不是纯js文件.您所指的50kb位于他们的路线图上.据我记得，他们设法将文件大小减小到了20kb，因为他们结合不同的归档方法(brotli)实现了自己的闭包编译器

You mention that in the other question the app size went down to < 100kb. Yours will already be that, you just have to look at the js.gz file, this is your compiled/zipped application, not the plain js file. The 50kb you are referring to is on the road map for them. As far as I remember they managed to get the file size even lower to 20kb, because they implemented their own closure compiler in combination with a different archiving method (brotli)

Closure编译器是用于使JavaScript下载和运行更快的工具.它不是从源语言编译为机器代码，而是从JavaScript编译为更好的JavaScript.它解析您的JavaScript，对其进行分析，删除无效代码，然后重写并最大程度地减少剩余内容.它还会检查语法，变量引用和类型，并警告常见的JavaScript陷阱.

The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.

这就是为什么他们在angular-cli中隐藏了打包实现.更改为另一种构建和编译工具将更容易实现，而不会影响人们的应用程序.这将是一段时间，甚至他们将要实施它.就目前而言，我说100kb对于一个框架来说是相当不错的大小，它为您提供了很多:)

This is why they've hidden the packaging implementation inside the angular-cli. Changing to another building and compiling tool will be much easier to implement, without messing up peoples application. It's going to be a while, or even if they are going to implement it. For now, I say that 100kb is a fairly decent size for a framework which is giving you so much :)

这篇关于减少Angular 2文件大小以进行部署的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！