试用 Angular v6 的 Ivy compiler

“Ivy” 是 Angular v6 的新一代渲染器。从 v6.0.0-beta.1 开始，Ivy 已经作为体验 API 发布。

作为下一代的 Angular 的视图引擎，重点在于彻底缩减代码尺寸并增强灵活性。在这个示例中，你可以看到，对于一个 Hello, world 应用，代码的尺寸可以缩减到 3K 左右。

创建项目

使用 ng new --minimal 创建一个最小化项目。

ng new ngv6-ivy --minimal

更新 Angular 到 v6

将所有的 Angular 包更新到 v6. 当前的 package.json 内容。 当前版本是 v6.0.0 beta.3.

{
  "name": "ngv6-ivy",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.0.0-beta.3",
    "@angular/common": "6.0.0-beta.3",
    "@angular/compiler": "6.0.0-beta.3",
    "@angular/core": "6.0.0-beta.3",
    "@angular/forms": "6.0.0-beta.3",
    "@angular/http": "6.0.0-beta.3",
    "@angular/platform-browser": "6.0.0-beta.3",
    "@angular/platform-browser-dynamic": "6.0.0-beta.3",
    "@angular/router": "6.0.0-beta.3",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.8",
    "@angular/compiler-cli": "6.0.0-beta.3",
    "@angular/language-service": "6.0.0-beta.3",
    "typescript": "~2.5.3"
  }
}

使用 ng version 检查当前项目

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.
Node: 8.9.
OS: win32 x64
Angular: 6.0.-beta.
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.
@angular-devkit/build-optimizer: 0.0.
@angular-devkit/core: 0.0.
@angular-devkit/schematics: 0.0.
@ngtools/json-schema: 1.1.
@ngtools/webpack: 1.9.
@schematics/angular: 0.1.
typescript: 2.5.
webpack: 3.10.

启用 Ivy

1. 在 src/tsconfig.app.json 中添加 enableIvy , See Angular ChangeLog

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

2. 从 AppModule 中删除 BrowserModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 简化 AppComponent

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: 'Hello {{greeting}}!',
})
export class AppComponent {
  greeting = 'World';
}

4. 添加 ngc 命令到 package.json

{
  "name": "ngv6-ivy",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "ngc": "ngc -p src/tsconfig.app.json"
  }

5. 在 src/tsconfig.json 中将 target 设置为 es2016：

"target": "es2016",

运行 ngc

npm run ngc -p src/tsconfig.app.json

查看输出结果

输出结果在 tsc-out 目录中。

检查 Ivy: ngComponentDef

打开 tsc-out/app/src/app/app.component.js

import { Component } from '@angular/core';
import * as i0 from '@angular/core';
export class AppComponent {
  constructor() {
    this.greeting = 'World';
  }
}
AppComponent.decorators = [
  {
    type: Component,
    args: [
      {
        selector: 'app-root',
        template: 'Hello {{greeting}}!'
      }
    ]
  }
];
/** @nocollapse */
AppComponent.ctorParameters = () => [];
AppComponent.ngComponentDef = i0.ɵdefineComponent({
  tag: 'app-root',
  factory: function AppComponent_Factory() {
    return new AppComponent();
  },
  template: function AppComponent_Template(ctx, cm) {
    if (cm) {
      i0.ɵT(0);
    }
    i0.ɵt(0, i0.ɵb1('Hello ', ctx.greeting, '!'));
  }
});
//# sourceMappingURL=app.component.js.map

注意 AppComponent.ngComponentDef，它使用 Ivy API 定义。

template 函数是从组件的 HTML 模板生成。

当 Ivy 稳定之后，我们将可以在组件中编写这些定义。然后，当前的 HTML 模板将会是可选的。我们可以选择无装饰的组件，它使用纯的 JavaScript 编写。

你可以在 GitHub 下载到完整的项目内容：https://github.com/lacolaco/ngv6-ivy

相关资料

Angular Ivy code size

Ivy 演示页面