angular - 如何为生产捆绑 Angular 应用程序

Question

捆绑 Angular(版本 2、4、6 等)以在实时网络服务器上生产的最佳方法是什么。

请在答案中包含 Angular 版本，以便我们可以在它移至更高版本时更好地跟踪。

Answer 1

2 到 14 (TypeScript) 与 Angular CLI

一次性设置

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

捆绑步骤

• ng build(当目录为 projectFolder 时在命令行中运行)。

  flag prod 生产包现在是默认设置(如果需要，请参阅 Angular documentation 自定义它)。

• 使用 Brotli compression 压缩使用以下命令的资源

  for i in dist/*/*;做 brotli $i;完成

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

输出

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

• dist/main.[hash].js 您的应用程序捆绑 [大小:118 KB 用于新的 Angular CLI 应用程序为空，36 KB 压缩]。
• dist/polyfill-[es-version].[hash].bundle.js 绑定(bind)的 polyfill 依赖项(@angular、RxJS...)[ 大小:34 KB 用于新的 Angular CLI 应用程序空，11 KB 压缩]。
• dist/index.html 您的应用程序的入口点。
• dist/runtime.[hash].bundle.js webpack 加载器
• dist/style.[hash].bundle.css 样式定义
• dist/assets 从 Angular CLI Assets 配置复制的资源

部署

您可以使用启动本地 HTTP 服务器的 ng serve --prod 命令获取应用程序的预览，以便可以使用 http 访问包含生产文件的应用程序//本地主机:4200。 将其用于生产用途是不安全的。

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