性能優化之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
});

額外補充：ng build --prod --build--optimizer // 編譯后進一步壓縮文件的大小

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后面追加新的時間戳就可以了