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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。