vite配置gzip压缩

前段时间由于贫穷，用了家里的电脑做服务器，白嫖了同事的frp,映射到同事的服务器，达到可以公网访问的目的，预感到frp相对会慢一点点，没想到这么慢，发现vite打包后的部分js文件过大，导致首屏加载慢等用户体验及其不佳的现象，如下图所示，js文件高大1.2M，实在接受不了，必须对vite打包优化。

1.vite中配置gzip压缩

1.1 安装vite插件vite-plugin-compression

npm i vite-plugin-compression -D

1.2 vite.config.ts文件中配置插件

import viteCompression from 'vite-plugin-compression';plugins: [vue(),Components({resolvers: [AntDesignVueResolver()],}),AutoImport({resolvers: [AntDesignVueResolver()],}),viteCompression({verbose: true, // 默认即可disable: false, //开启压缩(不禁用)，默认即可deleteOriginFile: false, //删除源文件threshold: 10240, //压缩前最小文件大小algorithm: 'gzip', //压缩算法ext: '.gz', //文件类型})],

2. Nginx配置

nginx.config开启压缩，配置如下

gzip  on;
gzip_disable ¡°MSIE [1-6].(?!.*SV1)¡±;
gzip_http_version 1.1;
gzip_vary on;
gzip_proxied any;
gzip_min_length 5000;
gzip_buffers 16 8k;
gzip_comp_level 6;
gzip_types text/css text/xml text/plain text/javascript application/javascript application/json application/xml application/rss+xml application/xhtml+xml;

3.开启gzip压缩后的效果展示

可以直观的看到从1.2M压缩到400+kb

vite配置gzip压缩相关推荐

IIS配置Gzip压缩，提升访问性能
1.概述 IIS是基于Http协议进行数据传输的,我发现在项目中大概使用Get/Post返回Json,而Json并没有使用压缩. 如下图,响应的头部,也就是说IIS是可以支持Compression的. ...
Apache开启GZIP压缩功能方法
Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台,本文讲解了如何开启Apache平台上的Gzip压缩功能 Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Li ...
Java Web应用实现GZIP压缩传输
本篇介绍Java Web 应用如何配置GZIP压缩以提高js , css 等文件的传送速度, 加快网页的展现速度. 实现方式选择直接压缩文件, 比如将js文件通过gzip 工具压缩成 .gzjs 的 ...
web服务器配置gzip压缩
什么是gzip压缩 HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人 ...
Tomcat启用GZIP压缩，提升web性能
一.前言最近做了个项目,遇到这么一个问题:服务器返回给客户端的json数据量太大(大概65M),在客户端加载了1分多钟才渲染完毕(当然这加载时间也和本地的下行带宽有关),费时耗流量,用户体验极其不好 ...
性能优化实践：快速开启 Gzip 压缩
概念初探 Gzip,全称为 GNU zip,是一种无损压缩文件的算法.其底采用的是 DEFLATE,而 DEFLATE 是 LZ77 与哈夫曼编码的一个组合体. 通常来说,"Gzip 压 ...
网站启用GZip压缩后，速度快了3倍！
GZip压缩,是一种网站速度优化技术,也是一把SEO优化利器,许多网站都采用了这种技术,以达到提升网页打开速度.缩短网页打开时间的目的. 本文是一篇研究性文章,将通过某个案例来给大家显示网站采用GZi ...
如何使用gzip压缩加快页面显示速度
1.首先我们通过npm命令安装好需要使用的依赖包 npm install --save-dev compression-webpack-plugin 2.安装成功了之后我们需要在vue.config. ...
Vite打包性能优化之开启Gzip压缩
在使用 vite 进行项目打包时,默认已经帮我们做了一些优化工作,比如代码的压缩,分包等等.除此之外,我们还有一些可选的优化策略,比如使用 CDN ,开启 Gzip 压缩等.本文会介绍在 vite 中 ...

vite配置gzip压缩

vite配置gzip压缩

1.vite中配置gzip压缩

1.1 安装vite插件vite-plugin-compression

1.2 vite.config.ts文件中配置插件

2. Nginx配置

3.开启gzip压缩后的效果展示

vite配置gzip压缩相关推荐

最新文章

热门文章