问题:解决前端项目(vue) 首屏加载缓慢/刷新后加载缓慢
Vue配置compression-webpack-plugin实现Gzip压缩
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