懒加载

1/vue路由懒加载
index.js
1）将正常加载代码–删除
// import Home from ‘@/components/Home/Home’ //主页面
// import Index from ‘@/components/Home/Index/Index’ //首页
2）routes里面的component改成：
component: resolve => require([’…/components/Home/Index/Index.vue’], resolve)//懒加载
以上实现路由懒加载
验证：
js按需加载，代表懒加载成功

2/组件懒加载
components: {
historyTab:resolve => {
require([’…/…/component/historyTab/historyTab.vue’],resolve)
},
},

3/全局懒加载
Vue.component(‘mideaHeader’, () => {
System.import(’./component/header/header.vue’)
})

4/图片懒加载
1）安装插件：
npm install vue-lazyload --save-dev
2）main.js引入插件：
import VueLazyLoad from ‘vue-lazyload’
Vue.use(VueLazyLoad,{
error:require(’./statics/site/imgs/erro.jpg’),
loading:require(’./statics/site/imgs/load.gif’)
})
3）vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

学习笔记