扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
图片优化
成都创新互联长期为上1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为西平企业提供专业的网站建设、网站设计,西平网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
1、图片大小优化,部分图片使用WebP(需要考虑webp兼容性)
2、减少图片请求,使用雪碧图
页面性能优化
图片或组件懒加载
使用vue-lazyload组件或其他一些组件
vue-lazyload地址: https://www.npmjs.com/package/vue-lazyload
图片懒加载:v-lazy或使用v-lazy-container包含一个图片组
// 引入一张图片 // 引入一组图片
组件懒加载
Vue.use(VueLazyload, { lazyComponent: true });
图片预加载
快速显示图片
使用场景:在某个查看图片的组件,当不断翻看下一页的图片时,从服务端获取数据再展示图片会出现图片缓慢加载的情况,此时可以在展示新数据时候先预加载图片,图片加载完之后在,将图片填充到对应位置
三方插件懒加载(按需加载)
js文件一般是同步加载的,放在页面内会阻塞主要js文件加载。
使用场景:有的项目必须引入jquery等文件时,在组件内部引入这些文件一定程度会阻塞页面渲染,因而通过特定事件(点击或者弹窗)动态加载jquery等JS文件,可以使主页面快速显示出来。
异步加载页面,如何让组件之间不重合
加载多个vue组件时,同时组件是通过服务端数据渲染时,会出现多个组件先重合后分离的状况
三种方案
减少引入外部文件大小
项目引入部分ElementUI内容时,通过引入babel-plugin-component配置.babelrc文件,这样即可引入部分组件,从而减少组件的大小。
路由懒加载
但使用到vue-router时,webpack会将所有组件打包在一个js文件中,这样就导致这个文件非常大,从而会影响首页的加载,最好的方法就是将其他路由分别打包到不同js文件中,切换路由时再加载对应js文件。
resolve => require([URL], resolve), 支持性好
() => system.import(URL) , webpack2官网上已经声明将逐渐废除, 不推荐使用
() => import(URL), webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流