Vue项目如何开启gzip

 更新时间:2025年06月11日 16:48:30   作者:&活在当下&  
这篇文章主要介绍了Vue项目如何开启gzip的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

随着项目的迭代,项目的打包体积会越来越多,项目性能就会逐渐变差,这时候可以开启 gzip 进行性能优化,提升访问速度,解决页面白屏时间长的问题。

下面介绍一下 Vue 开启 gzip 的方法:

gzip 压缩的方式有两种

1、在服务端开启压缩,当浏览器发起请求时,服务端对传输资源进行实时压缩,然后返回给浏览器

2、 对 webpack 配置打包压缩,并在服务端加上支持 gizp 的配置,当浏览器请求时,服务端直接将资源返回给浏览器

两种方法的区别

  • 第一种是服务端进行实时压缩,对服务器的性能消耗较大
  • 第二种则是打包后的 dist 文件包体积比较大(因为包含 .gz 文件和源文件)

综上,两种方法混合用比较合适,在 webpack 打包时,配置只对超过一定体积的文件进行压缩,然后配置 nginx ,当浏览器发起请求时,服务端对 .gz 文件进行直接传输给浏览器,对源文件先进行实时压缩,在返回给浏览器。

第一种方法

直接在 nginx 服务端配置开启 gzip。

配置如下:

# 开启服务器实时gzip
  gzip on;
  
  # 开启静态gz文件返回
  gzip_static on;
  
  # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩
  gzip_min_length 1k;
  
  # 设置压缩所需要的缓冲区大小     
  gzip_buffers 32 4k;

# 设置gzip压缩针对的HTTP协议版本
  gzip_http_version 1.0;

  # gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
  gzip_comp_level 7;

  # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
  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 application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

  # 是否在http header中添加Vary: Accept-Encoding,建议开启
  gzip_vary on;

  # 禁用IE 6 gzip
  gzip_disable "MSIE [1-6]\.";

添加后重启 nginx ./nginx -s reload ,如下图,看到响应头中出现 Content-Encoding:gzip 表示开启成功

第二种方法

在 Vue 项目中,使用 webpack 来开启 gzip ,如下:

首先,安装 compression 插件

npm install compression-webpack-plugin

然后在 vue.config.js 中加上如下配置:

module.exports = {
  chainWebpack: config => {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    if (process.env.NODE_ENV === 'production') {
        config.plugin('CompressionPlugin').use(
        	new CompressionWebpackPlugin({
            	filename: '[path][base].gz[query]', // 压缩后的文件名(保持原文件名,后缀加.gz)
            	algorithm: 'gzip', // 使用gzip压缩
            	test: /\.js$|\.css$/, // 匹配文件名
            	threshold: 10240, // 对超过10k的数据压缩
            	minRatio: 1, // 压缩率小于1才会压缩
            	deleteOriginalAssets: false // 是否删除未压缩的源文件,谨慎设置,如果希望提供非gzip的资源,可不设置或者设置为false(比如删除打包后的gz后还可以加载到原始资源文件)
          })
        )
   	}
  }
}

打包后,文件中会出现 .gz 文件,如图:

最后检查一下 nginx 服务端配置是否支持 gzip ,如果不支持,则需加上如下配置:

    gzip on;
	gzip_static on;
	gzip_min_length  5k;
	gzip_buffers     4 16k;
	gzip_http_version 1.0;
	gzip_comp_level 7;
	gzip_types       text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
	gzip_vary on;

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue elementUI使用tabs与导航栏联动

    vue elementUI使用tabs与导航栏联动

    这篇文章主要为大家详细介绍了vue elementUI使用tabs与导航栏联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • vue3中实现异步组件的方法实例

    vue3中实现异步组件的方法实例

    前端开发经常遇到异步的问题,请求函数、链接库等,下面这篇文章主要给大家介绍了关于vue3中实现异步组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)

    这篇文章主要介绍了Vue-CLI项目-axios模块前后端交互的使用详解(类似ajax提交),本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 基于Vue3实现印章徽章组件的示例代码

    基于Vue3实现印章徽章组件的示例代码

    这篇文章主要介绍了如何利用vue3实现简单的印章徽章控件,文中通过示例代码讲解详细,需要的朋友们下面就跟随小编来一起学习学习吧
    2023-04-04
  • Vue+Electron打包桌面应用(超详细完整教程)

    Vue+Electron打包桌面应用(超详细完整教程)

    这篇文章主要介绍了Vue+Electron打包桌面应用超详细完整教程,在这大家要记住整个项目的json文件不能有注释,及时没报错也不行,否则运行命令时还是有问题,具体细节问题参考下本文详细讲解
    2024-02-02
  • vue如何根据url下载非同源文件

    vue如何根据url下载非同源文件

    我们在开发过程中,有时会遇到后端返回的文件地址和我们的网站不是同源的情况下,本文就介绍了vue如何根据url下载非同源文件,感兴趣的可以了解一下
    2021-06-06
  • vue3 api自动导入神器推荐

    vue3 api自动导入神器推荐

    在做vue3项目中时,每次使用都需要先进行引入,下面这篇文章主要给大家介绍了关于vue3 api自动导入的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • vue3子组件如何修改父组件传过来的props数据

    vue3子组件如何修改父组件传过来的props数据

    周所周知vue的props是单向数据流,可以从父组件中改变传往子组件的props,反之则不行,下面这篇文章主要给大家介绍了关于vue3子组件如何修改父组件传过来的props数据的相关资料,需要的朋友可以参考下
    2022-10-10
  • element-ui时间日期选择器限制选择范围的几种场景

    element-ui时间日期选择器限制选择范围的几种场景

    这篇文章主要给大家介绍了关于element-ui时间日期选择器限制选择范围的几种场景,一般在实际开发场景中我们需要对时间选择做一些限制,如不能选择今天之前的时间、不能选择今天以后的日期、限制日期不能大于开始日期等等,需要的朋友可以参考下
    2023-08-08
  • 谈谈我在vue-cli3中用预渲染遇到的坑

    谈谈我在vue-cli3中用预渲染遇到的坑

    这篇文章主要介绍了谈谈我在vue-cli3中用预渲染遇到的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论