时间:2021-05-26
最近做了一个网站,uidea,是用来辅助独立开发者做一些 UI 设计的,当时只管开发,等部署完以后,发现访问速度堪忧
毕竟是个小水管服务器,相比提高带宽,还是先看看代码上能不能优化一下,性价比更高
这个是优化前的包大小,这家伙都上 1.72 M 了,小水管加载时间直接往 3s 以上走了,臣妾扛不住啊
这必须得优化一下,优化前得大致定一下目标,目标又需要指标来衡量,所以定了两个指标:
为什么定这两个目标呢?首先页面加载时间是最终要解决的问题,那页面加载时间初步来看,影响因素有两个,网络和包大小,网络暂时缺钱没法升级,所以主要优化就集中在包大小上
首先要定义什么是包大小,我这里主要指入口包大小,对应 Vue 就是 app.js 和 app.css,入口加载完页面至少可以展示了
一方面 vue-cli-service 建议不超过 244K,另一方面就是找对标,看看类似的网站包大小多少,那我们也有个参照,我选择的是 materialpalette,看了下他的包大小大概在 150k 左右,我的功能更复杂一些,所以取了两者中间的 200K 作为目标
这里为什么要讲目标呢?因为目标其实是很重要的,老话也说有的放矢,没有目标,那执行的过程中很容易半途而废,或者只前进半步就终止了
拿谈恋爱来说,如果你的目标是找个女朋友,那大概率找不到,但是如果你的目标是追到某个确定的女生(比如张三)做女朋友,那成功的概率就大大增加了,因为你可以去针对这个女生去做针对性的准备
目标定了,然后就是定方案
虽然咱第一次做 Web 的优化,但是之前有过安卓包大小优化的经验呀,道理总是相通的,所以第一时间想了下面几个策略
1 - 3 三个优化方案是首先想到的,然后网上搜了下 Vue 对应的优化策略,又增加了后面两个
还有一些其他方案,比如路由懒加载,但是因为这个网站主要内容都集中在首页,所以这个就没考虑了(好东西虽多,但因地制宜最好)
所以一共定了 5 个优化策略,下面就开干
代码混淆就不多说了,一方面节省包大小,一方面还能增加一些反编译的难度,直接网上搜了 Vue 混淆配置(毕竟要站在巨人肩膀上),试了下确实好使,配置如下
这一步也容易做,资源全部都放到阿里云 oss 上,几分钟搞定
这一步花了不少时间,因为开发的时候图省事,很多库直接 github 上一搜,yarn add 引入就完事了,现在需要细细的再拆分一下
在打包命令后面加 --report 看一下打包的状态
首先是去掉 ElementUi(gzip 压缩后大约 158k),开发的时候 ElementUi 和 Vuetify 混用了,其实只留一个 Vuetify 就够了,然后对界面做一些小小的改造就完成了
然后是 lodash,只用到了其中几个方法,但是他的整个体积不小,gzip 压缩后大概 25k,于是找了 lodash 源码,打算把用到的几个方法抽出来,但是 lodash 代码嵌套、引用太深了,不太抽,干脆直接干掉这个库,找了几个更纯粹的实现做了替换,主要时间花在了读 lodash 源码上
再然后就是 vuescroll,在实现滚动条样式自定义的时候,偷懒直接用了这个库,发现这个库体积还是不小的,gzip 压缩后将近 20k,直接干掉,自己写一下样式吧(这件事告诉我们,现在偷的懒,以后会以别的方式还回来的 0_0)
这样就干掉了几个大头库
这个是网上找的解决方案,直接在 vue.config.js 里加点配置,然后 nginx 里也需要做一下对应的配置
这样打包以后,会生成 .gz 文件,nginx 会自动使用 .gz 文件
这里主要是处理 Vuetify 这个库,毕竟 gzip 以后也有将近 50k 的大小,放到 cdn 上会快一些
首先是打包配置中去掉 Vuetify
然后在 index.html 里手动加载 vuetify css 和 js
这里其实有一些更好的方式,可以通过 webpack 参数传给 index.html,通过 ejs 引入,现在比较简单,这里就没做了
通过上面几个策略,最终包大小从 1.72 M 优化到 94k
总体看来,优化效果是明显的,但是还有后续可以做的事情:
可以做的事情还很多,有时候做一件事,达成目标并没有结束,维持目标也是需要考虑的
到此这篇关于Vue包大小优化的实现(从1.72M到94K)的文章就介绍到这了,更多相关Vue包大小优化内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载。那么,怎么优化呢?1.组件按需加载
个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能:环境:1.JDK1.72.maven3.3.93.Tomcat7第一步:导入相关jar包:
如下所示:classbcolors:HEADER='\033[95m'OKBLUE='\033[94m'OKGREEN='\033[92m'WARNING='\
近日将论坛从VBB2升级到VBB3,将上传附件大小设置为2M,可每次上传超过500K的附件都会出错,而之前使用VBB2时却正常。 仔细检查php.ini,
前言今日头条iOS端从2016年起就关注到了安装包大小的问题,并启动了包大小优化。2017年,我们将当时的经验发表为技术文章《干货|今日头条iOS端安装包大小优