vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕
找到nginx多网站配置文件:类似 nginx/sites-available/www.baidu.com 参考页面: cnpm run build 文件过大打包生成文件: 浏览器访问效果: Nginx开启gzip找到nginx.config。关于gzip压缩代码: 配置完重启Nginx浏览器访问效果: 上面为数据流接收大小,下面为解压后实际大小。 识别gzip与非gzip请求gzip请求: 非gzip请求: gzip与非gzip在响应头中区别就是Content-Encoding是否表明是gzip压缩格式。 而上面通过接收数据与实际数据大小相比也能明显看出差异 webpack gzipvue项目中config/index.js 开启后cnpm run build会生成*.gz文件。 像这样: 上传到服务器,测试查看接受文件大小。 gzip相应539kb。并非加载app.........gz的 412kb 删除*.gz文件,依旧539kb。 莫非,webpack打包gzip文件毫无卵用?????? gzip_static 静态压缩经过一番百度。得一宝贝。gzip_static 什么东东呢?字面上意思就是:gzip静态。 卖个关子: 上面配置了。Nginx是可以开启gzip压缩,而且能够实现压缩效果。而它是如何工作的呢? 客户端发起请求 -》Nginx接收请求 -》Nginx加载文件进行gzip打包压缩成*.gz -》返回给浏览器 -》浏览器解压*.gz (应该是它干的,反正看不见) 也就是说,每次请求,Nginx都会进行压缩返回、压缩返回、压缩返回、 将会导致浪费大量CPU。 这么个大bug是谁设计的?如果请求量大,CPU会不会挂掉?//猜测 当然,并不会,gizp打包压缩后会临时缓存, 所以,能不消耗CPU就不消耗CPU。 废话太多,步入正题。放大招!! nginx.conf emmmmmmmm.....重启nginx OK。上图! before: after: 对比文件: so 。开启gzip_static后。流程就会变成
nginx的gzip压缩力度从1-9 。如果开启过大,CPU会严重浪费,而webpack压缩gzip默认是9.因此,打包压缩gzip静态资源是很有必要的所以,按需加载暂时不用考虑了
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |