create-react-app 打包开启 gzip 压缩

网友投稿 1095 2022-11-22

create-react-app 打包开启 gzip 压缩

create-react-app 打包开启 gzip 压缩

查看有哪些版本

npm view compression-webpack-plugin versions

安装旧版本:

yarn add compression-webpack-plugin@5

修改webpack.config.js文件:

const CompressionPlugin = require('compression-webpack-plugin')const isGzip = process.env.GENERATE_GZIP_FILE === 'true'plugins: [ // ... isEnvProduction && isGzip && new CompressionPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: /\.js$|\.css$/, threshold: 10240, // 对超过10k的数据进行压缩 minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理 })]

node开启gzip:​​npm install compression

var compression = require('compression')var express = require('express') var app = express()app.use(compression({ filter: shouldCompress })) function shouldCompress (req, res) { if (req.headers['x-no-compression']) { // don't compress responses with this request header return false } // fallback to standard filter function return compression.filter(req, res)}

基本原理

浏览器请求资源文件时会自动带一个Accept-Encoding的请求头告诉服务器支持的压缩编码类型服务器配置开启gzip选项:接收客户端资源文件请求,查看请求头Content-encoding支持的压缩编码格式,如果是包含gzip那么 在每次响应资源请求之前进行gzip编码压缩后再响应返回资源文件(在响应头会带上Content-encoding: gzip)浏览器接收到响应后查看请求头是否带有Content-encoding:gzip,如果有进行对返回的资源文件进行解压缩然后再进行解析渲染

注意点

低版本浏览器兼容性,服务器可以设置一些忽略规则忽略为浏览器媒体文件无需开启:图片、音乐和视频大多数都已压缩过了,HTML,CSS AND JAVARSCRIPTCPU负载:压缩文件耗费CPU(服务器需要压缩文件、浏览器解压文件)

webpack优化

如果你使用了webpack,那么可以借助CompressionWebpackPlugin插件来提前对文件进行Gzip压缩这样服务器查找到有与源文件同名的.gz文件就会直接读取,不会主动压缩,降低cpu负载,优化了服务器性能

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Vue.js 3.0 的 Suspense组件
下一篇:OpenCV实现普通阈值
相关文章

 发表评论

暂时没有评论,来抢沙发吧~