Vue项目优化

1.路由组件懒加载

// router/index.js文件中 改变引入方式 实现路由组件懒加载
const Msite = () => import('../pages/Msite/Msite.vue')
const Search = () => import('../pages/Search/Search.vue')
const Order = () => import('../pages/Order/Order.vue')
const Profile = () => import('../pages/Profile/Profile.vue')

// 此时的Msite等都是返回路由组件的函数，只有请求对应的路由路径时(第一次)才会执行此函数并加载路由组件

2.图片懒加载

下载

// 在main.js文件中引入并注册插件
import VueLazyload from 'vue-lazyload'
// 将一张loading图片加载进来
import loading from './common/img/loading.gif'

//生命使用
Vue.use(VueLazyload, { // 内部自定义一个指令lazy
	loading
})

// 在图片标签中使用 （Food组件）
<img v-lazy="food.image">

【注意】在真正的图片food.image加载出来之前，会显示loading.gif! 丰富用户体验

3.缓存路由组件对象

<!-- 好处: 复用路由组件对象, 复用内存中路由组件获取的后台数据 -->
<keep-alive>
	<router-view />
</keep-alive>