欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小文的前端学习笔记--Vue优化方案小结

程序员文章站 2022-03-07 11:18:30
Vue优化编码优化:不要将所有数据都放在data中(因为data中的数据都会增加getter和setter,会收集对应的watcher);SPA页面采用keep-alive缓存组件;数据持久化问题(防抖,节流);v-for中key保证唯一性并且如果v-for时给每项元素绑定事件需要用事件代理。加载性能优化:第三方模块按需导入;图片懒加载(lazyload unload事件做预加载);滚动到可视区域动态加载(默认只渲染三屏 当前看到的 上一页 下一页 别的用空div撑起)。...

Vue优化

  • 编码优化:
  1. 不要将所有数据都放在data中(因为data中的数据都会增加getter和setter,会收集对应的watcher);
  2. SPA页面采用keep-alive缓存组件;
  3. 数据持久化问题(防抖,节流);
  4. v-for中key保证唯一性并且如果v-for时给每项元素绑定事件需要用事件代理。
  5. 销毁时可以手动移除一下定时器,防止内存泄漏
  • 加载性能优化:
  1. 第三方模块按需导入(像element-ui这样的第三方组件库可以按需引入避免体积过大);
  2. 图片懒加载(lazyload unload事件做预加载);
  3. 滚动到可视区域动态加载(默认只渲染三屏 当前看到的 上一页 下一页 别的用空div撑起)。
  • SEO优化
  • 打包优化:使用cdn的方式加载第三方模块
  • SSR(服务端渲染)

本文地址:https://blog.csdn.net/wennianzhu/article/details/107481477

相关标签: vue