[技術支援-5] 佈署方式JIT及AOT介紹 - iT 邦幫忙

AOT(Ahead-of-Time)：在程式發佈之前就透過Angular Compiler 進行編譯，所以瀏覽器下載完的 *.js 檔案，就可以直接被執行，然後渲染畫面。

下表為這兩種佈署方式的簡單 ... 2018iT邦幫忙鐵人賽 DAY 27 4 ModernWeb 用30天深入Angular5的世界系列第 27篇 [技術支援-5]佈署方式JIT及AOT介紹 2018鐵人賽 angular typescript ClaireChang 團隊XY-動手不動口 2018-01-1500:04:579612瀏覽 Ahead-of-Time(AOT)編譯 在Angular中有兩種編譯模式： JIT(Just-in-Time)：Angular預設是使用Just-in-Time(JIT)即時編譯，等瀏覽器下載完*.js檔案後，會在用戶端的瀏覽器編譯Angular的JS程式碼，接著才會渲染畫面。

AOT(Ahead-of-Time)：在程式發佈之前就透過AngularCompiler進行編譯，所以瀏覽器下載完的*.js檔案，就可以直接被執行，然後渲染畫面。

下表為這兩種佈署方式的簡單比較表： Characteristic JiT AoT Compilationtarget Browser Server Compilationcontext Runtime Build Bundlesize Huge(~1.2MB) Smaller(~400KB) ExecutionPerformance - Better Startuptime - Shorter AoT的要點是將編譯從運行時移動到構建過程。

因此我們不需要讓用戶載入完整的編譯器功能，也不需要在用戶端才去做編譯的動作，所以從對照表可以看出，這個動作可以讓效能以及檔案大小都變得更好。

另外，預先編譯可以在編譯期就發現一些模版的錯誤，而不需要等到實際在客戶端執行才發現。

使用AOT，編譯器僅僅使用一組庫在構建期間運行一次；使用JIT，編譯器在每個用戶的每次運行期間都要用不同的庫運行一次。

AOT編譯的優點 更快:瀏覽器直接載入可運行的程式碼，可以立即使用，而不用等待編譯完成。

減少HTTP異部請求：編譯器把外部HTML模板和CSS樣式表內聯到了該應用的JavaScript中。

消除了用來下載那些源文件的Ajax請求。

檔案更小：客戶端不用載入完整的Angular編譯器 提早檢測模板錯誤：編譯時會跳出模板綁定錯誤警告，提早發現錯誤 更安全：AOT編譯遠在HTML模版和組件被服務到客戶端之前，將它們編譯到JavaScript文件。

沒有模版可以閱讀，沒有高風險客戶端HTML或JavaScript可利用，所以注入攻擊的機會較少。

使用AOT編譯 Angular5大大的簡化了AOT流程，我們只需在生成文件時加上--aot ngbuild--aot ngserve--aot 如果我們使用--prod預設也會是aot輸出。

用AOT編譯的程式編寫限制 如果使用AOT預編譯，在撰寫angular的metadata要注意下面幾點： 不支援functionexpression varmyFunction=function[name]([param1[,param2[,...,paramN]]]){ statements }; 不支援Arrowfunctions (param1,param2,…,paramN)=>{statements} 像下面這種設定方法在AOT是不被支援的 @Component({ ... providers:[{provide:server,useFactory:()=>newServer()}] }) 需改成這樣： exportfunctionserverFactory(){ returnnewServer(); } @Component({ ... providers:[{provide:server,useFactory:serverFactory}] }) 在元數據內單獨使用常數 因為常數是在編譯時就編譯進JS裡，如下面的寫法會造成AOT在編譯時遺失template常數的值： consttemplate='

'; @Component({ selector:'app-hero', template:template }) exportclassHeroComponent{ @Input()hero:Hero; } 我們可以改用下面這種寫法 @Component({ selector:'app-hero', template:'' }) exportclassHeroComponent{ @Input()hero:Hero; } 或將常數放至一個運算表達式內： consttemplate=''; @Component({ selector:'app-hero', template:template+'' }) exportclassHeroComponent{ @Input()hero:Hero; } 裝飾和數據綁定的類成員必須公開 在metadata中只支援下面的angulardecorators DECORATOR MODULE Attribute @angular/core Component @angular/core ContentChild @angular/core ContentChildren @angular/core Directive @angular/core Host @angular/core HostBinding @angular/core HostListener @angular/core Inject @angular/core Injectable @angular/core Input @angular/core NgModule @angular/core Optional @angular/core Output @angular/core Pipe @angular/core Self @angular/core SkipSelf @angular/core ViewChild @angular/core 如果表達式使用不受支持的語法，則collector將錯誤的項目寫入.metadata.json文件。

如果編譯器需要這段元數據來生成應用程序代碼，則編譯器稍後將報告該錯誤。

若希望能立即顯示錯誤，則可以將tsconfig的strictMetadataEmit設為true "angularCompilerOptions":{ ... "strictMetadataEmit":true } 參考資料 Angular4教學-Webpack預先編譯Ahead-of-Time(AOT) [Day25]Angular2事先編譯Ahead-of-Time(AoT) Angular2的AoT Angular2JITvsAOT TheAhead-of-Time(AOT)Compiler 留言1 追蹤 檢舉 上一篇 [技術支援-4]AngularUniversal 下一篇 [技術支援-6]NPM設定 系列文 用30天深入Angular5的世界 共31篇 目錄 RSS系列文 訂閱系列文 143人訂閱 27 [技術支援-5]佈署方式JIT及AOT介紹 28 [技術支援-6]NPM設定 29 [技術支援-7]TypeScript設定 30 [技術支援-8]產品發佈設定 31 [後記]參賽心得 完整目錄 1則留言 0 微中子 iT邦新手4級‧ 2018-01-1803:38:47 沒想到我的文章也在參考之中。

