web應用性能優化之 nginx + compression-webpack-plugin

當咱們的前端項目愈來愈龐大是時候  會發現 即便作了code split  代碼壓縮  動態加載 等等一系列優化以後 頁面的響應速度依舊很慢

這個時候時候可使用compression-webpack-plugin 這個插件

new CompressionWebpackPlugin({ //gzip 壓縮
     filename: '[path].gz[query]',
      test: new RegExp(
        '\\.(js|css)$'    //壓縮 js 與 css
      ),
      threshold: 10240,
      minRatio: 0.8
 })
複製代碼

具體配置參數能夠到該插件的官網上查看 ，該插件的做用是 在超過限定的文件大小的 時候會生成一個跟文件同名的gz包

這個時候咱們須要在改下nginx的配置  啓用gzip壓縮並 開啓gzip_static

location ~ .*\.(jpg|png|gif)$ {
       gzip on;
       gzip_static on;
       gzip_min_length 1k;
       gzip_http_version 1.1;
       gzip_comp_level 3;
       gzip_types image/jpeg image/png image/gif;
       root /home/dist;
    }

    location ~ .*\.(html|js|css)$ {
        gzip on;
        gzip_static on;
        gzip_min_length 1k;
        gzip_http_version 1.1;
        gzip_comp_level 9;
        gzip_types  text/css application/javascript;
        root /home/dist;
    }
複製代碼

可是使用Gzip壓縮有一些缺點：

壓縮期間服務器CPU負載增長。 數據可能須要很長時間才能處理，由於在完成壓縮以前不會發送第一個字節，所以可能會使網頁顯示爲掛起狀態。 長時間到第一個字節一般會致使用戶取消並從新發出對Web服務器的請求，從而致使因爲順序加載請求而致使CPU負載增長 寫在最後：歡迎加我wx    wangchen20180818 交流，學習