内容简介:npm run build 文件过大打包生成文件:
npm run build 文件过大
打包生成文件:
浏览器访问效果:
第一步:Nginx开启gzip (配置完切记重启nginx)
后台配置nginx.config。关于gzip压缩代码:
http {
gzip on; #开启或关闭gzip on off
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 100k; #gzip压缩最小文件大小,超出进行压缩(自行调节)
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 3; #压缩级别:1-10,数字越大压缩的越好,时间也越长
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型
gzip_vary off; #跟Squid等缓存服务有关,on的话会在Header里增加 "Vary: Accept-Encoding"
}
第二部:vue项目中config/index.js
productionGzip: true, //是否开启gizp压缩
productionGzipExtensions: ['js', 'css'],
开启后cnpm run build 会生成*.gz文件。
像这样:
如何看是识别gzip与非gzip请求
gzip请求:
非gzip请求:
gzip与非gzip在响应头中区别就是Content-Encoding是否表明是gzip压缩格式。
以上所述就是小编给大家介绍的《vue单页面打包文件大?首次加载慢?从7.5M到1.3M蜕变》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 平庸前端码农之蜕变 — AST
- 进击的 Java,云原生时代的蜕变
- 推荐书单 3.0:软件工程师蜕变之路
- 转行金融策略数据分析师:从萌新到职场老手的蜕变之旅
- 中国IT服务运营大会 ——全面开启“从IT运维到IT运营”的蜕变
- 从“IT运维到IT运营”的蜕变:中国IT服务工具图谱将首度亮相
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。