Vue项目中的性能优化
2021-05-13 本文已影响0人
my木子
代码层面的优化
- 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
