試用 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.8 Node: 8.9.3 OS: win32 x64 Angular: 6.0.0-beta.3 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router @angular/cli: 1.6.8 @angular-devkit/build-optimizer: 0.0.42 @angular-devkit/core: 0.0.29 @angular-devkit/schematics: 0.0.52 @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.9.8 @schematics/angular: 0.1.17 typescript: 2.5.3 webpack: 3.10.0

  

啓用 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 演示頁面