前端性能优化之gzip压缩(压缩js、css、HTML，千万不能压缩图片！)

gzip主要用来压缩html,css,javascript等静态文本文件，gzip 压缩的比率通常在3~10 倍之间，压缩后的体积能达到只有原本的30%左右，这样就能大大节省服务器的网络带宽和大大提升浏览器的浏览速度，如果项目够大，这个节省的时间就非常可观了！废话不多说上步骤：

1、安装插件

npm install compression-webpack-plugin -D

2、在vue.config.js文件里添加以下代码

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction= process.env.NODE_ENV === 'production'
module.exports = {//开启gzipconfigureWebpack: config => {if (isProduction) {// 配置webpack 压缩config.plugins.push(new CompressionWebpackPlugin({test: /\.js$|\.html$|\.css$/,// 超过4kb压缩threshold: 4096}))}}
}

3、打包，可以看到打包后dist里的js、css 文件里面多了.gz后缀的文件，部署到服务器之后，让后端工程师配置开启gzip

补充：如果遇到打包报一下错误，是因为npm install compression-webpack-plugin -D 命令行安装的是最新版本，将版本降到 5.0.0 就不报错了（我自己是这样处理的，降版本后就可以正常打包）。

npm install compression-webpack-plugin@5.0.0 -D

4、现在就配置完了，去查验一下是否成功，打开浏览器按F12，network 在表头鼠标右键，勾选response.headers里的Content-Encoding,就可以看到从服务器请求回来的资源是否是压缩的

5、对比下开启gzip前后，可以明显看到js/css文件体积小了很多，加载时间也缩短了很多

注意：图片不建议采取gzip压缩，因为会图片本身就压缩过的，再采用 gzip只会适得其反，图片体积反增不减！

开启gzip压缩可以有效减缓带宽压力，但也会增加服务器计算量，如果带宽压力大而服务器配置hold的住，还是比较建议开启gzip的！

ps：简单记录，如有不恰当之处，欢迎指正！

//2021.01.28 补充打包报错，版本兼容问题处理

前端性能优化之gzip压缩(压缩js、css、HTML，千万不能压缩图片！)相关推荐

前端性能优化：使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
前端性能优化之gzip
gzip是GNUzip的缩写,它是一个GNU自由软件的文件压缩程序.它最早由Jean-loup Gailly和Mark Adler创建,用于UNⅨ系统的文件压缩.我们在Linux中经常会用到后缀为.g ...
前端性能优化之 gzip+cache-control
刚刚在Node.js环境下使用gzippo模块进行了测试. 使用gzip的压缩率惊人的好,达到了50%以上. 再加上express的staticCache,配合cache-control max-ag ...
前端性能优化之渲染优化
1.知识体系 1.1从URL输入到页面加载打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?现在带大家来看看流程. 首先我们需要通过 DNS(域名解析系统)将 U ...
【前端性能】常见前端性能优化
常见性能优化前言一.图片优化 1.雪碧图(图片精灵) 2.图片压缩 3.字体图标代替图片 4.webp图片二.DOM优化 1.缓存DOM节点查找的结果 2.防抖和节流 3.事件代理 4.减少合并 ...
前端性能优化--合并压缩js，减少http请求次数
在我之前写的性能优化中,推荐大家使用雪碧图,压缩图片大小是一个方面,还有一个比较重要的方面就是,将图片放到一起了,降低了http的请求次数.今天这里我主要介绍大家在网站发布的时候,可以利用一些在线的合 ...
html压缩原理,webpack--前端性能优化与Gzip原理
目录前言前不久看过掘金小册<前端性能优化原理与实践>,受益匪浅."我深感性能优化实在是前端知识树中特别的一环--当你需要学习前端框架时,文档和源码几乎可以告诉你所有问题的答案 ...
【前端性能优化实践】手把手教你实现webpack图片压缩插件
前言我想写一个系列:前端性能优化实践方案.网上虽然一搜一大把这样的文章,但大多缺乏体系化.也有很多讲性能优化的书籍,但其实想照着书上的知识进行实践,还是挺难的一件事. 这是该系列的第一篇文章由于自 ...
前端服务器获取js文件偶尔慢_我所认识的前端性能优化
现象: 用户体验差网页太卡打不开(卡.慢) 服务器带宽流量(成本) 服务器压力从哪处理:各处的缓存地址缓存减少DNS的解析请求.预解析DNS(不是"解析DNS") TCP缓 ...

前端性能优化之gzip压缩(压缩js、css、HTML，千万不能压缩图片！)

前端性能优化之gzip压缩(压缩js、css、HTML，千万不能压缩图片！)相关推荐

最新文章

热门文章