成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Angular系列之AoT編譯

Object / 2569人閱讀

摘要：編譯在運行時才揭露它們，那樣有點太晚了。這是減少應(yīng)用程序占用空間的最有效的技術(shù)之一。這將在未來得到改變。當(dāng)前的最佳實踐是在開發(fā)器使用編譯，然后在發(fā)布產(chǎn)品前切換到編譯

概覽

眾所周知, angular應(yīng)用在可執(zhí)行之前, angular應(yīng)用中的組件和模板必須被轉(zhuǎn)化為可以被瀏覽器識別的javascript代碼, 而這種轉(zhuǎn)化正是通過angualr自身的編譯器所執(zhí)行的.

angular提供了兩種編譯方式, 即AOT(預(yù)編譯)和JIT(即使編譯), 其中JIT為默認(rèn)的編譯方式

AOT即 Ahead of time, 是指在構(gòu)建時進(jìn)行編譯, 即在服務(wù)端即完成了編譯
JIt即 Just-in-Time, 在運行期間編譯該應(yīng)用，也就是在應(yīng)用加載時。

AOT vs JIT

實際上只有一個編譯器,兩者的區(qū)別只是編譯的時機和工具不同

JIT編譯導(dǎo)致運行期間的性能損耗。 由于需要在瀏覽器中執(zhí)行這個編譯過程，視圖需要花更長時間才能渲染出來。 由于應(yīng)用包含了Angular編譯器以及大量實際上并不需要的庫代碼，所以文件體積也會更大。 更大的應(yīng)用需要更長的時間進(jìn)行傳輸，加載也更慢。

編譯可以發(fā)現(xiàn)一些組件模板綁定錯誤。JIT編譯在運行時才揭露它們，那樣有點太晚了。

而預(yù)編譯（AOT）會在構(gòu)建時編譯，這樣可以在早期截獲模板錯誤，提高應(yīng)用性能。

JiT編譯模式的流程

一個典型的jiT應(yīng)用的開發(fā)流程大概是：

使用TypeScript開發(fā)Angular應(yīng)用

使用tsc來編譯這個應(yīng)用的ts代碼

打包

壓縮

部署

一旦把app部署好了，并且用戶在瀏覽器中打開了這個app，下面這些事情會逐一進(jìn)行：

瀏覽器下載js代碼

Angular啟動

Angular在瀏覽器中開始JiT編譯的過程，例如生成app中各個組件的js代碼

應(yīng)用頁面得以渲染

相對的，使用AoT模式的應(yīng)用的開發(fā)流程是：

使用TypeScript開發(fā)Angular應(yīng)用

使用ngc來編譯應(yīng)用

使用Angular編譯器對模板進(jìn)行編譯，生成TypeScript代碼

TypesScript代碼編譯為JavaScript代碼

打包

壓縮

部署

雖然前面的過程稍稍復(fù)雜，但是用戶這一側(cè)的事情就變簡單了：

下載所有代碼

Angular啟動

應(yīng)用頁面得以渲染

概括起來，Angular中的Jit和AoT的主要區(qū)別是：

編譯過程發(fā)生的時機

JiT生成的是JS代碼，而AoT生成的是TS代碼。這主要是因為JiT是在瀏覽器中進(jìn)行的，它完全沒必要生成TS代碼，而是直接生產(chǎn)了JS代碼。

深入AOT編譯 AOT編譯的配置 安裝npm依賴 
npm install @angular/compiler-cli @angular/platform-server --save

把下列npm便利腳本添加到package.json中，以便用一條命令就可以完成編譯

"build:aot": "ngc -p tsconfig-aot.json

用@angular/compiler-cli包中提供的ngc編譯器來代替TypeScript編譯器（tsc）。

配置tsconfig-aot.json 文件 
只需將tsconfig.json 文件復(fù)制過來進(jìn)行修改即可
{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "./node_modules/@types/"
    ]
  },

  "files": [
    "src/app/app.module.ts",
    "src/main.ts"
  ],

  "angularCompilerOptions": {
   "genDir": "aot",
   "skipMetadataEmit" : true
 }
}

compilerOptions部分只修改了一個屬性：**把module設(shè)置為es2015(為后面搖樹優(yōu)化做準(zhǔn)備)

ngc區(qū)真正新增的內(nèi)容是底部的angularCompilerOptions。 它的genDir屬性告訴編譯器把編譯結(jié)果保存在新的aot目錄下

