vue cli3开启gzip,nginx配置直接使用已经压缩好的文件(文件名为加.gz)

原创
2019/06/29 16:50
阅读数 8.4K

前言:vue cli3的性能优化里面,开启gzip能得到很多的收益。通过webpack插件compression-webpack-plugin可以在打包的时候生成.gz文件;当用nginx做服务器时,nginx通过_gzip on;_配置可对每个请求先压缩再输出,这样造成虚拟机浪费了很多cpu;而且webpack打包时已经生成了压缩文件,完全没必要重新通过nginx再压缩一下。发现这个问题后,通过半天的资料查询找到了答案:**nginx gzip static静态压缩,**下面把我解决的过程记录一下。

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

四、查看效果

    1.打包后文件

 

    2. 浏览器访问资源结果

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
3 收藏
1
分享
返回顶部
顶部