Vue 项目优化

看了这篇文章决定把它记录下来
它分了以下三个方面去优化Vue 项目

• Vue 代码层面的优化；
• webpack 配置层面的优化；
• 基础的 Web 技术层面的优化。

一、 Vue 代码层面的优化

1.1、v-if 和 v-show 的使用场景

v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truthy 的时候被渲染。

v-show 与v-if 不同之处在于它始终会被渲染并保留在DOM中，v-show只是简单地切换元素的CSS属性 display。

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；它有更高的切换开销。
因此，如果需要非常频繁地切换，使用v-show较好，否则使用v-if。

1.2、 computed 和 watch 区分使用场景

模板内表达式非常便利，但是如果放入太多逻辑会让模板国中且难以维护。
computed： 计算属性，当返回的数据需要依赖data 里的数据时，使用computed，相比于methods，computed 依赖的值不发生变化都不会重新计算而是使用缓存，但methods 总是会执行函数。
watch：侦听属性，当需要在数据变化时执行异步或开销较大时的操作时，使用watch

1.3、 v-for 遍历必须为item 添加key，且避免同时使用v-if

建议尽可能地在使用v-for 是提供key attribute，除非遍历内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

key attribute 主要用在Vue 的虚拟DOM算法，在新旧nodes 对比时辨识VNodes。如果不使用key，Vue 会使用一种最大限度减少动态元素并且尽可能地尝试就地修改/复用相同类型元素的算噶。而使用key 时，它会基于key的变化重新排列元素顺序，并且会移除key 不存在的元素。

不推荐同一元素上使用v-if 和 v-for
处于同一节点时，v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响进度，尤其是当之需要渲染很小一部分的时候，有必要时应换成computed 属性。
推荐：

<ul>
   <li
	v-for="user in activeUsers"
	:key="user.id">
	{{ user.name }}
  </li>
</ul>
computed: {
  activeUsers: function () {
     return this.users.filter(function (user) {
	  return user.isActive
      })
    }
}

不推荐：

<ul>
  <li
      v-for="user in users"
      v-if="user.isActive"
      :key="user.id">
      {{ user.name }}
  </li>
</ul>

1.4、长列表性能优化

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

1.5、 事件销毁

Vue 组件销毁时，会自动清理它与其他链接的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。
如果在js 内使用addEventListener 等方式是不会自动销毁的，需要在组件销毁时自动移除这些事件的监听，以免造成内存泄漏，如：

created() {
  addEventListener('click', this.click, false)
},
beforeDestroy() {
  removeEventListener('click', this.click, false)
}

1.6、图片资源懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候需要将页面内未出现在可视区域内的图片不做加载，等滚动到可视区域后再去加载，这样对于页面加载性能上会有很大的提升，也提高了用户体验。在项目中可以使用Vue 的 vue-lazyload 插件：
（1）安装插件

npm install vue-lazyload --save-dev

（2）在入口文件main.js 中引入

import VueLazyload from 'vue-lazyload'

直接use 或者添加自定义选项

Vue.use(VueLazyload)

添加自定义选项

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})

（3）在vue 文件中将img 标签的src 属性修改为 v-lazy

<img v-lazy="/static/img/1.png">

1.7、路由懒加载

Vue 是单页面应用，当打包构建应用时，JavaScript 包会变得非常庞大，影响页面加载，如果把不同路由对应的组件分割成 不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

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

1.8、第三方插件的按需引入

以element ui 为例，
构建项目时选择按需导入
然后在main.js 中使用

import Vue from 'vue';
import { Button, Select } from 'element-ui';

 Vue.use(Button)
 Vue.use(Select)

1.9 、 优化无限列表性能

如果你的应用存在非常长或者无限滚动的列表，那么需要采用 窗口化 的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom 节点的时间。 你可以参考以下开源项目 vue-virtual-scroll-list 和 vue-virtual-scroller 来优化这种无限列表的场景的。

1.10、服务端渲染SSR or 预渲染

服务端渲染是指Vue 在客户端将标签渲染成整个html 片段的工作在服务端完成，服务端形成的html 片段直接返回在客户端这个过程叫做服务端渲染。
优点：

• 更好的 SEO： 因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在SPA 中是抓取不到页面通过 Ajax 获取到的内容；而 SSR是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面；
• 更快的内容到达时间（首屏加载更快）： SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间；
  具体实现参考Vue SSR 踩坑之旅