Vue

路由组件懒加载

{
  // 首页
  path: "/index",
  component: resolve=>require(["@/views/index"],resolve)
}

组件的合理缓存

<keep-alive></keep-alive>

v-if 和 v-show 选择调用

v-show 和 v-if 的区别是：v-if 是懒加载，当状态为 true 时才会加载，并且为 false 时不会占用布局空间；v-show 是无论状态是 true 或者是 false，都会进行渲染，并对布局占据空间对于在项目中，需要频繁调用，不需要权限的显示隐藏，可以选择使用 v-show，可以减少系统的切换开销。

为 item 设置唯一 key 值，

在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 vuejs 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff。

细分 vuejs 组件

在项目开发过程之中，第一版本把所有的组件的布局写在一个组件中，当数据变更时，由于组件代码比较庞大，vuejs 的数据驱动视图更新比较慢，造成渲染比较慢。造成比较差的体验效果。所以把组件细分，比如一个组件，可以把整个组件细分成轮播组件、列表组件、分页组件等。

减少 watch 的数据

当组件某个数据变更后需要对应的 state 进行变更，就需要对另外的组件进行 state 进行变更。可以使用 watch 监听相应的数据变更并绑定事件。当 watch 的数据比较小，性能消耗不明显。当数据变大，系统会出现卡顿，所以减少 watch 的数据。其它不同的组件的 state 双向绑定，可以采用事件中央总线或者 vuex 进行数据的变更操作。

内容类系统的图片资源按需加载

对于内容类系统的图片按需加载，如果出现图片加载比较多，可以先使用 v-lazy 之类的懒加载库或者绑定鼠标的 scroll 事件，滚动到可视区域先再对数据进行加载显示，减少系统加载的数据。

SSR(服务端渲染)

如果项目比较大，首屏无论怎么做优化，都出现闪屏或者一阵黑屏的情况。可以考虑使用 SSR(服务端渲染)，vuejs 官方文档提供 next.js 很好的服务端解决方案，但是局限性就是目前仅支持 Koa、express 等 Nodejs 的后台框架，需要 webpack 支持。目前自己了解的就是后端支持方面，vuejs 的后端渲染支持 php，其它的不太清楚。