vue 项目性能优化

代码层面：

• 合理适用 v-if 和 v-show
• 区分 computed 和 watch 的使用
• v-for 遍历为 item 添加 key
• v-for 遍历避免同时使用 v-if
• 通过 addEventListener 添加的事件在组件销毁时要用 removeEventListener 手动移除这些事件的监听
• 图片懒加载
• 路由懒加载
• 第三方插件按需引入
• SSR服务端渲染，首屏加载速度快，SEO效果好

Webpack 层面优化：

• 对图片进行压缩
• 使用 CommonsChunkPlugin 插件提取公共代码
• 提取组件的 CSS
• 优化 SourceMap
• 构建结果输出分析，利用 webpack-bundle-analyzer 可视化分析工具

基础的Web技术优化：

• 开启gzip压缩
• 浏览器缓存
• CDN的使用
• 使用Chrome Performance分析性能