vue单页面打包文件大?首次加载慢?从7.5M到1.3M蜕变

栏目: 编程语言 · 发布时间: 6年前

内容简介:npm run build 文件过大打包生成文件:

npm run build 文件过大

打包生成文件:

vue单页面打包文件大?首次加载慢?从7.5M到1.3M蜕变

浏览器访问效果:

vue单页面打包文件大?首次加载慢?从7.5M到1.3M蜕变

第一步: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文件。

像这样:

vue单页面打包文件大?首次加载慢?从7.5M到1.3M蜕变

如何看是识别gzip与非gzip请求

gzip请求:

vue单页面打包文件大?首次加载慢?从7.5M到1.3M蜕变

非gzip请求:

vue单页面打包文件大?首次加载慢?从7.5M到1.3M蜕变

gzip与非gzip在响应头中区别就是Content-Encoding是否表明是gzip压缩格式。


以上所述就是小编给大家介绍的《vue单页面打包文件大?首次加载慢?从7.5M到1.3M蜕变》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

生态战略:设计未来企业新模式

生态战略:设计未来企业新模式

周文艺 / 机械工业出版社 / 2017-3 / 49.00

思想影响战略,战略决定组织。在充满高度不确定性的今天,企业要生存和发展,必须不断进行组织变革与进化,跨越不连续性的鸿沟。本书分析了大量互联网生态型企业的案例,从生态思维进化、生态战略构建和生态组织变革三个角度出发,全面阐述了企业的进化之路。 本书认为,生态是企业进化的核心思想,企业须重新定义增长模式,从封闭的企业链转向开放的价值网,不断创新文化、技术和连接,培育新物种,实现企业从技术生态位到......一起来看看 《生态战略:设计未来企业新模式》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具