vue 性能优化

83 阅读 0 评论 55 点赞

我是靠谱客的博主谦让烧鹅，最近开发中收集的这篇文章主要介绍vue 性能优化，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

编码阶段

尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-for 遍历避免同时使用 v-if
如果需要使用v-for给每项元素绑定事件时使用事件代理

采用keep-alive缓存组件

<template>
    <div id="app">
        <keep-alive>
            <router-view/>
        </keep-alive>
    </div>
</template>

key保证唯一

使用路由懒加载

const router = new VueRouter({
  routes:[
      {path:'/foo',component:()=>important('./Foo.vue')}
  ]
})

使用异步组件
防抖、节流

第三方模块按需导入

// 像element-ui这样的第三方组件库可以按需引入避免体积太大
	import Vue from 'vue'
	import {Button,Select} from 'element-ui';
	Vue.use(Button)
	Vue.use(Select)

长列表滚动到可视区域动态加载

// Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。
export default {
    data: () => ({
        users: {}
    }),
    async created() {
        const users = await axios.get("/api/users");
        this.users = Object.freeze(users);
    }
};
// 如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容
<recycle-scroller
    class="items"
    :items="items"
    :item-size="24"
>
    <template v-solt="{item}">
        <FetchItemView
            :item="item"
            @vote="voteItem(item)"
        />
    </template>
</recycle-scroller>
参考项目：vue-virtual-scroller、vue-virtual-scroll-list

图片按需加载

// 对于图片过多的页面，为了加速页面的加载速度，所以需要我们将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载
<img v-lazy="/static/img/1.png">
参考项目：vue-lazyload

事件的销毁

// Vue组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件
 created(){
     this.timer = setInterval(this.refresh,2000)
 }
 beforeDestroy(){
     clearInterval(this.timer)
 }

无状态的组件标记为函数式组件(适用于只是根据状态显示隐藏的)

<template functional>
   <div class=""cell>
        <div v-if="props.value" class="on"></div>
        <section v-esle class="off"></section>
    </div>
</template>
<script>
    export default{
        props:['value']
    }
</script>

SEO 优化

预渲染
服务端渲染SSR

打包优化

压缩代码

使用cdn加载第三方模块

// 导致在网速较慢或者服务器带宽有限的情况出现长时间的白屏
// 将 vue、vue-router、vuex、element-ui 和 axios 这五个库，全部改为通过 CDN 链接获取，在 index.html 里插入 相应链接。
<head>
 <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow" />
</head>
<body>
 <div id="app"></div>
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
 <!-- built files will be auto injected -->
</body>