“最佳”取决于场景。有时你只关心最小的单个包，但在大型应用程序中，你可能不得不考虑延迟加载。在某种程度上，将整个应用程序作为一个单一的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

2到14 (TypeScript)使用Angular CLI

前设置

NPM install -g @angular/cli 创建一个新的应用程序

捆绑销售的步骤

ng build(当目录为projectFolder时在命令行中运行)。 flag prod bundle for production现在是默认的(如果需要，请参阅Angular文档自定义它)。 使用Brotli压缩使用以下命令压缩资源 对于dist/*/*中的I;Do brotli $i;完成

包默认生成到projectFolder/dist(/$projectFolder for v6+)**

输出

Angular 14.0.2的大小和CLI 14.0.2的选项CSS没有Angular路由

dist/main.[hash].js Your application bundled [ size: 118 KB for new Angular CLI application empty, 36 KB compressed]. dist/polyfill-[es-version].[hash].bundle.js the polyfill dependencies (@angular, RxJS...) bundled [ size: 34 KB for new Angular CLI application empty, 11 KB compressed]. dist/index.html entry point of your application. dist/runtime.[hash].bundle.js webpack loader dist/style.[hash].bundle.css the style definitions dist/assets resources copied from the Angular CLI assets configuration

部署

可以使用ng serve——prod命令预览应用程序，该命令启动本地HTTP服务器，这样就可以使用http://localhost:4200访问带有生产文件的应用程序。这在生产中使用并不安全。

对于生产应用，必须从所选择的HTTP服务器中的dist文件夹中部署所有文件。

请在当前项目目录下尝试以下CLI命令。它将创建dist文件夹bundle。因此，您可以上传dist文件夹中的所有文件进行部署。

Ng build——prod——aot——base-href。

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

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

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

gh-pages

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