「这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战」
前端的性能优化主要体现在几个方面:
网络连接优化
- 在图片、css、js等方面减少http请求
- 通过http缓存减少http请求，节省带宽
- 针对首屏多页面应用图片懒加载
- 合理使用字体图标和雪碧图
- 减少接口并发请求
- 多使用http2（相比于http1.1,http2可以多路复用，多个请求可以共用一个 TCP 连接，在 TCP 连接中可以乱序发送，到达目的地后再通过流 ID 重新组建，解析速度更快）
- 做好响应式图片
组件优化
- 做好组件模块化，按照模块化标准合理分配路由
- 能多复用组件就多复用组件
- 样式之类可以写公共模块
(注意:复用组件要以功能为基础，按照业务逻辑做好准备)
代码优化
- 可以将CSS文件 放在文件头部，JavaScript 文件放在底部
原因: （1） JS 加载和执行会阻塞 HTML 解析，影响 css树 构建
（2） CSS 执行会阻塞渲染，阻止 JS 执行
（3） CSS不放头部还会造成，先加载 HTML 再加载 CSS,影响用户视觉体验
- css提取公共样式，减少css文件大小
- 提取共用的方法，放在util.js
- 在vue合理使用v-if、v-show等方法
- 减少 ES6 转为 ES5 的冗余代码
- 减少重绘重排
打包优化
- 合理使用 webpack等打包工具尽量压缩文件，压缩文件可以减少文件下载时间，让用户体验性更好
- 通过 webpack 按需加载代码，提取第三库代码
- 合理第三方引入优化，做到按需引入
- 打包时，按需懒加载一些大文件
- vuex、vue-router、axios等文件可以直接引入
