背景:昨天看了一篇前端课程,了解到压缩其实还有多种方式,除了gzip,还有br压缩,当然还有deflate, zstd,但是最后两个压缩我没有细看,目前看来br压缩压缩性能更好,压缩完的文件比gzip小很多。于是研究了一下怎么让项目开启br压缩。这里用br代替(brotli)
1、服务端配置:
让运维同学在ngnix上面去配置,我们自己的项目里面虽然也有ngnix默认的conf文件,但是运维并没有设置使用,所以,即使我们自己配置了也不会生效,还有一个原因,考虑到ngnix有的配置较为复杂,我们都只会简单的location配置、所以我们整体的ngnix的配置都是交给运维同学处理。
只要实现在请求标头上带上br的配置就可以。
2、vite-plugin-compression
在vite中配合插件使用,在vite.config.js文件中去配置,开启压缩。
打包后文件生成.br后缀的的的js文件
那么问题来了,在部署成功后,客户端就会向服务端去请求资源,那么.br文件浏览器怎么识别加载呢?
原来
1、服务器需要配置支持Brotli压缩,清切在请求时返回正确的.br文件,配置正确之后,浏览器会自动处理.br文件并解压缩。
2、确保在vite.config.js正确配置vite-plugin-compression插件
3、打包之后会产生br结尾的文件
4、检查,部署之后,去看请求的资源是否以.br文件返回,确实服务器支持Brotli压缩没。
所以我上面理解错了,这两个步骤应该是一起的。
我同事问我了一个问题,ngix是默认支持GZIP压缩吗?哇,我同事还给我提供了一篇文章,写的比我的好多了,请参考: 前端性能优化之ngnix启用和配置:
回到第一个问题,
ngix确实是默认支持GZIP压缩的,包括vite-plugin-compression插件也是默认gzip