"skipMetadataEmit" : true屬性阻止編譯器為編譯后的應(yīng)用生成元數(shù)據(jù)文件。 當(dāng)輸出成TypeScript文件時，元數(shù)據(jù)并不是必須的，因此不需要包含它們。

啟動AOT編譯： 
node_modules/.bin/ngc -p tsconfig-aot.json

編譯完成后生成了一堆NgFactory文件,不要編輯這些NgFactory！重新編譯時會替換這些文件.

改變引導(dǎo)方式main.ts 文件

從platformBrowserDynamic.bootstrap改成使用platformBrowser().bootstrapModuleFactory并把AppModuleNgFactory的AOT編譯結(jié)果傳給它。

import { platformBrowser }    from "@angular/platform-browser";
import { AppModuleNgFactory } from "../aot/src/app/app.module.ngfactory";

console.log("Running AOT compiled");
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
搖樹優(yōu)化（Tree shaking）

搖樹優(yōu)化是指通過跟蹤import和export語句來對應(yīng)用進(jìn)行靜態(tài)分析,遍歷依賴圖譜,并且搖掉用不到的代碼,通過移除源碼和庫代碼中用不到的部分，搖樹優(yōu)化可以大幅縮減應(yīng)用的下載體積

搖樹優(yōu)化能夠在我們最終的Bundle中移除掉我們應(yīng)用中沒有使用到的代碼。這是減少應(yīng)用程序占用空間的最有效的技術(shù)之一。

目前webpack2已經(jīng)支持tree shaking, 官網(wǎng)介紹的是Rollup在angular中的使用

知乎上關(guān)于tree shaking的介紹

開發(fā)器使用JIT, 產(chǎn)品期使用AOT

目前，AOT編譯和搖樹優(yōu)化對開發(fā)來說，占用的時間太多了。這將在未來得到改變。 當(dāng)前的最佳實踐是在開發(fā)器使用JIT編譯，然后在發(fā)布產(chǎn)品前切換到AOT編譯

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85033.html

相關(guān)文章

  • 前端每周清單半年盤點之 Angular 篇

    摘要：延伸閱讀學(xué)習(xí)與實踐資料索引與前端工程化實踐前端每周清單半年盤點之篇前端每周清單半年盤點之與篇前端每周清單半年盤點之篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于半年來發(fā)布的前端每周清單...

    LeviDing 評論0 收藏0

  • [譯] 關(guān)于 Angular 動態(tài)組件你需要知道的

    摘要：第一種方式是使用模塊加載器，如果你使用加載器的話，路由在加載子路由模塊時也是用的作為模塊加載器。還需注意的是，想要使用還需像這樣去注冊它你當(dāng)然可以在里使用任何標(biāo)識，不過路由模塊使用標(biāo)識，所以最好也使用相同。 原文鏈接：Here is what you need to know about dynamic components in?Angular showImg(https://se...

    lcodecorex 評論0 收藏0

  • Angular 5.0 來了! 有這些大變化

    摘要：以下簡單介紹的重大變化。狀態(tài)轉(zhuǎn)交及對的支持這樣更便于在服務(wù)端和客戶之間共享應(yīng)用狀態(tài)。狀態(tài)轉(zhuǎn)交的相關(guān)文檔幾周后會發(fā)布。我們刪除很多以前廢棄的如，也公布了一些新的廢棄項。以上指南會詳細(xì)介紹這些變更。已知問題當(dāng)前已知與相關(guān)的問題。 我們很高興地宣布Angular 5.0.0——五角形甜甜圈發(fā)布啦！這又是一個主版本，包含新功能并修復(fù)了很多bug。它再次體現(xiàn)了我們把Angular做得更小、更快、...

    張紅新 評論0 收藏0

  • Angular 5.0 來了! 有這些大變化

    摘要：以下簡單介紹的重大變化。狀態(tài)轉(zhuǎn)交及對的支持這樣更便于在服務(wù)端和客戶之間共享應(yīng)用狀態(tài)。狀態(tài)轉(zhuǎn)交的相關(guān)文檔幾周后會發(fā)布。我們刪除很多以前廢棄的如，也公布了一些新的廢棄項。以上指南會詳細(xì)介紹這些變更。已知問題當(dāng)前已知與相關(guān)的問題。 我們很高興地宣布Angular 5.0.0——五角形甜甜圈發(fā)布啦！這又是一個主版本，包含新功能并修復(fù)了很多bug。它再次體現(xiàn)了我們把Angular做得更小、更快、...

    DobbyKim 評論0 收藏0

發(fā)表評論

0條評論

Object

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<