Vue有什么性能优化方案

如果没有权利 Vue 没有对该项目进行优化总结的学生可以参考本文作者的另一篇文章。 《 Vue 项目绩效优化 — 实践指南 》 ，文章主要介绍了从。 3 从大的方面来说，22 小方面详细说明了如何继续。 Vue 项目优化。

代码级别的优化

• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须是 item 添加 key并避免同时使用。 v-if
• 长列表性能优化
• 这一事件的破坏
• 图片资源的延迟加载
• 路由延迟加载
• 按需引入第三方插件
• 优化无限列表性能
• 服务器端渲染 SSR or 预渲染

webpack在级别上进行优化

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

基础的 Web 技术的最优化

• 开启 gzip 压缩
• 浏览器缓存
• CDN 的使用
• 使用 Chrome Performance 找到性能瓶颈