如何捆绑Angular应用进行生产 [英] How to bundle an Angular app for production

问题描述

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

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

请在答案中包含Angular版本，以便在移至更高版本时可以更好地进行跟踪.

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

推荐答案

2, 4, 5, 6, 7, 8, 9, 10(TypeScript)与Angular CLI

OneTime设置

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

2, 4, 5, 6, 7, 8, 9, 10 (TypeScript) with Angular CLI

OneTime Setup

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

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

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

标志prod捆绑包用于生产(请参见 Angular文档查看生产标记中包含的选项列表.

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

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

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

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

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

具有Angular 10.0.2 且具有CLI 10.0.1和不具有Angular路由的选项CSS的尺寸

Sizes with Angular 10.0.2 with CLI 10.0.1and option CSS without Angular routing

• dist/main-[es-version].[hash].js您的应用程序捆绑了[ES5大小:136 KB，用于新的Angular CLI应用程序为空， 38 KB 压缩].
• dist/polyfill-[es-version].[hash].bundle.js绑定的polyfill依赖项(@angular，RxJS ...)[ES5大小:37 KB，用于新的Angular CLI应用程序为空， 11 KB 压缩].
您的应用程序的
• dist/index.html入口点.
• dist/runtime-[es-version].[hash].bundle.js Webpack加载器
• dist/style.[hash].bundle.css样式定义
从Angular CLI资产配置复制的
• dist/assets资源
• dist/main-[es-version].[hash].js Your application bundled [ ES5 size: 136 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: 37 KB for new Angular CLI application empty, 11 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

您可以使用ng serve --prod命令来启动应用程序的预览，该命令启动本地HTTP服务器，以便可以使用http://localhost:4200访问带有生产文件的应用程序.

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.

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

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

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