Angular前端優化思路

簡單總結接下我這邊angular前端優化步驟都是滿滿的乾貨，各位客官有好的改進歡迎留言~

1. 動靜分離

項目裏面前端比較佔用帶寬的通常都是加載靜態資源，請求後臺接口通常佔用帶寬都是1kb左右，可是在加載靜態資源每每會達到mb級別，佔用大量帶寬，明現影響了業務，因此動靜分離是必須並且必要作的，angualr裏面也會有指令來指定加載靜態資源路徑從而動靜分離

ng build --deployUrl=指定域名/

2.js ,css 代碼壓縮

angular編譯的js基本都很大達到了mb級別，加載起來很佔用帶寬，不過angualr也提供了編譯時壓縮代碼的功能，angular build指定爲 --prod便可,你會發現壓縮後代碼成倍數的變小很恐怖哦，不過prod編譯檢查比較嚴格，會出現不少報錯，另外這裏多說一嘴，我本身也測試比較過，angular項目設置懶加載策略，壓縮後的js還會進一步變小

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
     // 註釋下面這一行能夠激活延遲加載策略
  // preloadingStrategy: PreloadAllModules, 
   // useHash: true
});

3.CDN加速

CND加速不用多說了也是必要優化步驟，能夠自行百度，如今國內的共有云平臺都有CND加速服務，騰訊雲是無償使用

4.nginx緩存

通常作到上面3步，基本能夠實現頁面秒開了，可是打開頁面仍是會有請求服務器資源端會佔用服務器端帶寬，若是須要進一步優化可將一些訪問量高的頁面作nginx緩存，這樣就不會走服務器

events {
  #的最大鏈接數（包含全部鏈接數）1024
  worker_connections  1024;  ## Default: 1024
}

http{

   # 代理緩存配置 nginx根目錄指定緩存文件夾 kawa_cachedata名字本身定義跟proxy_cache_path對應上
   proxy_cache_path "./kawa_cachedata"  levels=1:2 keys_zone=kawacache:256m inactive=1d max_size=1000g; 
   server {
     listen 80;
     location /{
        #使用緩存名稱
        proxy_cache kawacache;
		#對如下狀態碼實現緩存
        proxy_cache_valid 200 206 304 301 302 1d;
		#緩存的key爲url地址
        proxy_cache_key $request_uri;
        add_header X-Cache-Status $upstream_cache_status;
		#反向代理地址
        proxy_pass http://127.0.0.1:8080;
      }
  
   }
}

上面的nginx配置基本就能夠緩存頁面了，若是頁面修改須要刷新緩存就在url後面追加新的時間戳就能夠了