前端性能優化之Gzip

時間 2021-05-24

標籤 javascript php css html 前端 vue java webpack nginx web 欄目系統性能简体版

原文原文鏈接

前言

因爲咱們團隊的前端項目愈來愈龐大，加之Vue的SPA首屏加載特性，致使系統第一次加載速度愈來愈緩慢，可能達到幾十秒的程度，因此爲了優化用戶性能體驗，咱們選擇了開啓Gzip進行文件壓縮，確實達到了顯著的效果。javascript

什麼是Gzip？

gzip是一種數據的壓縮格式，或者說是一種文件格式。

Gzip本來用戶UNIX系統的文件壓縮，後來逐漸成爲Internet最主流的數據壓縮格式。
當用戶訪問咱們的web站點時，服務器就將咱們的網頁文件進行壓縮，將壓縮後的文件傳輸到客戶端，對於純文本文件咱們能夠至少壓縮到原大小的40%，這樣大大提升了傳輸效率，頁面即可更快的加載出來。php

Nginx服務端配置Gzip服務

因爲目前咱們項目是使用ngxin來部署前端的，nginx自帶HttpGzip模塊，因此咱們直接對nginx.conf文件的http配置項進行配置便可。但相對的因爲nginx自身處理請求而後壓縮返回，會消耗對應的服務器內存。css

# 開啓或者關閉gzip模塊(on|off)
    gzip on;
    # 容許壓縮的頁面最小字節數, 默認值是0，無論頁面多大都壓縮。建議設置成大於1k的字節數，小於1k可能會越壓越大
    gzip_min_length 1k; 
    # 設置系統獲取幾個單位的緩存用於存儲gzip的壓縮結果數據流。例如 4 4k 表明以4k爲單位，按照原始數據大小以4k爲單位的4倍申請內存。
    gzip_buffers 4 16k; 
    # 識別http的協議版本。因爲早期的一些瀏覽器或者http客戶端，可能不支持gzip自解壓，用戶就會看到亂碼，因此作一些判斷仍是有必要的。
    #gzip_http_version 1.0;
    # gzip壓縮比，1 壓縮比最小處理速度最快，9 壓縮比最大但處理最慢（傳輸快但比較消耗cpu）。
    gzip_comp_level 2;
    # 匹配MIME類型進行壓縮，（不管是否指定）"text/html"類型老是會被壓縮的。
    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;
    # 和http頭有關係，加個vary頭，給代理服務器用的
    gzip_vary off;
    # 表示IE6及如下禁止壓縮
    gzip_disable "MSIE [1-6]\.";

測試效果html

開啓gzip前

開啓gzip後

客戶端壓縮Gzip

咱們應儘量減小對服務端內存的使用，畢竟服務端的資源是十分寶貴的，這裏咱們仍然使用nginx進行前端部署，咱們在客戶端替nginx處理壓縮文件這一步操做，nginx即可直接使用咱們壓縮好的文件，下面是一個基於vue-cli配置的前端項目。前端

一、安裝插件

這裏最好安裝低版本，防止報錯。vue

npm install compression-webpack-plugin@5.0.1 -D

二、配置vue.config.js註冊插件

這裏能夠根據你們不一樣的配置，總之就是將webpack插件進行註冊。java

const CompressionPlugin = require("compression-webpack-plugin");
module.export = {
    configureWebpack: {
         plugins: [
      new CompressionPlugin({
        filename: "[path].gz",
        //壓縮算法
        algorithm: "gzip",
        //匹配文件
        test: /\.js$|\.css$|\.html$/,
        //壓縮超過此大小的文件,以字節爲單位
        threshold: 10240,
        minRatio: 0.8,
        //刪除原始文件只保留壓縮後的文件
        deleteOriginalAssets: false
      })
    ]
    }
}

三、運行打包命令

成功運行後，即可以在打包文件中看到.gz結尾的文件了，將打包後的文件上傳到指定的nginx文件夾下。webpack

npm run build

四、配置nginx

這裏須要nginx對應的插件http_gzip_static_module，以前我是經過yum安裝的nginx，這裏彷佛不能夠，須要手動安裝。這裏目錄能夠根據你們我的狀況而定。
安裝nginxnginx

cd /usr/local/src/
wget http://nginx.org/download/nginx-1.18.0.tar.gz
tar zxvf nginx-1.18.0.tar.gz
cd nginx-1.18.0/
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module
make && make install

修改nginx.confweb

cd /usr/local/nginx/conf/
vim nginx.conf

server {
        listen       80;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
            gzip_static on; #靜態壓縮
        }
 }

啓動nginx服務