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里面进行配置就可以了。

相关内容

热门资讯

编程安卓系统和鸿蒙主题,跨平台... 你有没有想过,手机的世界里,除了苹果的iOS和安卓的操作系统,还有个神秘的鸿蒙系统?今天,咱们就来聊...
哪个安卓机系统好用,探索安卓系... 你有没有想过,手机里的安卓系统就像是个大厨,不同的系统就像不同的烹饪手法,有的让你吃得津津有味,有的...
安卓如何控制苹果系统,从安卓到... 你知道吗?在这个科技飞速发展的时代,安卓和苹果两大操作系统之间的较量从未停歇。虽然它们各自有着忠实的...
安卓原生系统文件夹,安卓原生系... 你有没有发现,每次打开安卓手机,里面那些文件夹就像是一个个神秘的宝箱,里面藏着各种各样的宝贝?今天,...
基于安卓系统的游戏开发,从入门... 你有没有想过,为什么安卓手机上的游戏总是那么吸引人?是不是因为它们就像是你身边的好朋友,随时随地都能...
安卓系统怎样装驱动精灵,安卓系... 你那安卓设备是不是突然间有点儿不给力了?别急,今天就来手把手教你如何给安卓系统装上驱动精灵,让你的设...
如何本地安装安卓系统包,详细步... 你有没有想过,把安卓系统装在你的电脑上,是不是就像给电脑穿上了时尚的新衣?想象你可以在电脑上直接玩手...
安卓12卡刷系统教程,体验全新... 你有没有发现,你的安卓手机最近有点儿不给力了?运行速度慢得像蜗牛,是不是也想给它来个“换血大法”,让...
安卓系统无法打开swf文件,安... 最近是不是发现你的安卓手机有点儿不给力?打开SWF文件时,是不是总是出现“无法打开”的尴尬局面?别急...
鸿蒙系统依赖于安卓系统吗,独立... 你有没有想过,我们手机里的那个鸿蒙系统,它是不是真的完全独立于安卓系统呢?这个问题,估计不少手机控都...
适合安卓系统的图片软件,精选图... 手机里堆满了各种美美的照片,是不是觉得找起来有点头疼呢?别急,今天就来给你安利几款超级适合安卓系统的...
阴阳师安卓系统典藏,探寻阴阳师... 亲爱的阴阳师们,你是否在安卓系统上玩得如痴如醉,对那些精美的典藏式神们垂涎欲滴?今天,就让我带你深入...
安卓系统有碎片化缺点,系统优化... 你知道吗?在手机江湖里,安卓系统可是个响当当的大侠。它那开放、自由的个性,让无数手机厂商和开发者都为...
安卓4系统手机微信,功能解析与... 你有没有发现,现在市面上还有很多安卓4系统的手机在使用呢?尤其是那些喜欢微信的朋友们,这款手机简直就...
鸿蒙系统是安卓的盗版,从安卓“... 你知道吗?最近在科技圈里,关于鸿蒙系统的讨论可是热闹非凡呢!有人说是安卓的盗版,有人则认为这是华为的...
安卓系统怎么剪辑音乐,轻松打造... 你是不是也和我一样,手机里存了超多好听的歌,但是有时候想给它们来个变身,变成一段专属的旋律呢?别急,...
怎么把安卓手机系统变为pc系统... 你有没有想过,把你的安卓手机变成一台PC呢?听起来是不是有点酷炫?想象你可以在手机上玩电脑游戏,或者...
手机怎么装安卓11系统,手机安... 你有没有想过,让你的手机也来个“青春焕发”,升级一下系统呢?没错,就是安卓11系统!这个新系统不仅带...
安卓系统如何拼网络,构建高效连... 你有没有想过,你的安卓手机是怎么和网络“谈恋爱”的呢?没错,就是拼网络!今天,就让我带你一探究竟,看...
安卓系统怎么看小说,轻松畅享电... 你有没有发现,手机里装了那么多应用,最离不开的竟然是那个小小的小说阅读器?没错,就是安卓系统上的小说...