[Day 25] Angular 2 事先編譯Ahead-of-Time (AoT) - iT 邦幫忙

... 本身是即時編譯(Just-in-Time, JiT)，瀏覽器先讀取我們的檔案，然後瀏覽器邊看邊編譯，但這樣比起有先編譯過當然慢了多，如果事先編譯(Ahead-of-Time, AoT) 的話， ... 2017iT邦幫忙鐵人賽 DAY 25 1 ModernWeb Angular2之30天邁向神乎其技之路系列第 25篇 [Day25]Angular2事先編譯Ahead-of-Time(AoT) 2017鐵人賽 aot 微中子 2017-01-0923:47:089740瀏覽 前言 Angular2雖然是一套強大框架，但最後輸出仍然為html、js、css檔案，js本身是即時編譯(Just-in-Time,JiT)，瀏覽器先讀取我們的檔案，然後瀏覽器邊看邊編譯，但這樣比起有先編譯過當然慢了多，如果事先編譯(Ahead-of-Time,AoT)的話，當我們用瀏覽器打開時，就不用編譯，於是體驗速度就快了許多，此外編譯過的程式碼也會比原始碼輕量。

由於先編譯過，如果有bug的話也會很容易發現。

AoT 在Angular2中有幾種方式可以建構AoT網頁： 1.使用開發環境 2.直接使用ngc 3.@ngtools/webpack套件 如果要建立AoT要做多設定，後面兩種屬於要自己重頭硬幹的方式，介紹起來真的很複雜，所以我簡單帶過，通常我們也不需要這樣做。

附上一些文章供大家參考： 官方文件 Ahead-of-TimeCompilationinAngular BuildinganAngular2ApplicationforProduction 1.使用開發環境 這邊開發環境是指Angular-Seed這類的環境，或是別人已經打包好的AoT開發專案直接拿來使用。

Angular-Seed Angular-Seed是Angular第二受歡迎的開發環境 $gitclone--depth1https://github.com/mgechev/angular-seed.git $cdangular-seed #安裝套件 $npminstall #快一點安裝套件(用Yarn：https://yarnpkg.com) $yarninstall#oryarn #AoTcompilation編譯檔案，檔案會產生在`dist/prod` $npmrunbuild.prod.aot 2.ngc 採用AngularCLI開發 首先要安裝套件 npminstall@angular/compiler-cli@angular/platform-server--save 建立一個tsconfig-aot.json { "compilerOptions":{ "target":"es5", "module":"es2015", "moduleResolution":"node", "sourceMap":true, "emitDecoratorMetadata":true, "experimentalDecorators":true, "lib":["es2015","dom"], "noImplicitAny":true, "suppressImplicitAnyIndexErrors":true }, "files":[ "app/app.module.ts", "app/main.ts" ], "angularCompilerOptions":{ "genDir":"aot", "skipMetadataEmit":true } } 編譯 node_modules/.bin/ngc-ptsconfig-aot.json Bootstrap也要調整 //app/main.ts import{platformBrowser}from'@angular/platform-browser'; import{AppModuleNgFactory}from'../aot/app/app.module.ngfactory'; platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); Rollup:一種treeshaking的技巧，就是把多餘無用的code像搖樹般搖掉。

首先要安裝 npminstallrolluprollup-plugin-node-resolverollup-plugin-commonjsrollup-plugin-uglify--save-dev 然後增加一個rollup-config.js檔案 importrollupfrom'rollup' importnodeResolvefrom'rollup-plugin-node-resolve' importcommonjsfrom'rollup-plugin-commonjs'; importuglifyfrom'rollup-plugin-uglify' exportdefault{ entry:'app/main.js', dest:'dist/build.js',//outputasingleapplicationbundle sourceMap:false, format:'iife', plugins:[ nodeResolve({jsnext:true,module:true}), commonjs({ include:'node_modules/rxjs/**', }), uglify() ] } 執行rollup node_modules/.bin/rollup-crollup-config.js 把index.html中用SystemJS的部分移除，改成：