angular2-aot-webpack 生產環境下編譯angular2

這裏講講，angular2在生產模式下用webpack2進行打包的方法：

             //使用rollup打包仍是比較坑的，功能及插件上都不如webpack, 關鍵不支持代碼分離，致使angular裏的lazy loader將沒法使用。 

 具體步驟：

   angular=>aot=>webpack(Tree shaking&& Uglify)

 

angular=>aot:

 

首先你須要的依賴：

"@angular/compiler"     "@angular/compiler-cli"        "@angular/platform-browser"。

npm install 安裝他們。

如下是目錄結構：

...
 ./package.json
 ./tsconfig.aot.json
 ./tsconfig.json
 ./webpack.pro.config.js
 ./src/
     |--./main.ts
     |--./main.aot.ts
     |--./app.module.ts
     |--./router.module.ts
     |--./app.component.ts
     |--./child/
              |--./child.module.ts
              |--./child.component.ts
     

　　

 

準備一個tsconfig.aot.json:

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": true,
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "typeRoots": [ "./node_modules/@types" ],
    "lib": [
      "dom",
      "es2015"
    ]
  },
  "angularCompilerOptions": {   　　 //這是aot.json獨有的，genDir:"." ,示意，生成的NgFactory文件放於原文件路徑內。你也能夠genDir:'aot'，放在aot文件內，但我建議你放在原路徑裏。
    "genDir": ".",
    "skipMetadataEmit":true
  },
  "files":[
    "src/app.module.ts",        　　 //從app.module.ts這個文件開始進行編譯。
    "src/child/child.module.ts"  　　//這是lazy loader模塊，由於是惰性加載模塊，而沒有在原模塊中import或require它，因此須要單獨編譯。
  ],
  "compileOnSave": false,
  "exclude": [
    "node_modules",
    "src/polyfill.ts"
  ]
}

　接下來運行npm run ngcStart;     // package.json : "ngcStart": "ngc -p tsconfig-aot.json"

  你會發現 src/文件內生成了許多*.ngfactory.ts , 這些就是提供給生產環境，最終使用的angular文件。自此預編譯完成。

  （.js文件能夠刪除它，'rimraf src/*.js src/*/*.js'。）

 

aot=>webpack:

   咱們須要從main.aot.ts來引導這些aot文件,這是main.aot.ts文件(別從main.ts引導)：

import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from './app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

 好了，下面是webpack的配置：

{               /....../
		entry:{
			'main':'./src/main.aot.ts'
		},
		output:{
			path:'dest',
			filename:'[name].bundle.js',
			chunkFilename:'[id].chunk.js'
		},
		module:{
　　　　　　　　　　　　rules:[
　　　　　　　　　　　　　　{test: /\.ts$/,use:[
　　　　　　　　　　　　　　　　'awesome-typescript-loader',                   //我建議你用awesome-typescript-loader進行ts加載。
　　　　　　　　　　　　　　　　'angular2-template-loader',
　　　　　　　　　　　　　　　　'angular2-webpack2-lazy-children-loader'       //這是針對lazy loader 的插件,後面會單獨說
　　　　　　　　　　　　
　　　　　　　　　　　　　　]},
　　　　　　　　　　　　　　{test:/\.json$/,use:'json-loader'},

　　　　　　　　　　　　　　{test:/\.html$/,use:'raw-loader'},
　　　　　　　　　　　　　　{test:/\.(jpg|png|gif)/,use:'file-loader?name=[path][name].[ext]'}
　　　　　　　　　　　　]
　　　　　　　　　}
		plugins:[
                   /..../
　　　　　　　　　　　　new webpack.optimize.UglifyJsPlugin({              /*mini化，並進行treeShaking.  雖然這個treeShaking存在一個問題。不過目前我並無一個好辦法，也沒那多時間了.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　babili-webpak-plugin雖然shaking掉了class，但文件大小好像並沒變化。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　而rollup的treeShaking很是出色，最後獲得的文件比webpack UglifyJsPlugin要小几十KB。但是這東西，很差用。:(

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　*/
　　　　　　　　　　　　　　　　　　compress:{warnings:true}
　　　　　　　　　　　　})


　　　　　　　　　　
　　　　　　　　　　]
}

　　

　最後獲得的main.bundle.js就是咱們想要的主文件了。

     0.chunk.js是child.module所對應的文件。

  main.bundle.js 200~400KB 大小。比起不通過aot獲得的mini文件（1MB多）小了不少。最後gz壓縮，能夠控制在100KB左右。最小能夠50KB。

 

-----------------------------------

說說‘angular2-webpack2-lazy-children-loader’

2017.03.04-------

改用

'angular-router-loader?aot=true'；

angular-router-loader v0.5 支持aot lazy load

-----------------------------

　　咱們這樣使用lazy loader:

loadChildren:' child.module#ChildModule'

　　但是aot編譯後的文件名字成了child.module.ngfactory.ts,

　　裏面的變量成了ChildModuleNgFactory。因此爲了生產模式，你須要改寫成：

loadChildren:' child.module.ngfactory#ChildModuleNgFactory'

　　若是你手動更改了，那麼，你能夠繼續使用‘angular-router-loader’在webpack中進行加載。

     但使用‘angular2-webpack2-lazy-children-loader’在於，它會自動判斷，並在加載時replace這段string。因此你，在生產或者開發模式均可寫成你本來的格式了。

 

------------------------------

 能夠下載嘗試：https://github.com/zhantewei2/angular-aot-webpack