性能优化的第一步首先是性能分析，找到性能瓶颈是什么，制定一个优化目标指标。比如说FP、FCP、LCP要达到多少、TTI要到多少等等。
性能分析，可以借助浏览器的控制台的LightHouse、Performance、NetWork面板来查看相关数据，也可以借助打包工具插件webpack-plugin-analayzer来查看打包输出资源的大小，看到问题来针对性的去做优化。
一般来说影响性能的可以大体分为两个层面。一个是资源加载（网络层面），一个是渲染层面，一个运行层面。
网络层面
从url输入后回车，到资源加载到本地，首先是DNS解析，再到建立TCP网络连接、然后服务端响应返回资源，这其中可以做的有，DNS预解析，使用CDN，开启GZIP压缩、请求合并减少并发，资源预加载，充分利用缓存，使用http2协议进行通信（多路复用加快请求时间）。还有就是SSR，采用服务端渲染技术。
渲染层面：
第一个是尽量减少回流重绘，比如写CSS动画的时候使用transform代替position，图片预先设置好正确宽高等。
第二个代码书写要规范，使用语义化标签来加快解析速度，减少标签的嵌套，不必要的标签可以用伪元素去代替，小图片的话可以采用base64的格式。script标签的加载合理使用async、defer，合理使用v-if和v-show，这些都是些小细节，平时写的时候自然而然要注意到的一些东西。
运行层面
首先是资源的预加载， 另外做好懒加载，数据懒加载、图片懒加载、路由懒加载 组件可以按需引入、依赖按需引入。 大批量渲染可以采用分批渲染（可以利用requestAnimationFrame实现分帧渲染）。 还有就是一些很吃性能的运算，可以交给webWorker来处理。
打包层面
某些三方库使用cdn的方式引入（配合webpack的externals配置）； 开启treeShaking、使用代码分割splitChunks配合缓存。
其中有些其实做了效果不明显，我自己做过的比较有效的有：数据懒加载、图片懒加载、路由懒加载、大批量组件分帧渲染、按需引入组件、按需引入依赖、合并请求
最重要的是思路，总结下就是：分析性能、找到问题、针对性做优化（网络层面做哪些、渲染层面做哪些、书写代码注意些什么、运行层面怎么设计代码，打包怎么做优化）。
