配置nginx直接使用webpack生成的gz压缩文件

配置nginx直接使用webpack生成的gz压缩文件

前言：vue cli3的性能优化里面，开启gzip能得到很多的收益。通过webpack插件compression-webpack-plugin可以在打包的时候生成.gz文件；当用nginx做服务器时，nginx通过_gzip on;_配置可对每个请求先压缩再输出，这样造成虚拟机浪费了很多cpu；而且webpack打包时已经生成了压缩文件，完全没必要重新通过nginx再压缩一下

一、配置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
            })
        )
    }
}

二、安装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

三、配置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