現在回去看覺得慘不忍睹XD AngularCLI預設成AOT之後，平常就沒啥感覺了，去年要編個AOT都一堆麻煩 回應 1 檢舉 ClaireChang iT邦新手4級‧ 2018-01-1916:56:45 檢舉 我有拜讀你去年的系列文喔！ [[功能介紹-1]Angular架構]([功能介紹-1]Angular架構)這篇你的文章也有在參考之中！ AOT現在真的方便多了...參考文章裡的方法都好複雜阿！ 我有拜讀你去年的系列文喔！ [[功能介紹-1]Angular架構]([功能介紹-1]Angular架構)這篇你的文章也有在參考之中！ AOT現在真的方便多了...參考文章裡的方法都好複雜阿！ 修改 登入發表回應 我要留言 立即登入留言 iT邦幫忙鐵人賽 參賽組數 1087組 團體組數 52組 累計文章數 20492篇 完賽人數 572人 鐵人賽最新文章 Day36-使用Container建立AmazonSageMaker端點 Day35-AmazonSageMaker簡介 今天來瞄一眼龍與雀的科技：知覺共享技術Body-sharing 更新網格交易機器人 Day34-實作S3驅動Lambda函數進行YOLO物件辨識 建立第一個RESTfulapiserver(設定環境變數篇)-7(Day19) Day48.下載個範例iosapp來試著build 原來Arduino開發板的腳位與程式內數字的對應會隨著開發商不同而改變? EP32:TopStoreAppwith.NETMulti-platformAppUI(MAUI) [Day32]HexoxGitHubPages主題自訂樣式+問題排除 前往鐵人賽 技術推廣專區 [Day2]抓取每日收盤價 [Day1]基本工具安裝 利用python取得永豐銀行API的Nonce 永豐金融API測試員 [Day03]tinyML開發板介紹 [Day01]在享受tinyML這道美食之前 [Day3]使用ta-lib製作指標 計算API所需要的參數:HashID [Day4]函數打包與買進持有報酬率試算 計算API所需要的參數:IV 前往鐵人賽 熱門問題 電信商說我透過Steam或是PS4下載遊戲是異常封包而斷我網路，怎麼辦？ 請問vSphere裡面的網路硬碟.有辦法可以用WIN連線網路硬碟.目前只知道IP&管理帳密.要將VM儲存區掛給VeeamBackup 有關新手SQL問題一問 有人知道怎麼解決gmail一直擋信的問題? LINUX帳戶密碼最大使用期限90天 Win10的系統還原 線上版文書處理除了Google雲端,365,還有其他選擇嗎? Windows2008R2如何讀取ISO檔 Server掛掉，Acronis的備份檔無法復原 MSSQL資料庫主機Ping的到，但無法連線 IT邦幫忙 站方公告 2021iThome鐵人賽精彩文章超過2萬篇，預計12月揭曉本屆獲勝鐵人 熱門tag 看更多 13th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 windows php python windowsserver linux c# 程式設計 資訊安全 css vue.js sql 分享 熱門回答 有關新手SQL問題一問 請問vSphere裡面的網路硬碟.有辦法可以用WIN連線網路硬碟.目前只知道IP&管理帳密.要將VM儲存區掛給VeeamBackup MSSQL資料庫主機Ping的到，但無法連線 TIPTOPmail MSSQLUNION後進階排序問題請教 線上版文書處理除了Google雲端,365,還有其他選擇嗎? 電信商說我透過Steam或是PS4下載遊戲是異常封包而斷我網路，怎麼辦？ Windows2008R2如何讀取ISO檔 求助!用ExcelUserForm來Update資料到SQL （已解決）Vue.jsv-for顯示問題 熱門文章 【第31天】番外篇-Windows+YOLOV4本地端訓練 建立第一個RESTfulapiserver(設定環境變數篇)-7(Day19) 原來Arduino開發板的腳位與程式內數字的對應會隨著開發商不同而改變? Day48.下載個範例iosapp來試著build Day34-實作S3驅動Lambda函數進行YOLO物件辨識 【換機必學】將資料從Android轉移到iOS的兩種方法 EP32:TopStoreAppwith.NETMulti-platformAppUI(MAUI) [Day32]HexoxGitHubPages主題自訂樣式+問題排除 Day47.buildaiosappinunity 免費錄影！原來Windows10有内建的螢幕錄影工具 一週點數排行 更多點數排行 海綿寶寶(antijava) raytracy(raytracy) ccenjor(ccenjor) rogeryao(rogeryao) ㊣浩瀚星空㊣(yoching) Samuel(kuanyu) 純真的人(jer5173) huahualiu(ffang55tw) juck30808(juck30808) asd3733653(asd3733653) × At 輸入對方的帳號或暱稱 Loading 找不到結果。

標記 {{result.label}} {{result.account}} 關閉