angular 5.0版本更新內容

時間 2020-01-24

原文原文鏈接

構建優化

5.0版本默認採用CLI構建和打包。構建優化器是包含在CLI裏面的一個工具，經過對你的應用程序更加語義化的理解可使得你的打包程序(bundle)更小。
構建優化器有兩個主要工做。
第一，咱們能夠將應用程序的一部分標記爲純應用(pure)，改進了現有工具提供的搖樹優化，刪除了應用中其它不須要的部分。
第二，從你的應用程序在運行時刪除裝飾符代碼(decorators),裝飾(decorators)是由編譯器使用的，而在運行時並不須要能夠被刪除。這些工做減小了生成的JavaScript bundles的大小，並增長了你的用戶應用程序的啓動速度

服務端狀態轉換和DOM支持

有了這個支持，可讓應用程序在服務器端和客戶端版之間共享狀態更容易。
Angular Universal是一個幫助開發者實現SSR的開源項目，經過在服務端渲染
Angular應用程序，而後在客戶端引導啓動程序並生成HTML，由此更好的支持那些對javascript不太友好的化境來提升應用程序性能。
5.0版本中，Angular開發團隊添加了ServerTransferStateModule(與之對應的BrowserTransferStateModule),這個模塊容許你在服務端生成模塊信息並傳輸到客戶端，不須要在客戶端重複建立。這一點在經過HTTP獲取數據並展現時很是有用。經過服務端狀態轉移，客戶端不須要在發送第二個HTTP數據請求，狀態轉移的API文檔將在將來幾周內發佈。
此處另外一個改變是AngularUniversal團隊添加了Domino渲染工具，Domino的加入意味着咱們在服務器端上下文中將能夠支持更多的DOM操做，改進了對第三方JS和組件庫的支持

編譯器改進

改進了Angular編譯器來支持增量編譯,從新構建變得更快，特別是對生產環境的構建和AOT編譯，加強的裝飾器能夠經過更精細化的去除空格來減少產生的包.
改進後的AOT編譯的性能大幅度,提高能夠節省約95%的構建時間，40s能夠提高至2s完成一次構建。
添加Preserve Whitespace 經過編譯器，模板開發中的製表符、換行符、空格等能夠原樣的保留下來，並提供選項能夠自選是否使用Preserve Whitespace來保留這些東西，能夠在局部設置：組件裏面設置 perserveWhitespace屬性，也能夠在tsconfig.json中全局設置

加強的裝飾符支持

裝飾符下降了在使用useValue、useFactory、data對lambda表達式的要求，開發者也可使用一個lamdba表示來代替一個已定義的命名函數,也就意味着你能夠不事先在*.d.ts中聲明而直接執行代碼

管道

添加了新的號碼，日期和貨幣管道，增長了跨瀏覽器的標準化實現，消除國際化在不一樣環境中的差別。
在5.0中管道可使用咱們本身的實現，能夠在任何地方實現本地化的支持和配置。

4和5管道差別對比
https://docs.google.com/spreadsheets/d/12iygt_cakNP1VO7MV9g4lq9NsxVWG4tSfc98HpHb0k/edit#gid=0
javascript

StaticInjector取代ReflectiveInjector依賴注入器

爲了更多的減小polyfills，5.0中使用了StaticInjector注入器來替換原有的ReflectiveInjector注入器，這種注入器再也不裏來與ReflectPolyfill，能夠大幅減小應用程序體積
在4.x中，依賴注入器一共有兩種，即Injector的抽象類子類：
1._NullInjector (該類的實例用於表示空的注入器)
2.ReflectiveInjector (表示一個依賴注入容器，用於實例化對象和解析依賴)

以前提供依賴注入方式：
ReflectiveInjector.resolveAndCreate(providers);

5.0中方式：
Injector.create(providers);複製代碼

Zone執行速度的提高

5中默認提供的zones已經優化過，速度大幅提高，而且在應用程序中繞過zonee區域更加關於應用程序的性能。
繞過zone引導啓動應用程序的方式：

exportAs多命名支持

　　5.0中提供了組件/指令的多命名支持，在對用戶不修改代碼狀況下進行組件的遷移操做等很是有用，將一個組件導出多個名字，可讓組件已一個新名字來使用而達到不破壞現有代碼的目的。

HttpClient

　　在4.3中HttpClient模塊被封裝在@angular/common中，新的HttpClient被封裝在@angular/common/http中，更新Http模塊後，須要使用HttpClientModule替換原有HttpModule，並在使用http服務時，能夠去掉map(res=>res.json())的調用，新模塊中已經再也不須要這麼寫了