vue项目优化

时间 2021-04-27

标签 html vue git npm 缓存大数据优化 code component router 栏目 HTML 繁體版

原文原文链接

1、组件按需加载

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

2、大数据处理

vxe-table（功能齐全）：https://xuliangzhan_admin.git...html

<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>

3、使用keep-alive

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

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

4、图片懒加载

安装地址：https://www.npmjs.com/package...git

main.jsnpm

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>

5、清除定时器

组件中写在setTimeout、setInterval在不用的时候清除掉，清除方式请参考：http://www.techshare100.com/a...大数据

6、vue3.x打包优化

请看这里：http://www.fenxianglu.cn/arti...优化

写到最后，欢迎关注做者：http://www.fenxianglu.cn/code