vue生成gzip压缩包部署到nginx的示例
更新时间：2022年12月06日 10:18:28 作者：喵喵扑
vue 生成gzip压缩包部署到nginx服务器，如果我们把web网站资源进行gzip压缩后进行传输给浏览器，这样就能加快网站资源的加载速度，这篇文章主要介绍了vue生成gzip压缩包部署到nginx,需要的朋友可以参考下
vue生成gzip压缩包部署到nginx
vue 生成 gzip 压缩包 部署到nginx服务器，加速网站打开速度。
gzip是GNUzip的缩写，gzip可以被浏览器自动识别并解压成原始文档。如果我们把web网站资源进行gzip压缩后进行传输给浏览器，这样就能加快网站资源的加载速度。
一、vue打包生成gzip包
# 先安装打包的插件 compression-webpack-plugin 6.1.1 版本，不要安装最新的，不能正常打包
yarn add compression-webpack-plugin@6.1.1 -D
# 配置 vue.config.js
module.exports = {
...
chainWebpack(config) {
...
config
.when(process.env.NODE_ENV !== 'development', config => {
...
config
.plugin('CompressionPlugin')
.use('compression-webpack-plugin', [{
test: /\.js$|\.css$|\.html$/, // gzip压缩规则
threshold: 10240, // 大于10K的数据会被压缩
algorithm: 'gzip', // 压缩方式
minRatio: 0.8 // 压缩比小于这个的才压缩
}])
.end()
})
}
}
二、生成压缩包
使用下面的命令生成vue的部署文件
vue-cli-service build
生成如下压缩包：
原本浏览器要加载 1011kb 的数据，打包后浏览器只需要加载 318kb 的数据，网站加载速度大幅度提升。
三、服务器开启gzip
我们在打包是生成2个同名的文件，但是请求时服务器应该返回哪一个文件呢，如果服务器返回了.gz格式的文件就达到效果，如果服务器依然返回请求的源文件，那就达不到我们的目的了。
如果我们使用的nginx作为服务器，我们需要在 http 下面配置开启 gzip 压缩：
http {
...
#开启gzip压缩
gzip_static on;
}四、验证是否生效
这是不开启压缩的效果：
这是开启压缩后的效果：
虽然浏览器显示的大小和实际大小有出入，不过已经达到我们想要的效果了。
到此这篇关于vue生成gzip压缩包部署到nginx的文章就介绍到这了,更多相关vue部署gzip压缩包到nginx内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Vue 浏览器本地存储,LocalStorage 和 SessionStorage 统称为 WebStorage，存储大小一般支持5mb左右，但是不同的浏览器也有区别，具体内容介绍跟随小编一起看看吧2022-04-04
这篇文章主要介绍了vue cli3 项目中如何使用axios发送post请求，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue项目如何监听localStorage或sessionStorage的变化
这篇文章主要介绍了vue 项目如何监听localStorage或sessionStorage的变化，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
Vue2的异步更新机制是基于JavaScript的事件循环机制实现的。nextTick方法则是在DOM更新后执行回调函数。本文详细介绍了Vue2的异步更新机制和nextTick原理，对于理解Vue2的渲染机制和优化性能有很大的帮助。2023-04-04
今天小编就为大家分享一篇axios向后台传递数组作为参数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue3中如何使用rem来控制字体大小问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
如何在Vue3和Vite项目中用SQLite数据库进行数据存储
SQLite是一种嵌入式关系型数据库管理系统,是一个零配置、无服务器的、自给自足的、事务性的SQL数据库引擎,这篇文章主要给大家介绍了关于如何在Vue3和Vite项目中用SQLite数据库进行数据存储的相关资料,需要的朋友可以参考下2024-03-03
本篇文章主要介绍了Vue-cli代理解决跨域问题，详细的介绍了Vue如何设置代理，具有一定参考价值，有兴趣的可以了解一下2017-09-09
Vue2+SpringBoot实现数据导出到csv文件并下载的使用示例
本文主要介绍了Vue2+SpringBoot实现数据导出到csv文件并下载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-10-10
这篇文章主要介绍了vue elementui form表单验证的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论