前端優化（一）：開啟nginx gzip壓縮

最近接手一個項目，特别亂，網站加速速度特别慢，成了大問題。

來和我一起開啟前端優化之路吧！

我着重從幾個方面入手整理：

• 整理項目，清除備援檔案。
  • 解除安裝未用到的npm包。
  • 去除未用到的檔案。
• 抽取公用元件和方法，去掉重複的代碼。
• 抽取第三方js
• 使用tinypng壓縮圖檔
• 使用路由懶加載
• 開啟nginx gizp壓縮

由于清除項目備援包、檔案和代碼各項目不同，本文不做重點講解。

本文分成幾篇分别着重介紹從以下幾個方面如何進行優化：

• 開啟nginx gzip壓縮
• 使用路由懶加載
• 抽取第三方js

一、開啟nginx gzip壓縮

這一步本是我做了以上優化後最後的一步，但考慮到并不沖突，優化寫了。 在前端方面做完項目的整理以後，網站加載速度仍保持在3秒左右，其中火狐為将近3秒，谷歌為3秒半左右。 開啟nginx gzip壓縮後，加載速度從3秒降到了1秒，效果驚人。 下面來詳細講一下如何配置：

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
           

在nginx的配置裡，加入上面的代碼。

下一章直通車：前端優化（二）：使用路由懶加載