本文主要是介绍vue外卖二十五：优化：路由懒加载，实现打包时拆分app.js为多个、图片懒加载、，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、路由懒加载，实现打包时拆分app.js为多个
- 当完成项目进行打包后
npm run build，会把自己写的所有js代码放入【app.js】里；
npm run serve/npm run dev开发运行时，则在内存中打包成app.js；- 当各个页面的js代码逻辑非常多时，会造成运行慢，卡
- 此时，使用路由懒加载写法，打包时，可把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">
这篇关于vue外卖二十五：优化：路由懒加载，实现打包时拆分app.js为多个、图片懒加载、的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
