把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?

请在回答中包含Angular版本,以便我们在它转移到后续版本时更好地跟踪。


当前回答

“最佳”取决于场景。有时你只关心最小的单个包,但在大型应用程序中,你可能不得不考虑延迟加载。在某种程度上,将整个应用程序作为一个单一的bundle提供是不切实际的。

在后一种情况下,Webpack通常是最好的方法,因为它支持代码分割。

对于单个包,我会考虑Rollup,或者Closure编译器,如果你有勇气的话:-)

我已经在这里创建了我使用过的所有Angular捆绑器的示例:http://www.syntaxsuccess.com/viewarticle/angular-production-builds

代码可以在这里找到:https://github.com/thelgevold/angular-2-samples

Angular版本:4.1.x

其他回答

“最佳”取决于场景。有时你只关心最小的单个包,但在大型应用程序中,你可能不得不考虑延迟加载。在某种程度上,将整个应用程序作为一个单一的bundle提供是不切实际的。

在后一种情况下,Webpack通常是最好的方法,因为它支持代码分割。

对于单个包,我会考虑Rollup,或者Closure编译器,如果你有勇气的话:-)

我已经在这里创建了我使用过的所有Angular捆绑器的示例:http://www.syntaxsuccess.com/viewarticle/angular-production-builds

代码可以在这里找到:https://github.com/thelgevold/angular-2-samples

Angular版本:4.1.x

直到今天,我仍然认为Ahead-of-Time Compilation烹饪书是产品捆绑的最佳食谱。你可以在这里找到它:https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

到目前为止,我使用Angular 2的经验是,AoT创建了最小的构建,几乎没有加载时间。最重要的是,您只需要将几个文件交付到生产环境中。

这似乎是因为Angular编译器不会随产品版本一起发布,因为模板是“提前”编译的。看到你的HTML模板标记转换成javascript指令也很酷,这将很难反向工程到原始HTML。

我做了一个简单的视频,演示了Angular 2应用在开发阶段和AoT构建阶段的下载大小、文件数量等——你可以在这里看到:

https://youtu.be/ZoZDCgQwnmQ

你可以在这里找到视频中使用的源代码:

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

请在终端中使用以下命令

  ng build --configuration production --aot

带Webpack的Angular 2(不需要CLI设置)

1- Angular2团队的教程

Angular2团队发布了一个使用Webpack的教程

我将教程中的文件创建并放置在一个小型GitHub种子项目中。因此,您可以快速地尝试工作流。

产品说明:

npm安装 npm的开始。为发展。这将创建一个虚拟“dist”文件夹,该文件夹将被重载到您的本地主机地址。 NPM运行构建。用于生产。这将创建一个可以发送到web服务器的物理“dist”文件夹版本。dist文件夹有7.8MB,但实际上只需要234KB就可以在web浏览器中加载页面。

2 - Webkit入门套件

这个Webpack入门套件比上面的教程提供了更多的测试功能,看起来很受欢迎。

你可以在github上使用 angular-cli-ghpages

请查看链接,以了解如何使用此cli进行部署。

部署的网站通常会存储在github的某个分支中

gh-pages

使用可以克隆git分支和使用它像静态网站在您的服务器