前端性能优化 - gzip压缩资源

本文探讨了前端性能优化中的gzip压缩技术,通过实例分析了nginx和webpack配置gzip的过程。作者发现未正确配置nginx时,资源加载大小并未优化;在webpack中启用productionGzip并未如预期减少加载大小,可能是因为nginx仍然读取源文件进行压缩;同时,禁用productionSourceMap可以减小项目打包后的体积。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、举个小例子

图标文件,原图favicon.ico大小1.4KB,打包后dist文件夹里大小为1.12KB,启动本地服务初次加载时浏览器显示大小704B,启动nginx服务初次加载时浏览器显示大小1.4KB。
在这里插入图片描述
说明:
1、dist文件夹里大小为1.12KB,webpack的功劳,具体不知。
2、本地服务大小704B,webpack的功劳,具体不知。
3、nginx服务大小1.4KB,nginx获取的原图大小,因为没有正确配置压缩。

二、配置nginx压缩文件

nginx.conf文件需要在配置gzip_types后加上ico对应的文件类型image/x-icon

<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">

由上可知favicon.ico的类型为image/x-icon,在nginx.conf文件中gzip_types追加上对应类型image/x-icon即可。

gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-icon;

配置完后,再启动nginx服务初次加载时浏览器显示如下
在这里插入图片描述
至于为什么比本地服务的文件还要大,是因为nginx的压缩率设置问题,具体配置nginx.conf此段代码

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
# gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,值大于2的时候并不明显,建议2就可以了
gzip_comp_level 2;
# 进行压缩的文件类型 值可以在 mime.types 文件中找到
# 不压缩图片 image/jpeg image/gif image/png 压缩反而更大
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/x-icon;
# 是否在http header中添加Vary: Accept-Encoding
gzip_vary off;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

此处需要注意,将 image/jpeg image/gif image/png 从gzip_types中移除,因为越压缩越大……

三、关于配置webpack的productionGzip

conf/index.js文件中

// npm install --save-dev compression-webpack-plugin
productionGzip: false,

若要开启压缩,需要先安装插件,于是执行上面的语句安装完后,将productionGzip: false,改为productionGzip: true,然后打包代码npm run build时报错。
随手百度很多人说是版本问题,于是照做卸载后重新安装低版本。

npm uninstall --save-dev compression-webpack-plugin

npm install --save-dev compression-webpack-plugin@1.1.12

再次打包,浏览器访问服务正常,但是通过F12查看初次加载时的文件大小和productionGzip: false,时没差。
查看dist文件夹确实有对应的gzip压缩文件,但是nginx好像还是读取的源文件自己进行的压缩。
为什么呢???

四、关于配置webpack的productionSourceMap

productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 减小打包体积

字面翻译是资源定位的意思。
不配置时默认是true,当配置成false后,肉眼可见项目打包后体积变小了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值