Angular 8 第一個 RC 版本已發佈，帶來了兩個備受期待的特性：可選的 Ivy 編譯器預覽和 import() 想式加載語法。

Ivy 是什麼

Ivy 是 Angular 的下一代渲染引擎。它重寫了編譯器和運行時，目標是：

• 更小的包體積：tree-shaking 友好，只打包實際使用的框架功能
• 更快的重新構建：增量編譯，修改一個文件不需重新編譯全項目
• 更好的調試體驗：渲染器代碼可讀性更強
• 未來支撐：Server-Side Rendering、Higher-order components 等高級功能

開啓 Ivy 預覽

// tsconfig.app.json
{
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

注意：Angular 8 中 Ivy 僅是 opt-in 預覽，不推薦生產測試。完全默認開啓要等 Angular 9。

想性加載語法變化

這是 Angular 8 非常實用的變化。之前用字符串加載模塊路徑沒有類型檢查，現在用原生 ES import() 語法，編譯器可以檢查路徑正確性：

// Angular 7 及之前：字符串路徑
const routes: Routes = [
  {
    path: "users",
    loadChildren: "./users/users.module#UsersModule", // 舊語法
  },
];

// Angular 8+：動態 import()
const routes: Routes = [
  {
    path: "users",
    loadChildren: () =>
      import("./users/users.module").then((m) => m.UsersModule),
  },
];

新語法的優勢：

1. IDE 跟蹤路徑，重命名自動更新
2. TypeScript 編譯時檢查路徑是否存在
3. 更建議人讀——清楚地看到對應關係

Web Worker 支持

Angular 8 CLI 支持一鍵生成 Web Worker：

ng generate web-worker app

// src/app/app.worker.ts
onmessage = ({ data }) => {
  const result = heavyComputation(data);
  postMessage(result);
};

// 在組件中使用
if (typeof Worker !== "undefined") {
  const worker = new Worker("./app.worker", { type: "module" });
  worker.postMessage({ input: largeData });
  worker.onmessage = ({ data }) => {
    this.result = data;
  };
}

Differential Loading（差異化加載）

Angular 8 默認開啓：現代瀏覽器加載 ES2015+ 包，老瀏覽器加載 ES5 包。

<!-- 構建後自動生成 -->
<script type="module" src="main-es2015.js"></script>
<!-- 現代瀏覽器 -->
<script nomodule src="main-es5.js"></script>
<!-- 老瀏覽器備用 -->

現代瀏覽器用户可獲得 20-30% 體積減少（無需 polyfill 和 ES5 transpile 開銷）。

總結

Angular 8 最值得升級的地方是惰性加載語法和差異化加載，這兩個功能小成本大收益。Ivy 預覽即便不上生產，也很值得在開發環境嚐鮮。