Angular2 發(fā)布思路
本文是按著ng2官網(wǎng)的高級內(nèi)容“Deployment”的思路整理得出的猎贴，原文雖然在angular2的中文站下掛著叛赚，截止目前卻還是英文版未翻譯虫几，筆者就在這里結(jié)合自己的理解給出原文的一點(diǎn)點(diǎn)整理肺稀。
這是原文地址：
https://angular.cn/docs/ts/latest/guide/deployment.html
1. 最簡單的發(fā)布流程
最簡單指的是開發(fā)完成好一個ng2應(yīng)用后，做最少的事情讓用戶能在自己的瀏覽器內(nèi)訪問到此應(yīng)用丁稀。從這句話出發(fā)就很容易想到吼拥，如何做到“最簡單”，自然就是什么都不做二驰，把寫好的整個項(xiàng)目往服務(wù)器一扔搞定扔罪。
當(dāng)然，即使是對項(xiàng)目文件什么都不做桶雀，服務(wù)器還是得做一些事情來配合ng2開發(fā)的前后端完全分離的網(wǎng)站：
a. 調(diào)整index.html中的標(biāo)簽的值，因?yàn)樵诜?wù)器中的index.html不一定就在根目錄下唬复，此時就必須指定其路徑矗积。
b. 調(diào)整404錯誤頁，將所有的404錯誤都重定向到index.html敞咧，只有這樣才能不讓服務(wù)器的路由影響到我們ng2的前端路由(深層原因其實(shí)就是棘捣，我們在瀏覽器輸入地址時，地址先被服務(wù)器認(rèn)為是錯誤路徑給返回錯誤了休建，這就得讓服務(wù)器認(rèn)為地址有誤時將其原封不動重定向給index.html乍恐，讓其成功被客戶端路由識別)
c. 開啟生產(chǎn)模式，ng2默認(rèn)的引導(dǎo)都會開始開發(fā)模式测砂，在引導(dǎo)的代碼里執(zhí)行 * enableProdMode() * 即可開啟生產(chǎn)模式
d. 簡化node_modules茵烈。 原因是開發(fā)項(xiàng)目時安裝的那一大堆(20500+的文件以及180M+的大小)npm包，其實(shí)絕大多數(shù)在App運(yùn)行于瀏覽器時是用不著的砌些，發(fā)布項(xiàng)目時呜投，去掉其中用不著的那一大堆文件加匈，自然能節(jié)省很大的空間。
2. 產(chǎn)品級優(yōu)化
接下來仑荐，為了優(yōu)化我們得產(chǎn)品雕拼，還需要做一些事情。
AOT編譯
全稱是 Ahead-of-Time compilation粘招。明確點(diǎn)講啥寇，就是默認(rèn)情況下ng2使用的是即時編譯的方式，App運(yùn)行過程中需要使用到哪個模塊了洒扎，就找到它然后編譯它辑甜，然后才運(yùn)行，別的且不說逊笆，實(shí)時編譯相比預(yù)編譯要多使用一個Angular Compiler栈戳，聽起來就能想到這會拖慢速度，實(shí)際上拖慢了不是一點(diǎn)兩點(diǎn)难裆，是一大半甚至更多子檀，這貨體積賊大。
使用webpack(包括AOT)
webpack是用于代替默認(rèn)的SystemJS的模塊化工具乃戈，可以說使用SystemJS進(jìn)行ng2的打包只是在試水鬧著玩褂痰，如果要上升到產(chǎn)品級別，webpack要強(qiáng)大得多症虑，包括了預(yù)編譯以及代碼壓縮缩歪，而不是像SystemJS那樣，每使用到新的模塊甚至組件模板都要發(fā)起請求來獲取谍憔。
使用rollup消除無用代碼
這指的是搖樹優(yōu)化匪蝙，完成的事情是自動去除掉不再使用的代碼，來減小體積习贫，不過需要我們具體去完成的事情好像沒有逛球，這個ng2自己幫我們完成了。
修剪庫依賴
說的好像是可以進(jìn)一步修剪使用到的庫苫昌，舉了個例子是RxJS颤绕，這個庫在開發(fā)ng2時會使用到其中的部分功能，比如說Observable祟身，但更多時候也只有這一個模塊被用到了奥务，所以可以只引入一個Observable。這其實(shí)是ng2自身還存在的一點(diǎn)點(diǎn)美中不足袜硫，至少筆者就感覺很怪氯葬，為什么用著@angular/xxx的包，還得引入個rxjs或者Observable父款，期待ng2后續(xù)的版本會給出更優(yōu)雅的方式吧溢谤。
性能測試優(yōu)先
講的就是通過性能測試手段來優(yōu)化產(chǎn)品了
3. 原文后面還分ng2端與服務(wù)端重新理了一遍上面講到的
ng2端要做的事情有：
a. 標(biāo)簽的路徑配置
b. 開啟ng2的生產(chǎn)模式
c. 使用模塊懶加載(路由中使用loadChildren)
原文還寫了一小段來說不需要把懶加載模塊import進(jìn)立即加載的模塊中(比如把一個懶加載模塊import在了根模塊里)瞻凤，這其實(shí)不會懶加載，模塊還是跟隨根模塊一起被加載了世杀。
服務(wù)端要做的事情有：
a. 錯誤頁都要重定向到index.html(防止丟失前端路由)
b. 跨域配置(前后端分離的應(yīng)用通常要解決的問題)
作者：Yitimo
鏈接：http://www.reibang.com/p/a4f067940649
來源：簡書
著作權(quán)歸作者所有阀参。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處瞻坝。
