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

news2024/11/23 9:38:29

一、图片懒加载

安装：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 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文件了。