關於使用Angular 2 對頁面大小,帶寬 以及首次加載速度的影響

背景

隨着前端開發愈來愈受到重視，不少的前端框架不斷出現。

這些框架極大的增長了前端的功能，豐富和簡化了不少前端操做。

然而關於這些框架對頁面自己大小，以及網絡帶寬的影響， 對首次加載速度的衝擊是網站開發須要考慮的一個重要因素。

測試分析

 下面以Angular 2官方例子作一個具體分析。

• Heroes例子程序的總體大小約90MB，見下圖：

• 須要本身建立的代碼自己大小：

可見大部分容量都被插件包占據了。而這些包都比較大，僅以Angular 2自己爲例。

• Angular 2 自己包大小如圖:

 

若是沒有通過任何處理，初始頁面加載Framework很容易就超過幾兆。

以Angular CLI 新建的空項目爲例，項目只有這一個很是簡單的頁面,惟一功能就是顯示一行提示

• 運行界面

Angular CLI 集成了Web pack等工具，會對代碼自動打包，這就很大程度下降了頁面加載的js/css文件的大小。即便如此，頁面也會比較大.

• 簡單的打包, 約3.2MB

 爲此打包工具支持針對生產環境的打包，能夠經過最小化和緊湊代碼來進一步下降文件大小。

• 生產環境打包，通過最小化處理約0.5MB

至此整個頁面大小已經大幅減少。但仍然比較大。經過服務器的壓縮，能夠最後一次減小其大小。

•  壓縮傳輸的大小，約104KB.

104KB 能夠說是至關小了。咱們接下來進一步分析。

頁面的大小顯然對帶寬有直接的依賴和影響。 若是使用手機訪問，即便網速愈來愈快，一個頁面幾兆甚至十幾兆，還是幾乎沒法接受的。

對於開發一個網站，使用Angular 2等Framework是否帶來足夠的好處，應該考慮如下方面

1. 用戶訪問頁面的頻度，用戶完成一次活動/交易 要訪問多少內容，有多少交互。
2. 用戶的訪問是否有帶寬限制，是否使用手機流量
3. 首次加載速度的影響有多大

若是你的程序用戶/數據交互很簡單，頁面較少，或者用戶一次活動須要處理的內容不多，能夠考慮使用靜態頁面等技術，這會提升訪問的速度和穩定性。

反之若是用戶要較長時間在頁面上進行操做，業務比較複雜，則使用Framework會有很大的好處。

1. 首次加載的內容通過屢次處理已經壓縮到很小， 相比如今一個圖片都幾百KB,framework自己已經能夠忽略。
2. 一旦加載完成，後續交互幾乎沒有多少流量消耗。
3. 極大的減小後續代碼的開發難度。

 

總結

隨着網絡愈來愈快，使用Angular 2等框架作前端開發已經對網站速度沒有什麼明顯的影響， 包括首次加載。

Angular 2和相關的工具提供了按需加載的模式，保證了單頁應用的性能。

單頁應用已經足夠知足大部分項目的需求。