“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 演示页面

试用 Angular v6 的 Ivy compiler的更多相关文章

  1. Angular v6 正式发布

    Angular 6 正式发布 Angular 6 已经正式发布了!这个主要版本并不关注于底层的框架,更多地关注于工具链,以及使 Angular 在未来更容易快速推进. 作为发布的一部分,我们同步了主要 ...

  2. 在 Angular 8 中,我们可以期待些什么

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 本文由葡萄城翻译并发布 --- Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前端开发者 ...

  3. [转]Angular: Hide Navbar Menu from Login page

    本文转自:https://loiane.com/2017/08/angular-hide-navbar-login-page/ In this article we will learn two ap ...

  4. [转]How to Add Bootstrap to an Angular CLI project

    本文转自:https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/ In this article we w ...

  5. [转]Using Angular in Visual Studio Code

    本文转自:https://code.visualstudio.com/docs/nodejs/angular-tutorial Using Angular in Visual Studio Code ...

  6. [Angular] Angular Elements Intro

    Make sure install the latest Angular v6 with Angular CLI. Checkout ght Github for the code. 1. Creat ...

  7. 用angular做的模糊搜索

    今天大家来试一试用angular做一下简单的搜索功能吧: 首先我们需要写html的部分,我们需要设置几个条件,比如按什么来排序,按升序还是降序搜索,和一个文本框来设置模糊搜索: <nav> ...

  8. Angular6.0发布

    Angular v6 新版本重点关注工具链以及工具链在 Angular 中的运行速度问题. Angular v6 是统一整体框架.Material 和 CLI 三大 Angular 组件的第一个版本, ...

  9. AngularJS+requireJS项目的目录结构设想

    AngularJS+requireJS项目的目录结构设想 准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default    放页面,不过 ...

随机推荐

  1. UVA 11624 BFS的妙用

    题意: 迷宫里起火了,有若干个障碍物,有多个起火点,起火点每经过一个时间间隔就向它的上下左右相邻的格子扩散. 有个倒霉的人好像叫做“Joe”,他要逃出来,他每次可以向上下左右任意移动一格,但是即要避开 ...

  2. 高性能网站架构设计之缓存篇(6)- Redis 集群(中)

    昨天晚上钓鱼回来,大发神经,写了篇概括程序员生活现状的文章,没想到招来众多人的口诛笔伐,大有上升到政治层面的趋势. 我也许不会再发表任何冲击心灵的文章,我希望给大家带来更多的正能量,所以那篇文章已被我 ...

  3. 蓝牙的AVCTP协议笔记

    1.概述     AVCTP协议描述了蓝牙设备间Audio/Video的控制信号交换的格式和机制,它是一个总体的协议,具体的控制信息由其指定的协议(如AVRCP)实现,AVCTP本身只指定控制comm ...

  4. SCJP_104——题目分析(4)

    14. which three are valid declaraction of a float? ADFA. float foo=-1; B. float foo=1.0; C. float fo ...

  5. python学习资料

    http://woodpecker.org.cn/diveintopython/ http://www.cnblogs.com/txw1958/archive/2012/12/10/A_Byte_of ...

  6. IOS程序启动的过程

    IOS程序启动按照以下5个步骤执行 1.main函数 IOS程序启动首先执行main函数 2.UIApplicationMain 执行main函数中的UIApplicationMain函数,这个函数会 ...

  7. erlang进程与操作系统线程

    erlang多进程与多线程: 在erlang开发中,我们面对的最小执行单位是进程,当然这个进程并不是系统层面上的进程,也不是线程.而是基于erlang运行时系统的一个进程.那么erlang的多进程是如 ...

  8. 精通CSS+DIV网页样式与布局--CSS文字效果

    上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...

  9. 让vim不要自动添加新的注释行

    vim里面有一个特性,如果你在一行注释后新加一行,vim会自动在下一行的开始位置添加注释符号.例如对于C/C++来说   //This is a comment line //             ...

  10. Multiple SSH keys for different accounts on Github or Gitlab

    [inside this square brackets give a name to the followed acc.] name = github_username email = github ...