如何为生产环境打包Angular应用程序

44 浏览
0 Comments

如何为生产环境打包Angular应用程序

什么是最好的方式将Angular（版本2、4、6等）绑定到生产环境的Web服务器上。\n请在答案中包含Angular版本，以便我们更好地跟踪它何时移动到较新的版本。

0

2 答案

0 Comments

2.0.1 Final 使用Gulp（TypeScript - 目标：ES5）

一次性设置

  • npm install（在项目文件夹中运行cmd）

绑定步骤

  • npm run bundle（在项目文件夹中运行cmd）

    绑定生成在projectFolder / bundles /中

输出

  • bundles/dependencies.bundle.js [ 大小：~1 MB（尽可能小）]
    • 包含rxjs和angular依赖项，而不是整个框架
  • bundles/app.bundle.js [ 大小：取决于您的项目，我的是~ 0.5 MB ]
    • 包含您的项目

文件结构

  • projectFolder / app /（所有组件，指令，模板等）
  • projectFolder / gulpfile.js

var gulp = require('gulp'),
  tsc = require('gulp-typescript'),
  Builder = require('systemjs-builder'),
  inlineNg2Template = require('gulp-inline-ng2-template');
gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});
gulp.task('inline-templates', function () {
  return gulp.src('app/**/*.ts')
    .pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true}))
    .pipe(tsc({
      "target": "ES5",
      "module": "system",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": true,
      "noImplicitAny": false
    }))
    .pipe(gulp.dest('dist/app'));
});
gulp.task('bundle-app', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');
  return builder
    .bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});
gulp.task('bundle-dependencies', ['inline-templates'], function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'dist-systemjs.config.js');
  return builder
    .bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

  • projectFolder / package.json（与快速入门指南相同，只显示了打包所需的devDependencies和npm脚本）

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    ***
     "gulp": "gulp",
     "rimraf": "rimraf",
     "bundle": "gulp bundle",
     "postbundle": "rimraf dist"
  },
  "license": "ISC",
  "dependencies": {
    ***
  },
  "devDependencies": {
    "rimraf": "^2.5.2",
    "gulp": "^3.9.1",
    "gulp-typescript": "2.13.6",
    "gulp-inline-ng2-template": "2.0.1",
    "systemjs-builder": "^0.15.16"
  }
}

  • projectFolder / systemjs.config.js（与快速入门指南相同，在那里不再可用）

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app',
    'rxjs':                       'node_modules/rxjs',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    '@angular':                   'node_modules/@angular'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'app/boot.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };
  var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
  ];
  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  };
  // filterSystemConfig - index.asp's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }
  System.config(config);
})(this);

  • projetcFolder / dist-systemjs.config.js（仅显示与systemjs.config.json的区别）

var map = {
    'app':                        'dist/app',
  };

  • projectFolder / index.html (production) - 脚本标签的顺序非常关键。将dist-systemjs.config.js标签放在捆绑标签之后仍会使程序运行，但依赖包将被忽略，并且依赖项将从node_modules文件夹中加载。




  
  
  
  Angular
  



  loading...

  • projectFolder / app / boot.ts 是引导程序所在的地方。

这是我能做到的最好的了:)

0
0 Comments

2到15（TypeScript）和Angular CLI

一次性设置

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

打包步骤

  • ng build（在目录为projectFolder的情况下在命令行中运行）。

    flag prod默认情况下为生产进行捆绑（如果需要，请参见Angular文档进行自定义）。

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

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

默认情况下生成的软件包为projectFolder/dist(/$projectFolder v6 +)**

输出

使用Angular 14.0.2和CLI 14.0.2以及不带Angular路由的CSS选项的大小

  • dist/main.[hash].js 您的应用程序捆绑[大小：对于新的Angular CLI应用程序，空白为117 KB，35 KB已压缩]。
  • dist/polyfill-[es-version].[hash].bundle.js polyfill依赖项（@angular，RxJS...）已捆绑[大小：对于新的Angular CLI应用程序，空白为33 KB，11 KB已压缩]。
  • dist/index.html 应用程序的入口点。
  • dist/runtime.[hash].bundle.js webpack loader
  • dist/style.[hash].bundle.css 样式定义
  • dist/assets 从Angular CLI资产配置中复制的资源

部署

您可以使用ng serve --prod命令获取应用程序的预览，该命令启动本地HTTP服务器，使得可以使用http://localhost:4200访问使用生产文件的应用程序。 如果用于生产使用，这不安全。

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

0