一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。
对首屏加载实现优化
vue路由的懒加载
{
path: '/',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ './views/home/index.vue'),
meta: { isShowHead: true }
}
- 开启
gzip压缩
开启 gzip 就是一种压缩技术，前端需要提供压缩包，然后在服务器开启压缩，文件在服务器压缩后传给浏览器，浏览器解压后进行再进行解析。
vue组件尽量不要全局引入
使用重复率高的模块尽量封装成组件，包括布局的封装，按钮，表单，提示框，弹出框等，封装的组件只处理类似业务，复用率越高越好
- 区分
computed和watch使用场景
computed：是计算属性，依赖与其它的属性值，并且 computed 的值是有缓存，当它依赖的属性值发生改变，下一次获取 computed 的值的时候就会重新计算 computed 的值。假如我们需要进行数值计算，并依赖其它数据时，就应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都需要重新计算；
watch：类似于数据的监听回调 ，当监听的数据变化时都会执行回调进行后续操作；当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
- 区分
v-if和v-show使用场景
v-if 通常用于运行时很少改变条件中，不需要频繁切换条件的场景；v-show 通常用于需要非常频繁切换条件的场景。这里要说的优化点主要在于减少页面中 dom 总数，建议根据使用场景进行搭配。
v-for遍历必须为 item 添加 key，注意避免同时使用 v-if
v-for 遍历必须为 item 添加 key值，循环调用子组件时添加 key值，key值可以用来标识每一个循环的个体，可以使用例如 item.id 作为 key。注意避免同时使用 v-if，v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响性能，不推荐使用。
- 图片懒加载
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载
- 不生成
map文件 - 使用轻量级的工具库
- 把不常改变的库放到
index.html中，通过cdn引入 - 首页单独做服务端渲染
大量渲染vue 数据时应该怎么优化？
- 如果列表是纯粹的数据展示，不会有任何改变，就不需要做响应化 如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容
- 通过localStorage或者IndexDB来暂存前端数据，然后通过web worker来多线程处理数据，包括虚拟DOM的diff。
- 大量展示的纯数据,不需要追踪变化的时用object.freeze冻结对象
- Object.preventExtentsion阻止对象扩展，阻止vue给每个对象加上get,set，缺点是不能响应了
- 添加加载时的动画，优化了用户的体验感
- 利用服务器渲染SSR，在服务端渲染组件
- 尽量不要再用vue的双向数据绑定了 或者只用部分页面中处理的数据
如果并非一次性传入大量数据 而只是分段加载 但次数特别多 建议
- 避免浏览器处理大量的dom，比如懒加载，异步渲染组件，使用分页
