Vue 的性能优化
Vue 的性能优化
1. 编码阶段
- 尽量减少 data 中的数据，data 中的数据都会增加 getter 和 setter，会收集对应的 watcher；
- v-if 和 v-for 不能连用；
- 如果需要使用 v-for 给每项元素绑定事件时使用事件代理；
- SPA 页面（单页面应用）采用 keep-alive 缓存组件；
- 在更多的情况下，使用 v-if 替代 v-show；
- key 保证唯一；
- 使用路由懒加载，异步组件；
- 防抖、节流；
- 第三方模块按需导入；
- 长列表滚动到可视区域动态加载；
- 图片懒加载；
2. SEO优化
- 预渲染；
- 服务器端渲染 SSR；
3. 打包优化
- 压缩代码；
- Tree Shaking/Scope Hoisting；
- 使用 cdn 加载第三方模块；
- 多线程打包 happypack；
- splitChunks 抽离公共文件；
- sourceMap 优化；
4. 用户体验
- 骨架屏；
- PWA；
Vue.js 文章被收录于专栏
Vue.js
传音控股公司福利 360人发布