vue3+vite开启gzip压缩以及Nginx配置gzip压缩

最新推荐文章于 2025-03-27 00:56:11 发布

飛灬

最新推荐文章于 2025-03-27 00:56:11 发布

阅读量4.6k

点赞数 5

文章标签： nginx 运维 vue

本文链接：https://blog.csdn.net/qq_38902230/article/details/132182707

版权

本文介绍了如何在Vite项目中使用vite-plugin-compression插件进行文件（如.js,.css等）的gzip压缩，并在Nginx中配置gzip以进一步减小文件体积。特别强调了gzip_varyon设置的重要性。

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

对vite + vue3 项目打包的时候进行 gzip 压缩

安装 vite-plugin-compression 插件

npm install vite-plugin-compression

vite.config.ts/js 中导入vite-plugin-compression插件

import viteCompression from 'vite-plugin-compression'

在 vite.config.ts/js 中的 plugins 中使用vite-plugin-compression插件即可

export default defineConfig({
	plugins: [
		viteCompression({
	      filter: /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i, // 需要压缩的文件
	      threshold: 1024, // 文件容量大于这个值进行压缩
	      algorithm: 'gzip', // 压缩方式
	      ext: 'gz', // 后缀名
	      deleteOriginFile: true, // 压缩后是否删除压缩源文件
    	})
	]
})

保存改变后进行打包, 文件体积明显减少

Nginx配置gzip压缩

在nginx.conf中的http里面加入一下配置，开启gzip压缩

    #开启gzip功能
    gzip on; 
    #开启gzip静态压缩功能
    gzip_static on; 
    #gzip缓存大小
    gzip_buffers 4 16k;
    #gzip http版本
    gzip_http_version 1.1;
    #gzip 压缩级别 1-10 
    gzip_comp_level 5;
    #gzip 压缩类型
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    # 是否在http header中添加Vary: Accept-Encoding，**一定要开启,不开启读取不到.gz结尾的压缩文件**
    gzip_vary on;