Vite打包性能优化之开启Gzip压缩实践过程

目录
  • 前言
  • Gzip
  • 开启 Gzip
    • 插件的其他配置
  • 总结

前言

在使用 vite 进行项目打包时，默认已经帮我们做了一些优化工作，比如代码的压缩，分包等等。除此之外，我们还有一些可选的优化策略，比如使用 CDN ，开启 Gzip 压缩等。本文会介绍在 vite 中使用插件来开启 Gzip 压缩。

Gzip

Gzip 是一种压缩算法，在网络传输中使用非常普遍。随便打开一个网页，都使用了 gzip 压缩：

需要注意的是，Gzip 压缩仅对于文本类型的资源有明显提示，压缩后的体积大约是压缩前的 1/3。对于图片，音视频等媒体资源，本身就采用了有损压缩，所以再使用 gzip 并不能得到很大提升，有时候反而会适得其反。

开启 Gzip

前端项目打包出的 js，css资源，非常适合使用 gzip 进行压缩。

这样，用户浏览器收到服务器返回的 gzip 类型资源时，会自动解压缩。这样，既能减少带宽的损耗，也能加快资源传输的时间。

Vite 社区插件中有一个 vite-plugin-compression，可以用来做 gzip 压缩。请看示例。

未使用 gzip 压缩前，打包后有一个很大的文件，控制台也给出了提示，使用 gzip 能大大减小文件体积：

安装插件：

pnpm add -D vite-plugin-compression

配置文件：

vite.config.js

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // ...
    viteCompression({
      threshold: 1024000 // 对大于 1mb 的文件进行压缩
    })
  ],
});

再次打包：

可以看到，原来 2mb 多的文件，经过压缩后还剩 663 kb，压缩带来的提升非常明显。

插件的其他配置

  • filter：过滤器，对哪些类型的文件进行压缩，默认为 ‘/.(js|mjs|json|css|html)$/i’
  • verbose: true：是否在控制台输出压缩结果，默认为 true
  • threshold：启用压缩的文件大小限制，单位是字节，默认为 0
  • disable: false：是否禁用压缩，默认为 false
  • deleteOriginFile：压缩后是否删除原文件，默认为 false
  • algorithm：采用的压缩算法，默认是 gzip
  • ext：生成的压缩包后缀

总结

