把Angular(版本2、版本4、版本6……)捆绑到一个活跃的web服务器上进行生产的最佳方法是什么?
请在回答中包含Angular版本,以便我们在它转移到后续版本时更好地跟踪。
把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分支和使用它像静态网站在您的服务器