Angular 4 教學- Webpack 預先編譯Ahead-of-Time (AOT)

Ahead-of-Time (AOT) 預先編譯，是在程式發佈之前就透過Angular Compiler 進行編譯，所以瀏覽器下載完的 *.js 檔案，就可以直接被執行，然後渲染畫面 ... HomeCategoriesTagsArchives之前用Angular4(Angular2)開發後台系統，使用者都是在PC上面使用，網站啟動速度都很快，所以沒有使用到Ahead-of-Time(AOT)預先編譯的需求。

最近新產品上線，遇到很多Android的使用者開啟網站超級慢，舊一點的機型甚至開一分鐘才有畫面。

事後才趕緊補上AOT編譯。

本篇將介紹用Webpack預先編譯AOT編譯。

AOTvsJIT開發Angular所撰寫的TypeScript透過TypeScriptCompiler產生出來的*.js檔，是屬於Angular的SourceCode，必須經由AngularCompiler，才能在瀏覽器中執行。

而AngularCompiler可以在兩個不同的階段進行編譯：Just-in-Time(JIT)Angular預設是使用Just-in-Time(JIT)即時編譯，等瀏覽器下載完*.js檔案後，會在用戶端的瀏覽器編譯Angular的JS程式碼，接著才會渲染畫面。

優點：*.js檔案是Angular的原始碼，所以檔案較小。

缺點：在用戶端的瀏覽器編譯，所以網站啟動速度會較慢。

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

優點：減少掉了在用戶端的瀏覽器編譯的時間，所以網站啟動速度會較快。

缺點：由於*.js是經過編譯後的檔案，所以檔案會較大。

範例程式碼我用之前Angular4教學-從頭開始的範例延伸。

初始結構檔案結構如下：12345678910index.html#起始頁面package.json#npm套件設定檔systemjs.config.js#systemjs設定檔tsconfig.json#TypeScript設定檔app/#Angular4的主要目錄main.ts#bootstrap的程式進入點app.module.ts#bootstrap的第一個module(e.g.AppModule)app.component.html#app.component用到的templateapp.component.ts#AppModulebootstrap的第一個component(e.g.AppComponent)node_modules/#npm套件存放位置安裝Webpack套件安裝Webpack及接下來範例打包所需的開發套件，指令如下：1npminstall--save-devwebpackangular2-template-loaderawesome-typescript-loaderraw-loaderWebpack設定新增webpack.config.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354varwebpack=require("webpack");module.exports={cache:true,entry:{"bundle":[__dirname+"/app/main.ts"],"bundle-vendors":["core-js","zone.js","rxjs","@angular/core","@angular/common","@angular/compiler","@angular/platform-browser","@angular/platform-browser-dynamic","@angular/http","@angular/router","@angular/forms"]},output:{path:__dirname+"/js",filename:"[name].js",sourceMapFilename:"[name].map"},resolve:{extensions:[".ts",".js",".html"]},module:{loaders:[{test:/\.ts$/,loaders:["awesome-typescript-loader","angular2-template-loader"],exclude:/(node_modules)/},{test:/\.html$/,loader:"raw-loader"}]},plugins:[newwebpack.optimize.UglifyJsPlugin(),newwebpack.optimize.CommonsChunkPlugin({name:"bundle-vendors"}),newwebpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/,__dirname+"./app")]}執行webpack打包指令如下：1webpack-p修改index.html參考*.js的位置：12345678910111213141516