Vue配置compression-webpack-plugin实现Gzip压缩

巨人与阿伟

已于 2024-04-07 15:02:02 修改

阅读量1.1k

点赞数 20

分类专栏：前端文章标签： vue.js webpack 前端

于 2024-04-07 14:57:39 首次发布

本文链接：https://blog.csdn.net/weixin_54122311/article/details/137464121

版权

本文主要介绍了如何解决Vue项目首屏加载缓慢的问题，通过配置compression-webpack-plugin实现Gzip压缩，以减小文件大小，提高网页加载速度。详细步骤包括安装插件、在vue.config.js中配置插件、测试压缩效果以及启用nginx的gzip功能。

摘要由CSDN通过智能技术生成

gzip简介 HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。

简单来说，gzip是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多。

那么客户端和服务器之间是如何通信来支持gzip的呢？通过下图我们可以很清晰的了解。

实际操作先在项目终端执行如下语句，安装compression-webpack-plugin

第一步引入插件

npm i compression-webpack-plugin@5.0.1 -D // 不能直接 install，否则版本过高，5.0.1 即可

注意插件与项目依赖的版本

测试：可以先跑一下项目看看有没有依赖冲突 npm run serve

第二步配置vue.config.js vue.config.js 配置插件compression-webpack-plugin

// 引用插件
c

关注