H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】vue项目优化

一、组件按需加载

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

二、大数据处理

vxe-table(功能齐全):https://xuliangzhan_admin.git…

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

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/a…

六、vue3.x打包优化

请看这里:http://www.fenxianglu.cn/arti…

写到最后,欢迎关注作者:http://www.fenxianglu.cn/

本文地址:H5W3 » 【前端技术】vue项目优化

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址