vue项目优化

一、组件按需加载

component: () => import('@/components/login')

二、大数据处理

vxe-table（功能齐全）：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/basic

<vxe-table :data="tableData">
  <vxe-table-column type="index" title="序号" width="80"></vxe-table-column>
  <vxe-table-column field="name" title="名字"></vxe-table-column>
  <vxe-table-column field="sex" title="性别"></vxe-table-column>
  <vxe-table-column field="address" title="地址"></vxe-table-column>
</vxe-table>

三、使用keep-alive

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<keep-alive>
  <router-view/>
</keep-alive>

四、图片懒加载

安装地址：https://www.npmjs.com/package/vue-lazyload

main.js

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

template

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

五、清除定时器

组件中写在setTimeout、setInterval在不用的时候清除掉，清除方式请参考：http://www.techshare100.com/article?id=158

六、vue3.x打包优化

请看这里：http://www.techshare100.com/article?id=145

写到最后，欢迎关注作者：http://www.techshare100.com/