怎么做淘宝客优惠劵网站,建设银行网站打不开别的网站可以用吗,pinterest wordpress,宁波seo网络推广代理公司解决大文件问题#xff0c;目前发现整个项目打包的出来的文件过大
1.如图一、图二可以看到在Stat Parsed Gzip下文件的大小相差很大#xff0c;目前从图三中可以看到两个属性productionSourceMap、ProductionGzip#xff0c;productionSourceMap为true的时候会生成一些map文…解决大文件问题目前发现整个项目打包的出来的文件过大
1.如图一、图二可以看到在Stat Parsed Gzip下文件的大小相差很大目前从图三中可以看到两个属性productionSourceMap、ProductionGzipproductionSourceMap为true的时候会生成一些map文件(只是方便看源码)这样会导致额外的文件代码的内容也被暴露所以应该设置为false减少额外文件产生另外打包的应该开启Gzip压缩目前看到ProductionGzip为false可以设置为true服务器也需要gzip模式
2.如图一、图二可以看到一些大文件例如echarts、jquery、vux等一些大文件例如echarts我们可以在线定制自己需要的模块通过这样减少文件体积另外一些文件如果可以从cdn引入的也可以这么去做如果可以按需加载的建议都按需加载例如vux 图一 图二 图三 图四 图片懒加载
1.滚动到特定位置才进行图片的加载这样可以减少页面初始化的时候一次性加载完所有的资源导致页面响应过慢先将img标签的src链接设为同一张图片比如空白图片然后给img标签设置自定义属性比如 data-src然后将真正的图片地址存储在data-src中当JS监听到该图片元素进入可视窗口时将自定义属性中的地址存储到src属性中达到懒加载的效果
缓存路由组件路由懒加载 1.如图五目前项目有些组件已经进行了缓存对于一些不经常改动或组件比较厚重的页面可以使用keepalive所有路由都进行了懒加载以后如果新增路由组件也是如此 图五 静态图片
1.例如assets里面的图片文件可以对图片压缩还有就是如果在满足条件的情况下图片大小可以小的话建议使用小图 2.使用css splite雪碧图多张小图标融合在一张图上减少http请求通过background的position属性实现 3.可以内嵌图片base64
骨架屏
1.可以参考移动端框架Vant uihttps://youzan.github.io/vant/#/zh-CN/skeleton参考配置地址https://www.jianshu.com/p/eacac700630e如图六所示骨架屏可以说是一种从视觉上去优化用户体验相比于loading骨架屏是类似于页面完全加载时的样式比loading的体验更好
图六
缓存数据减少发起http请求例如接口
1.对于如果有一些接口例如一些配置信息等如果更新不频繁或者是只需要加载一次那种的可以把接口的数据缓存下来下次进入页面不再请求接口 2.前端缓存数据例如购物车前端可以做本地购物车可以做些简单的缓存例如使用localStorage、sesstionStorage复杂的使用indexDB
线上环境去掉console、注释等避免无效代码 如图七所示诚选打包生产环境时并没有配置剔除注释、console这些应该类似图八对UglifyJsPlugin进行配置减少不必要的代码 图七 图八 列表优化
目前查看一些列表页例如图九使用的是vux框架的scroller组件但是目前该组件已经弃用并且不在维护存在性能问题https://doc.vux.li/zh-CN/components/scroller.html 并且页面在整体滚动后导致scroller区域滚动卡顿或无法滚动的问题。 1.分类点击响应缓慢因为使用的是click事件而click事件有300ms的延迟解决的方案可以使用fastclick库 2.滚动的问题目前尝试使用android和ios进行测试发现苹果机页面整体可以滑动会导致滚动卡顿的问题android整体基本没问题所以建议是关闭webview上的交互另外一个替换方案就是如vux官网所说使用第三方的滑动插件例如better-scroller、vant的List组件 图九 图十
