Angular2：import创建了许多请求

Question

当使用Angular2开发新网站时，我希望它可以帮助将页面拆分为多个模块，例如：

代码如下：

＆＃13;

＆＃13;

import { HeaderComponent }   from '../../Components/Main/header.component';
import { FooterComponent }   from '../../Components/Main/footer.component';
import { MenuComponent }   from '../../Components/Main/menu.component';

＆＃13;

＆＃13;

＆＃13;

然而，在这之后，我发现已经创建了许多请求。更多模块，更多请求：

同时，我无法将所有javascript文件合并为一个，因为＆＃39; import＆＃39;此处

理想的条件应该是这样的： 我可以拆分页面并重用任何模块。 2.将创建更少的请求。 3.将所有模块合并为一个。

这里有什么想法吗？

Answer 1

您可以使用Webpack
通过使用webpack，您只能有1个输入文件。

  

Webpack是一个功能强大的模块捆绑器。 bundle是一个JavaScript文件   包含属于一起且应该服务的资产   客户端响应单个文件请求

Answer 2

最好是使用Ahead of Time编译进行捆绑。你会在这里找到一本食谱：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

通过这种方式，您将获得一个小而快速的启动应用程序 - 因为HTML模板源和角度编译器不是捆绑包的一部分。此外，只有一个文件。

我有一个带有材质设计的angular2应用程序的完整示例，其中包含已编译的AOT-bundle：

https://github.com/fintechneo/angular2-templates

此外，ng cli应该能够为您生成AOT捆绑包，但是现在ng build --prod --aot功能仍然是实验性的，它创建的捆绑包比直接跟随AOT菜谱更大。此外，似乎ng cli生成的捆绑包的装载/启动时间比使用AOT食谱示例生成的捆绑包更长。