项目中做了哪些优化

1. v-if和v-show区分使用场景

   • (v-if是真正的条件渲染，切换过程中是销毁和重建的，v-show就相当于CSS中的display属性切换)

2. computed和watch区分使用场景

   • (computed是计算属性，依赖的属性值发生改变，下一次获取computed的值才会重新计算它的值，watch更多地是观察，)

3. 长列表性能优化

   • 有时候我们的组件是纯粹的数据展示，不会有改变，就不需要Vue劫持我们的数据。可以通过Object.freeze方法冻结一个对象，一旦被冻结的对象就不再被修改了

4. 事件的销毁

   • Vue组件销毁时，自动清理它与其他实例的连接，但仅限于组件本身事件，如果在JS内使用addEventListense等方法不会自动销毁，我们需要在组件中手动移除这些事件的监听，避免内存泄漏。

5. 图片资源的懒加载

   • 图片过多的页面，为了加速页面加载速度，我们可以等滚动到可视区域再去加载。在项目中可以使用vue-lazyload。然后在vue文件中将img标签的src改为v-lazy，图片的显示方式更改为懒加载显示

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

6. 路由懒加载(实现方式在(3.路由Vuex中))

   • Vue是单页面应用，会有很多路由引入，这样webpack打包之后的文件很大，当加载资源过多时，页面会出现白屏的现象，所以我们可以把不同路由对应的组件分割成不同的代码块，在路由被访问的时候才加载对应的组件。

7. 第三个插件按需引入

   • 借助babel-plugin-component。按需引入需要的组件，达到减少项目体积的目的。

8. 优化无限列表性能

   • 如果存在非常长或者无限滚动的列表，需要采用窗口化的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建dom节点的时间

9. 服务端渲染SSR/预渲染

   • 渲染的优点：

     • 更好的SEO

     • 更快的内容到达时间(首屏加载更快)