[JavaScript知识库]Vue性能方面优化

（1）代码层面的优化

• v-if 和 v-show 区分使用场景

• computed 和 watch 区分使用场景

• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if（v-for优先级更高）

• 长列表性能优化（Object.freeze()）

• 事件的销毁

• 图片资源懒加载（vue-lazyload）

• 路由懒加载

• 第三方插件的按需引入（babel-plugin-component）

• 优化无限列表性能（vue-virtual-scroller）

• 服务端渲染 SSR or 预渲染

  服务端渲染主要是将vue在客户端渲染的HTML放在了服务端进行渲染，服务端将HTML以字符串的形式发送到客户端进行显示

  优点

  • 有利于SEO：原本的SPA页面是需要通过ajax获取，然而搜索引擎爬取工具是不会等待ajax异步完成后再去抓取其页面内容的，所以SPA页面不利于SEO，而SSR他是直接由服务端将整个渲染好的页面返回给客户端，更有利于SEO

  • 首屏加载速度更快：SPA需要等待js文件加载好后再进行页面的渲染，而SSR无需等待js文件加载完，服务端直接将渲染好的页面返回给客户端显示（加载更快）

  缺点

  • 开发条件受到限制：服务端渲染仅支持beforeCreate和created两个钩子函数，这回导致一列外部扩展库需要一些特殊的处理才能在服务端渲染程序中运行；并且SSR渲染需要在Node.js Server环境运行。
  • 服务器负载：在Node.js中渲染完整的应用程序，会更大量的占用CPU资源，因此如果需要在高流量的环境下使用的话，需要做相应的服务器负载。并明智的采用缓存策略；

  如果你的项目的 SEO 和 首屏渲染是评价项目的关键指标，那么你的项目就需要服务端渲染来帮助你实现最佳的初始加载性能和 SEO，具体的 Vue SSR 如何实现，可以去查看些其他博客。如果你的 Vue 项目只需改善少数营销页面（例如 /， /about， /contact 等）的 SEO，那么你可能需要预渲染，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点，具体你可以使用 prerender-spa-plugin 就可以轻松地添加预渲染 。

（2）Webpack 层面的优化

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

（3）基础的 Web 技术的优化

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

具体请看这里