VUE项目Gzip压缩方案

本文介绍了如何在Vue项目中使用compression-webpack-plugin插件进行文件压缩,包括安装、配置webpack以开启生产环境gzip压缩,以及如何在Nginx服务器上进一步优化。通过实例展示了压缩后的效果,提升页面加载速度和用户体验。
摘要由CSDN通过智能技术生成

一、compression-webpack-plugin 插件

1、为什么要压缩?

打包的时候开启gzip可以很大程度减少包的大小,页面大小可以变为原来的30%甚至更小,非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验

2、为什么gzip压缩后页面加载速度提升

浏览器向服务器发出请求,并且在请求头中声明可以使用gzip的编码格式,服务器接受到请求之后,读取压缩后的文件,服务器直接返回给浏览器gzip格式的文件,浏览器进行解压缩,这样以来就节省了服务器压缩的时间

二、配置流程

1、安装依赖

npm i -D compression-webpack-plugin

2、配置webpack

const CompressionPlugin = require('compression-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';

if (isProduction) {
  // 生产环境开启gzip压缩
  vueConfig.configureWebpack.plugins.push(
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js$|\.html$|\.css$/, // 压缩文件的正则匹配
      threshold: 10240, // 对超过10k的数据进行压缩
      deleteOriginalAssets: false, // 是否删除原文件
      minRatio: 0.8 // 压缩比例
    })
  );
}

3、npm run build打包情况和分析

原包体大小为 2785k --> 824k,压缩率高达71%!

可以看到文件中有gz的文件

4、配置nginx

服务端 Nginx 需开启 gzip_static 功能

server{
    //开启和关闭gzip模式
        gzip on;
        //gizp压缩起点,文件大于2k才进行压缩;设置允许压缩的页面最小字节数,页面字节数从header头得content-length中进行获取。 默认值是0,不管页面多大都压缩。建议设置成大于2k的字节数,小于2k可能会越压越大。
        gzip_min_length 2k;
        // 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区 
        gzip_buffers 4 16k;
        // 设置gzip压缩针对的HTTP协议版本
        gzip_http_version 1.0;
        // gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
        gzip_comp_level 2;
        //进行压缩的文件类型
        gzip_types text/plain application/javascript text/css application/xml;
        // 是否在http header中添加Vary: Accept-Encoding,建议开启
        gzip_vary on;
}

5、请求头测试

将资源部署到服务,发送请求后,可以看到返回文件的大小

  • 7
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值