Vue项目做的优化

1. 加载方面

1、路由懒加载

Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。
路由懒加载：

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

2. 缓存方面

1. 利用keep-alive结合导航守卫实现页面缓存
   有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

项目实践

1.更改App.vue

<div id="app" class='wrapper'><keep-alive><!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

2.在路由中设置keepAlive

{path: 'list',name: 'itemList', // 商品管理component (resolve) {require(['@/pages/item/list'], resolve)},meta: {keepAlive: true,title: '商品管理'}
}

3 防抖和节流

函数节流和函数防抖都是在限制被触发函数的执行次数，以解决函数触发频率过高导致浏览器响应速度跟不上出现的卡顿、延迟现象，这也就是前端的性能优化。

相同点：都是用于前端性能优化，改善用户体验

思想不同：

防抖：在多次触发中(还没执行)，只执行最后一个触发。
节流：在一段时间内，只能执行一次。

4 图片懒加载–使用vue-lazyload插件

插件下载：https://github.com/hilongjw/vue-lazyload

使用步骤：其实这个插件做简单使用的话是很简单的，按下边的实例即可。

（1） 安装插件：

npm install vue-lazyload --save-dev

（2） main.js引入插件(需要将error.png、loading.png放到static/img目录下)

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{error:'./static/img/error.png',  // 图片加载失败时显示的图片loading:'./static/img/loading.png' // 图片加载中显示的图片
})

（3） vue文件中将需要懒加载的图片绑定v-bind:src 修改为v-lazy

<img class="image" v-lazy="imgUrl"/>

5第三方插件的按需引入

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库为例：

（1）首先，安装 babel-plugin-component ：

 npm install babel-plugin-component -D

（2）然后，将 .babelrc 修改为：

 {"presets": [["es2015", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]}（3）在 main.js 中引入部分组件：import Vue from 'vue';import { Button, Select } from 'element-ui';Vue.use(Button)Vue.use(Select)

6、长列表性能优化

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);}
};

总结
优化是可以解决部分性能问题，实际开发细节很多，总之按着规范写代码，团队的编码风格尽量统一，处理细节上多加思考，大部分性能问题都能迎刃而解。