Vue项目中的性能优化

代码层面的优化

  • v-if 和 v-show 区分使用场景
  • computed 和 watch 区分使用场景
  • v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
  • 长列表性能优化，如果列表纯粹是数据展示，不会有任何改变，Object.freeze()、虚拟滚动vue-virtual-sroller
  • 减少重绘重排
  • 事件销毁
  • 图片懒加载vue-lazyload
  • 路由懒加载
  • 第三方插件的按需引入
  • 适当采用 keep-alive 缓存
  • 防抖、节流运用

Webpack 层面的优化

  • 小图转base64
  • 压缩图片（image-webpack-loader）
  • 减少 ES6 转为 ES5 的冗余代码
  • 提取公共代码
  • 模板预编译
  • 提取组件的 CSS
  • 优化 SourceMap
  • 构建结果输出分析
  • Vue 项目的编译优化

基础的 Web 技术的优化

  • 开启 gzip 压缩
  • 浏览器缓存（强缓存、协商缓存）
  • 静态资源使用 CDN （CDN主要功能是在不同的地点缓存内容，通过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容）
  • 后台分布式部署，负载均衡
  • 服务端渲染 SSR
  • 预渲染 prerender-spa-plugin
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容