Vue 项目进行哪些优化？

代码层面的优化

• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• 长列表性能优化
• 事件的销毁
• 图片资源懒加载
• 路由懒加载
• 第三方插件的按需引入
• 优化无限列表性能
• 服务端渲染 SSR or 预渲染

Webpack 层面的优化

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

基础的 Web 技术的优化

• 开启 gzip 压缩
• 减少请求数：合并资源(精灵图)，减少http请求数。
• 浏览器缓存，http请求协议缓存，离线缓存，离线数据缓存(localStorage)。
• 加快请求速度：预解析DNS，减少域名数，CDN分支。
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶颈
• 渲染：js/css优化，服务器渲染，加快顺序。