Vue2电商项目(八) 完结撒花：图片懒加载、路由懒加载、打包的map文件

一、图片懒加载

• 安装：npm i vue-lazyload@1.3 -s （弹幕建议按1.3版本）

• 引入

  // 引入懒加载的图片
  import hlw from '@/assets/hulu.jpg'
  // 引入插件
  import VueLazyload from 'vue-lazyload'
  // 引入插件
  Vue.use(VueLazyload, {
    // 懒加载默认的图片
    loading: hlw
  })
  

• 使用v-lazy
  以Search页面展示商品图片为例，当网速较慢，请求数据还会获取到时，商品图片默认显示的是hlw.jpg

  <!--<img :src="goods.defaultImg" />-->
  <img v-lazy="goods.defaultImg" />
  

博客推荐：Vue图片懒加载

二、路由懒加载

  当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

// 将
// import Home from '../pages/Home'
// 替换成
const HomeDetail = () => import('../pages/Home')

export default [
  // 首页
  {
    path: '/home',
    component: HomeDetail ,
     // 或者在路由定义中直接使用
    //component: () => import('../pages/Home')
    meta: { isShow: true }
  },
]

三、处理map文件

打包：npm run build
项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map文件就可以像未加密的代码一样，准确的输出是哪一行那一列有错。

打包如果不想要map文件(因为map文件占比较大)，可在vue.config.js配置：

重新打包就没有map文件了。