vue项目性能优化
一、代码层优化
1. v-if和v-show使用场景
v-if是通过控制dom节点的存在与否来控制元素的显隐；
v-show不管初始条件是什么，元素总是会被渲染，并且是通过设置DOM元素的display样式，block为显示，none为隐藏；
v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show则适用于需要非常频繁切换条件的场景。
2. computed和watch
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：
- 当我们需要进行数值计算，并且依赖于其它数据时，应该使用
computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算； - 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用
watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
3. v-for遍历必须为item添加key，避免同事使用v-if
当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。
v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。
4. 长列表性能优化
Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，可以通过 Object.freeze方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。
5. 事件的销毁
Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。
如果在 js 内使用 addEventListener 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如：
created() {
addEventListener('click', this.click, false)
},
beforeDestroy() {
removeEventListener('click', this.click, false)
}
6. 图片资源懒加载
使用 Vue 的 vue-lazyload 插件：
在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：
<img v-lazy="/static/img/1.png">
7. 路由懒加载
Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。
8. 第三方插件的按需引入
借助 babel-plugin-component ，可以只引入需要的组件，以达到减小项目体积的目的。
9. 优化无限列表性能
如果你的应用存在非常长或者无限滚动的列表，那么需要采用 窗口化 的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建 dom 节点的时间。
10. 服务端渲染 SSR or 预渲染
服务端渲染是指 Vue 在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的 html 片段直接返回给客户端这个过程就叫做服务端渲染。
（1）服务端渲染的优点：
- 更好的 SEO
- 首屏加载更快
（2）服务端渲染的缺点：
- 更多的开发条件限制： 例如服务端渲染只支持 beforCreate 和 created 两个钩子函数
- 更多的服务器负载
二、webpack层优化
1. webpack对图片压缩
在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为base64 格式，其余的不做操作。所以对有些较大的图片资源，我们可以用 image-webpack-loader来压缩图片
2. 提取公共代码
如果项目中没有去将每个页面的第三方库和公共模块提取出来，则项目会存在以下问题：
- 相同的资源被重复加载，浪费用户的流量和服务器的成本。
- 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。
所以我们需要将多个页面的公共代码抽离成单独的文件，来优化以上问题 。
3. 提取组件的 CSS
将所有组件的 CSS 提取到同一个文件可以避免"页面闪烁"，也会让 CSS 更好地进行压缩和缓存。
4. 优化 SourceMap
开发环境推荐： cheap-module-eval-source-map
生产环境推荐： cheap-module-source-map
三、基础的Web技术优化
1. gzip压缩
2. 浏览器缓存
3. CDN的使用
浏览器从服务器上下载 CSS、js 和图片等文件时都要和服务器连接，而大部分服务器的带宽有限，如果超过限制，网页就半天反应不过来。
而 CDN 可以通过不同的域名来加载文件，从而使下载文件的并发连接数大大增加，且CDN 具有更好的可用性，更低的网络延迟和丢包率 。
4. 使用 Chrome Performance 查找性能瓶颈
Chrome 的 Performance 面板可以录制一段时间内的 js 执行细节及时间。使用 Chrome 开发者工具分析页面性能的步骤如下。
- 打开 Chrome 开发者工具，切换到 Performance 面板
- 点击 Record 开始录制
- 刷新页面或展开某个节点
- 点击 Stop 停止录制
