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

Question

我是新人，正在试验Angular2。我发现dist文件夹中的文件很大，有一个由angular cli

创建的空项目

以下是我采取的步骤

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

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

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

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

Answer 1

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

gzip on;
gzip_static on;

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

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

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

ng build --prod

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

<击> 在编译的供应商脚本中还有很多注释块（@license），您可以尝试通过另一轮缩小来运行js文件以去掉那些并在{{1}之上再次添加其中一个}

<强>更新

你提到在另一个问题中，应用程序的大小下降到＆lt; 100KB。您的问题就在于此，您只需查看vendor.js文件，这是您的编译/压缩应用程序，而不是普通的js文件。你所指的50kb就是他们​​的路线图。据我所知，他们设法将文件大小降低到20kb，因为他们实现了自己的闭包编译器和不同的归档方法（brotli）

  

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

这就是为什么他们将包装实现隐藏在js.gz中。更改为另一个建筑和编译工具将更容易实现，而不会弄乱人们的应用程序。这将是一段时间，或者即使他们要实施它。现在，我说angular-cli对于一个给你这么多的框架来说是一个相当不错的大小：）