如何捆绑Angular应用进行生产

您可以github使用 angular-cli-ghpages部署您的angular应用程序

请查看链接以找到如何使用此cli进行部署。

已部署的网站将被存储在某个分支的github典型

gh页

use可以克隆git分支，并像在服务器中使用静态网站一样使用它

直到今天，我仍然发现《提前编译》食谱是生产捆绑的最佳方法。您可以在这里找到它：https : //angular.io/docs/ts/latest/cookbook/aot-compiler.html

到目前为止，我对Angular 2的经验是AoT创建了最小的构建，几乎没有加载时间。最重要的是这里的问题-您只需要将几个文件发送到生产环境即可。

这似乎是因为Angular编译器不会随生产版本一起提供，因为模板是“提前”编译的。看到HTML模板标记转换为javascript指令（将其反向工程为原始HTML十分困难）也很酷。

我制作了一个简单的视频，演示了在开发vs AoT构建中Angular 2应用程序的下载大小，文件数等-您可以在此处查看：

https://youtu.be/ZoZDCgQwnmQ

您可以在此处找到视频中使用的源代码：

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

带有Webpack的Angular 2（无CLI设置）

1- Angular2团队的教程

Angular2团队发布了有关使用Webpack 的教程

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

说明：

• npm安装

• npm开始。为了发展。这将创建一个虚拟的“ dist”文件夹，该文件夹将实时重载到您的本地主机地址。

• npm运行构建。用于生产。“这将创建一个物理的“ dist”文件夹版本，而不是发送到Web服务器。dist文件夹为7.8MB，但实际上仅需要234KB才能在Web浏览器中加载页面。
  
  

2-Webkit入门套件

该Webpack入门工具包提供了比上述教程更多的测试功能，并且似乎很受欢迎。

使用SystemJs builder和gulp进行Angular 2生产工作流程

Angular.io有快速入门教程。我复制了本教程，并扩展了一些简单的gulp任务，以将所有内容捆绑到dist文件夹，该文件夹可以复制到服务器并像这样工作。我试图优化所有内容以使其在Jenkis CI上正常运行，因此可以缓存node_modules，而无需复制它们。

Github上带有示例应用程序的源代码：https : //github.com/Anjmao/angular2-production-workflow

生产步骤

1. 清理 TypeScript编译的js文件和dist文件夹
2. 编译应用文件夹中的 TypeScript文件
3. 使用SystemJs捆绑程序将所有内容捆绑到具有生成的哈希值的dist文件夹中，以刷新浏览器缓存
4. 使用gulp-html-replace用捆绑的版本替换index.html脚本并复制到dist文件夹
5. 将资产文件夹中的所有内容复制到dist文件夹

Node：虽然您总是可以创建自己的构建过程，但是我强烈建议使用angular-cli，因为它具有所有必需的工作流程，并且现在可以完美运行。我们已经在生产中使用它，而angular-cli完全没有任何问题。

2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x （TypeScript）与Angular CLI

一次性设置

• npm install -g @angular/cli
• ng new projectFolder 创建一个新的应用程序

捆绑步骤

• ng build --prod（当目录为时，在命令行中运行projectFolder）

  prod用于生产的标志包（有关生产标志的选项列表，请参见Angular文档）。

• 使用Brotli进行压缩使用以下命令压缩资源

  for i in dist/*; do brotli $i; done

捆绑包默认情况下生成为projectFolder / dist（/ $ projectFolder for 6）

输出量

9.0.0带有CLI的Angular大小9.0.1和不带Angular路由的选件CSS

• dist/main-[es-version].[hash].js您的应用程序捆绑了[ES5大小：158 KB，用于新的Angular CLI应用程序为空，压缩40 KB ]。
• dist/polyfill-[es-version].[hash].bundle.js捆绑的polyfill依赖项（@angular，RxJS ...）[ES5大小：127 KB，用于新的Angular CLI应用程序为空，压缩37 KB ]。
• dist/index.html 您的应用程序的入口点。
• dist/runtime-[es-version].[hash].bundle.js Webpack加载器
• dist/style.[hash].bundle.css 样式定义
• dist/assets 从Angular CLI资产配置复制的资源

部署方式

You can get a preview of your application using the ng serve --prod command that starts a local HTTP server such that the application with production files is accessible using http://localhost:4200.

For a production usage, you have to deploy all the files from the dist folder in the HTTP server of your choice.