到此这篇关于Vite打包性能优化之开启Gzip压缩的文章就介绍到这了,更多相关Vite开启Gzip压缩内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vite + electron-builder 打包配置详解

    目录 创一个vite项目 安装打包工具 配置桌面环境 创建 主进程 main.js 添加electron 运行命令 打包项目,生成dist 解决资源无法加载 开发环境:热更新 两个工具 concurrently wait-on 打包exe 解决index.html找不到的问题 创一个vite项目 npm init vite 安装打包工具 npm i -D electron // 20.1.0 npm i -D electron-builder // 23.3.3 electron是开发时运行环境

  • vite2打包的时候vendor-xxx.js文件过大的解决方法

    vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了. 打包时遇到警告 输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk) Some chunks are larger than 500kb after minification. Consider: Using dynamic import() to code-split the

  • Vite打包性能优化之开启Gzip压缩实践过程

    目录 前言 Gzip 开启 Gzip 插件的其他配置 总结 前言 在使用 vite 进行项目打包时,默认已经帮我们做了一些优化工作,比如代码的压缩,分包等等.除此之外,我们还有一些可选的优化策略,比如使用 CDN ,开启 Gzip 压缩等.本文会介绍在 vite 中使用插件来开启 Gzip 压缩. Gzip Gzip 是一种压缩算法,在网络传输中使用非常普遍.随便打开一个网页,都使用了 gzip 压缩: 需要注意的是,Gzip 压缩仅对于文本类型的资源有明显提示,压缩后的体积大约是压缩前的 1/

  • vue项目开启Gzip压缩和性能优化操作

    vue 项目开启gzip自拍压缩和部署 nginx 开启gzip优化性能 第一步:在vue项目中安装依赖并将productionGzip改为true,开启Gzip压缩: npm install --save-dev compression-webpack-plugin 第二步:运行 npm run build打包项目,这时可能会报错,提示ValidationError: Compression Plugin Invalid Options. 根据官网提示,需要将CompressionWebpac

  • Vue CLI3 开启gzip压缩文件的方式

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compression webpack plugin 实现gzip压缩,首先需要安装该插件: npm i -D compression-webpack-plugin 在vue cli3.0 生成的项目里,可在 vue.config.js 中按照如下方式进行配置: 压缩前后大小大致如下: 生成的压缩文件以.gz

  • IIS开启GZIP压缩效率对比及部署方法小结

    IIS开启GZIP压缩效率对比及部署方法小结

    压缩的最大好处就是降低了网络传输的数据量,从而提高客户端浏览器的访问速度.当然,同时也会增加一点点服务器的负担.GZIP是比较常见的一种HTTP压缩算法. 压缩测试在部署的IIS 6.0上配置了GZIP压缩,详细的测试结果如下.未开启GZIP压缩前,访问网站首页进行抓包分析.开启GZIP后,清空本地IE缓存,再次访问抓包分析.开启前后,页面大小减小了89213bytes,压缩掉原始大小的87%.当对CSS.JS等文件都开启GZIP压缩后,原21100bytes的文件,压缩后如图所示,压缩比为80

  • Nginx启用压缩及开启gzip 压缩的方法

    Nginx启用压缩及开启gzip 压缩的方法

    在nginx.conf文件的http模块新增以下内容 gzip             on; gzip_min_length  10k;  # 设置允许压缩的页面最小字节数 gzip_comp_level  6; gzip_vary        on; gzip_types       text/plain text/css application/javascript application/json application/xml text/xml image/png image/gif

  • 服务器端如何开启GZIP压缩功能(Apache、IIS、Nginx)

    目录 Apache如何开启GZIP功能 IIS如何开启GZIP功能 Nginx如何开启GZIP功能 我们知道做好负载均衡对网站的正常运行,用户体验相当重要.在负载均衡中有一个必须要做的事情就是给服务器开启GZIP压缩功能,对用户请求的页面进行压缩处理,以达到节省网络带宽,提高网站速度的作用. GZIP是若干文件压缩程序的简称,通常指GNU计划的实现,此处的GZIP代表的就是GUN ZIP,这也是HTTP1.1协议定义的两种压缩方法中最常用的一种压缩方法,客户端浏览器大都支持这种压缩格式.接下来,

  • Tomcat7中开启gzip压缩功能的配置方法

    使用gzip压缩可以减少数据传输大小,加快网页加载速度.很多大站都开启了gzip压缩,不过也有很多网站并没有开启gzip压缩,上次看了一篇文章说开启gzip压缩后对搜索引擎不友好,但从带宽和流量的角度来看,还是有必要开启gzip压缩的. 对于tomcat7服务器,打开conf文件夹下的server.xml 文件,找到 复制代码 代码如下: <Connector port="8080" protocol="HTTP/1.1"                   

  • php简单开启gzip压缩方法(zlib.output_compression)

    php简单开启gzip压缩方法(zlib.output_compression)

    一般而言,页面文件开启gzip压缩以后,其体积可以减小60%~90%,对于文字类站点,可以节省下大量的带宽与用户等待时间.但是不论是iis还是apache默认都只压缩html类静态文件,对于php文件需要模块配置才可支持(iis7.5中开启动态+静态压缩也可以),于是利用php自身功能到达gzip的效果也成为一项合理的诉求. 网上的教程基本是你抄我来我抄他,不外乎加头加尾或者自构函数两种写法.实际上每个php页面都要去加代码--当然也可以include引用,不过总显得略微麻烦. 实际上最简单的办

  • PHP中开启gzip压缩的2种方法

    网页开启gzip压缩以后,其体积可以减小20%~90%,可以节省下大量的带宽,从而减少页面响应时间,提高用户体验. php配置改法: 复制代码 代码如下: zlib.output_compression = On ;开启gzip功能 zlib.output_compression_level = 4 ;gzip压缩级别,1~9,建议3~5 ;zlib.output_handler = ;gzip压缩方式,建议注释 php文件改法: 建议在页面开头写上,可以写到头部公共文件 复制代码 代码如下:

  • php使用curl获取header检测开启GZip压缩的方法

    本文实例讲述了php使用curl获取header检测开启GZip压缩的方法.分享给大家供大家参考,具体如下: 获得网页header信息,是网站开发人员和维护人员常用的技术.网页的header信息,非常丰富,非专业人士一般较难读懂和理解各个项目的含义. 获取网页header信息,方法多种多样,就php语言来说,我作为一个菜鸟,知道的方法也有4种那么多.下面逐一献上. 方法一:使用get_headers()函数 这个方法很多人使用,也很简单便捷,只需要两行代码即可搞定.如下: $thisurl =

随机推荐