vue cli3開啓gzip，nginx配置直接使用已經壓縮好的文件(文件名爲加.gz)

前言：vue cli3的性能優化裏面，開啓gzip能獲得不少的收益。經過webpack插件compression-webpack-plugin能夠在打包的時候生成.gz文件；當用nginx作服務器時，nginx經過_gzip on;_配置可對每一個請求先壓縮再輸出，這樣形成虛擬機浪費了不少cpu；並且webpack打包時已經生成了壓縮文件，徹底不必從新經過nginx再壓縮一下。發現這個問題後，經過半天的資料查詢找到了答案：**nginx gzip static靜態壓縮，**下面把我解決的過程記錄一下。

1、配置vue cli3 gzip

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: config => {
    // 開發環境不須要gzip
    if (process.env.NODE_ENV !== 'production') return
    config.plugins.push(
      new CompressionWebpackPlugin({
        // 正在匹配須要壓縮的文件後綴
        test: /\.(js|css|svg|woff|ttf|json|html)$/,
        // 大於10kb的會壓縮
        threshold: 10240
        // 其他配置查看compression-webpack-plugin
      })
    )
  }
}

2、安裝nginx ngx_http_gzip_module模塊

• 先下載nginx

• cd /nginx解壓目錄

• ./configure --prefix=/usr/local/nginx --with-http_gzip_static_module

• 上面的/usr/local/nginx爲nginx安裝目錄，可根據本身喜愛修改

• make

• make install

3、配置nginx

找到/usr/local/nginx/conf/nginx.conf，並添加下面代碼

server {
    listen 4300;
    server_name localhost;
    location / {
        root /home/static/web/wechat;
        index /index.html;
        try_files $uri $uri/ /index.html;
        gzip_static on; #靜態壓縮
    }
}

啓動nginx服務：./nginx -c /usr/local/nginx/conf/nginx.conf

4、查看效果

    1.打包後文件

 

    2. 瀏覽器訪問資源結果