如何捆绑一个用于生产的 Angular 应用程序 [英] How to bundle an Angular app for production

问题描述

在实时 Web 服务器上捆绑 Angular(版本 2、4、6...)以进行生产的最佳方法是什么.

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

解决方案

2 to 11 (TypeScript) with Angular CLI

一次性设置

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

捆绑步骤

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

  标记用于生产的 prod 包(参见 用于生产标志中包含的选项列表的 Angular 文档).

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

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

捆绑包默认生成为 projectFolder/dist(/$projectFolder for v6+)**

输出

大小与 Angular 11.2.12 与 CLI 11.2.12 和选项 CSS 没有 Angular 路由

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

部署

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

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

What is the best method to bundle Angular (version 2, 4, 6, ...) for production on a live web server.

Please include the Angular version within answers so we can track better when it moves to later releases.

解决方案

2 to 11 (TypeScript) with Angular CLI

OneTime Setup

• npm install -g @angular/cli
• ng new projectFolder creates a new application

Bundling Step

• ng build --prod (run in command line when directory is projectFolder)

  flag prod bundle for production (see the Angular documentation for the list of option included with the production flag).

• Compress using Brotli compression the resources using the following command

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

bundles are generated by default to projectFolder/dist(/$projectFolder for v6+)**

Output

Sizes with Angular 11.2.12 with CLI 11.2.12and option CSS without Angular routing

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

Deployment

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. This is not safe to use for production usage.

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

这篇关于如何捆绑一个用于生产的 Angular 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！