webpack和vite: Gzip打包压缩
创始人
2024-06-02 17:48:15
0

前提:最近在研究打包优化,发现webpack和vite写法还是略显不同,记录一下

一、Gzip原理

Gzip压缩是一种http请求优化方式,通过压缩文件体积来提高请求加载速度。需要前端打包生成.gz后缀的文件,同时nginx配置文件启动gzip

二、webpack打包(基于vue2基础)

1. 安装依赖

npm i -D compression-webpack-plugin

2. 在vue.config.js进行配置

module.exports = {const CompressionWebpackPlugin = require('compression-webpack-plugin')if (process.env.NODE_ENV === 'production') {config.plugin('CompressionPlugin').use(new CompressionWebpackPlugin({test: /\.(js|css)$/,threshold: 10240, // 超过10kb的文件就压缩deleteOriginalAssets: true, // 不删除源文件minRatio: 0.8}))}
}

3. 遇到的问题

    安装依赖的时候,一直提示我babel必须升级到7.11.X以上,但是我用命令升级了还是不行。后面我用cnpm按照就可以了

三、vite打包

1. 安装依赖

pnpm add -D vite-plugin-compression

2. 在vite.config.js里面配置

import viteCompression from "vite-plugin-compression";
export default defineConfig({plugins: [// ...viteCompression()]
})

3. 打包后你会发现dist里面多了.gz的文件,证明成功了

 四、nginx配置

1. 找到服务器nginx目录,找到/conf下面的nginx.conf配置

// 找到对应目录地址
cd /usr/local/nginx/conf
// 编辑配置
vi nginx.conf

2. 修改配置

gzip on;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
gzip_vary on;

gzip_buffers:设置压缩文件所使用缓存空间的大小(number,指定Nginx服务器需要向系统申请缓存空间的个数;size,指定每个缓存空间的大小。) 

gzip_types:压缩类型,js是application/javascript,css是text/css

gzip_comp_level:设置压缩程度,包含1-9级。级别1表示压缩程序最低,压缩效率最高;9表示压缩程度最高,压缩效率最低,最费时间。默认级别1。(压缩级别并不是越高越好,需要根据自己的情况来设定压缩级别。)

gzip_vary:设置为开启,服务器返回数据时会在头部带上"Vary:Accept-Encoding"的标识。客户端便可以知道获取到的数据是否已经被压缩,默认为关闭

3. 重启nginx

// 在sbin目录下面启动
./nginx -s reload

4. 结果展示:压缩前1.3M,时间15s,压缩后400+kb,时间毫秒级

修改前:

 修改后:

 

 总结:Gzip确实会对文件进行压缩,浏览器访问获取文件的速度真的提升。其实在nginx里面进行配置就可以了。

相关内容

热门资讯

恋夜视频安卓系统Uc,恋夜视频... 亲爱的读者,你是否曾在深夜时分,被手机屏幕上跳动的视频吸引?今天,就让我带你一探究竟,揭开恋夜视频安...
鸿蒙套娃安卓系统视频,融合与创... 你知道吗?最近科技圈可是炸开了锅,因为华为的新操作系统鸿蒙OS又有了新动作。这不,他们竟然把鸿蒙套娃...
xp系统连接安卓手机问题,实用... 你有没有遇到过这样的情况:你的电脑上还运行着那个经典的XP系统,而你的安卓手机却时不时地想要和你亲密...
压缩安卓系统储存空间,高效管理... 手机里的照片越来越多,游戏也越玩越上瘾,可这安卓系统的储存空间却越来越紧张,是不是感觉像是在挤牙膏?...
安卓手游转苹果系统教程,轻松实... 你是不是也和我一样,手头有一堆安卓手游,突然之间想换换口味,体验一下苹果系统的魅力呢?别急,今天就来...
安卓原生系统锁屏暗,安卓系统锁... 亲爱的手机控们,你是否曾为安卓手机锁屏时的暗模式而感到好奇?那种在夜晚或光线不足的环境中,屏幕自动调...
安卓系统表情包下载地址,安卓系... 你是不是也和我一样,对安卓系统的表情包爱不释手?那些搞笑的、可爱的、甚至是有点小调皮的表情,总能让我...
原生安卓系统声音bug,揭秘那... 你有没有遇到过这种情况?手机里突然传来一阵奇怪的声音,让你瞬间从美梦中惊醒,或者正在专心工作时被打扰...
水果收银机安卓系统,便捷高效的... 你有没有想过,在繁忙的超市里,那些摆满新鲜水果的摊位,背后竟然隐藏着一个小小的科技秘密?没错,就是那...
安卓系统变苹果界面了吗,苹果界... 最近手机界可是炸开了锅,不少安卓用户都在议论纷纷:“安卓系统变苹果界面了吗?”这事儿可真不简单,得好...
miui操作系统与安卓系统吗,... 亲爱的读者,你是否曾在手机上看到过MIUI操作系统和安卓系统这两个名字,好奇它们之间有什么区别?今天...
安卓系统怎么卡道具界面,探究原... 手机用久了,是不是感觉安卓系统越来越卡?尤其是那个道具界面,点开就慢吞吞的,真是让人头疼。别急,今天...
安卓系统红包加速器,畅享无阻新... 你有没有发现,现在用手机抢红包简直是一场速度与激情的较量?别急,别急,让我来给你揭秘一款神器——安卓...
安卓经典版系统更新时间,从首次... 你有没有发现,最近你的安卓手机又悄悄地变了个样?没错,就是那个陪伴我们多年的经典版系统,它又来更新啦...
安卓系统开发要多久,约需1-2... 你有没有想过,自己动手开发一个安卓应用,究竟需要多长时间呢?这可是个让人好奇的问题,毕竟安卓系统开发...
原生安卓系统手机壁纸图片,探索... 亲爱的手机控们,你是否曾为寻找一款独特的壁纸而烦恼?今天,就让我带你走进原生安卓系统手机壁纸的奇幻世...
bmw安卓互联系统,智能驾驶新... 你有没有发现,现在开车已经不仅仅是驾驶那么简单了?一辆好车,还得有个好“大脑”,这样才能让你的驾驶体...
安卓手机升级系统卡吗,安卓手机... 你有没有遇到过这种情况:安卓手机升级系统后,突然感觉手机像蜗牛一样慢吞吞的,心里那个急啊!今天,就让...
无线麦克风安卓系统,轻松实现无... 你有没有想过,在一场热闹的K歌派对或者重要的演讲场合,无线麦克风简直就是救星啊!想象你手握麦克风,自...
怎么重新定制安卓系统,打造专属... 你有没有想过,你的安卓手机其实可以变得独一无二,就像是你自己的小宇宙一样?没错,就是重新定制安卓系统...