Question

如何捆绑和缩小Angular 2快速启动项目，减少初始加载时的HTTP请求？

在快速启动项目的第一页加载时，会产生大约300个http请求，这需要很长时间。

我在一些博客上看到，捆绑和缩小可能有助于减少此次通话。

角度2有很多方法可以做到这一点。网络包 SystemJs 角度CLI

但我无法通过快速启动项目找到如何使用其中任何一项。

Answer 1

您可以使用Angular Compiler执行此操作。有几种方法可以实现它。

选项1： Docker 如果你已经在使用docker和/或docker-compose，这是一个非常好的选择，非常简单。我创建了一个容器，可以监视您的应用程序源并在每次保存文件时构建它。您可以像这样使用该容器（注意，图像大约是600MB - 抱歉，角度编译器实际上很大！）：

docker run --rm -v $(pwd)/src treyjones/ng build -w

在这种情况下，我假设您的应用位于src。

您还可以使用此命令查看ng的完整帮助文档：

docker run --rm treyjones/ng -h

实际上，对我来说，在线查找完整的文档很困难。

如果您不想使用docker，您也可以只执行容器所做的事情，警告，它仍然是一个巨大的安装，只是通过节点而不是docker。有两种选择：

 npm i angular-cli@1.0.0-beta.24 -g

选项2 - 在package.json：

中将其添加为项目的依赖项

"devDependencies": {
    "angular-cli": "1.0.0-beta.24"
}

beta.24是npm列出的最新版本。我只用了beta.18。但是，我可以确认构建过程非常顺利，并且对我来说非常有效。

Answer 2

为避免加载数百个小文件，您通常使用webpack等捆绑器创建所谓的捆绑包。 Webpack是一个解决项目中依赖关系的工具，它提供了有关Typescript，Javascript，ES2015模块导入等的良好工具。

要了解事情是如何运作的，请查看angular2-webpack-starter项目。

此外Angular CLI使用了网络包。

如果您对使用webpack感兴趣，请告诉我学习曲线非常陡峭。不要试着去理解一个完整的项目，例如上面提到的angular2-webpack-starter项目。而是从更简单的事情开始，例如webpack教程的getting started部分。

Answer 3

我发现这样做的最简单的方法，就是有大量的增长空间，正在使用这个“模板”进行角度2项目。在构建生产时，它还为您提供了出色的可视化效果。 AoT, Minification, Webpack, etc... template