浅谈vue项目可以从哪些方面进行优化
图片优化1、图片大小优化,部分图片使用WebP(需要考虑webp兼容性)
2、减少图片请求,使用雪碧图
页面性能优化图片或组件懒加载 使用vue-lazyload组件或其他一些组件 vue-lazyload地址: https://www.npmjs.com/package/vue-lazyload 图片懒加载:v-lazy或使用v-lazy-container包含一个图片组 组件懒加载 图片预加载快速显示图片 使用场景:在某个查看图片的组件,当不断翻看下一页的图片时,从服务端获取数据再展示图片会出现图片缓慢加载的情况,此时可以在展示新数据时候先预加载图片,图片加载完之后在,将图片填充到对应位置 三方插件懒加载(按需加载)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插件使用 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |