一、路由懒加载，实现打包时拆分app.js为多个

1. 当完成项目进行打包后npm run build，会把自己写的所有js代码放入【app.js】里；
   npm run serve/npm run dev开发运行时，则在内存中打包成app.js；
2. 当各个页面的js代码逻辑非常多时，会造成运行慢，卡
3. 此时，使用路由懒加载写法，打包时，可把app.js根据不同页面拆分成多个如1.js、2.js等等。
   开发运行时也会打包拆分成1.js。。。
   一般只在主页面上用此方法
   使用懒加载效果如下：

懒加载写法 router/index.js

/*【1】在4个子组件比较多的主页面上使用路由懒加载：
把Msite写成函数，当routes的component引用时它就是个函数，
不会立即去执行，只有打开对应页面才会执行*/
const Msite=()=> import('../pages/Msite/Msite.vue')
const Order=()=> import('../pages/Order/Order.vue')
const Profile=()=> import('../pages/Profile/Profile.vue')
const Search=()=> import('../pages/Search/Search.vue')

//把默认名Goods重命名为ShopGoods
import {default as ShopGoods} from '../pages/Shop/Goods/Goods.vue'


//使用路由插件
Vue.use(VueRouter)

export default new VueRouter({
	routes:[
		{
			path:'/msite',
			component:Msite, //【2】当routes的component引用时它就是个函数，不会立即去执行，只有打开对应页面才会执行
			meta:{
				showFooter:true
			}
		}
}

二、图片懒加载

1) Github使用文档:

https://github.com/hilongjw/vue-lazyload

2) 下载包

npm install --save vue-loader

3) 配置一般放在main.js页面

import VueLazyload from 'vue-lazyload' //懒加载库
import loading from './common/img/loading.gif' //加载中动图

Vue.use(VueLazyload, {
loading //网速慢时，显示加载中图片
})

使用：直接用v-lazy标签替换 :src标签即可

<img v-lazy="food.image">