国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Angular系列之AoT編譯

Object / 2560人閱讀

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

概覽

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

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

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

AOT vs JIT

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

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

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

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

JiT編譯模式的流程

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

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

使用tsc來(lái)編譯這個(gè)應(yīng)用的ts代碼

打包

壓縮

部署

一旦把a(bǔ)pp部署好了，并且用戶在瀏覽器中打開(kāi)了這個(gè)app，下面這些事情會(huì)逐一進(jìn)行：

瀏覽器下載js代碼

Angular啟動(dòng)

Angular在瀏覽器中開(kāi)始JiT編譯的過(guò)程，例如生成app中各個(gè)組件的js代碼

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

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

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

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

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

TypesScript代碼編譯為JavaScript代碼

打包

壓縮

部署

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

下載所有代碼

Angular啟動(dòng)

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

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

編譯過(guò)程發(fā)生的時(shí)機(jī)

JiT生成的是JS代碼，而AoT生成的是TS代碼。這主要是因?yàn)?b>JiT是在瀏覽器中進(jìn)行的，它完全沒(méi)必要生成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編譯器來(lái)代替TypeScript編譯器（tsc）。

配置tsconfig-aot.json 文件 
只需將tsconfig.json 文件復(fù)制過(guò)來(lái)進(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部分只修改了一個(gè)屬性：**把module設(shè)置為es2015(為后面搖樹(shù)優(yōu)化做準(zhǔn)備)

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

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

啟動(dòng)AOT編譯： 
node_modules/.bin/ngc -p tsconfig-aot.json

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

改變引導(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);
搖樹(shù)優(yōu)化（Tree shaking）

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/85033.html

相關(guān)文章

  • 前端每周清單半年盤點(diǎn)之 Angular 篇

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

    LeviDing 評(píng)論0 收藏0

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

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

    lcodecorex 評(píng)論0 收藏0

  • Angular 5.0 來(lái)了! 有這些大變化

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

    張紅新 評(píng)論0 收藏0

  • Angular 5.0 來(lái)了! 有這些大變化

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

    DobbyKim 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Object

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<