加载性能优化、渲染性能优化、构建性能优化、缓存性能优化
加载性能优化：
首屏时间：浏览器显示第一屏（浏览器当前视窗）页面所消耗的时间
问题：首屏时间过长会让用户烦躁，更轻易跳出或关闭网站
1、针对不是首屏的资源进行懒加载：文件资源一般较大，加载完成费时费力，还易引起渲染卡顿
懒加载实现——getBoundingClientRect()计算图片位置
getBoundingClientRect().top：计算图片左上角相对浏览器视窗顶部像素值
window.innerHeight：浏览进度滑块控制，这个值也就是getBoundingClientRect().top，当window.innerHeight没有达到某个资源的getBoundingClientRect().top时不进行加载该资源，当getBoundingClientRect().top小于window.innerHeight时，开始进行加载该资源
懒加载实现——API：Intersection Observer检测目标元素可见性
除了IE及低版本安卓浏览器，可兼容大部分浏览器
首选Intersection Observer + 兼容性处理getBoundingClientRect()
构建优化
构建优化为何可以提高性能？
首先需要请求很多相关资源，再通过浏览器进行渲染，如何快速获取到所有资源就是一个关键点。
资源压缩——体积变小，所传输的资源花费的时间就会变少
资源合并——将请求的多条资源合并为少量请求，从而减少http请求数量
资源压缩：
代码压缩：使用更简介的代码表示相同的逻辑
如定义变量：const companyName = '58';
总共24个字符，而计算机并不需要语义化，所以可以将companyName变为a，而赋值语句两边的空格可省略，优化后就是：
const a='58';
压缩工具如何实现代码压缩的功能？压缩js——基于webpack5
将字符串形式的代码转为AST语法树
遍历AST语法树对其内容按照上述逻辑处理
生成简洁的AST树转换成简洁的代码
工具功能：根据import、export导入导出语法，判断是否每个代码都有被使用到，删除未使用到的模块。需要使用插件
perser-webpack-plugin代替uglijs
压缩CSS
压缩前要将css文件单独导出并使用对应插件压缩，为什么不使用html？因为css和html资源无法并行加载，从而降低页面性能
。其次是自愿缓存力度变大，html和css任何一个代码的改变都碎促使缓存生效。
插件使用顺序：用mini-css-extract-plugin将css代码抽离成单独的文件，然后命中css-minimizer-webpack-plugin默认的逻辑进行压缩css
压缩css效果对比：
但出现了一个问题，是否将所有js文件合并为一个js文件呢，这样仅需进行一个http请求。
一般不这样操作，会造成三点问题：1.页面初始代码过大，影响首屏渲染性能。2.无法有效应用浏览器缓存。3.根据http2.0协议升级，仅需进行一次tcp连接，http2就会进行多路复用，然后并行发送多个请求，请求和请求之间高度独立。
实践操作：
针对node_modules资源：
将该模块打包成单独文件，配置maxSize阈值，防止包体积过大。
针对业务代码：
设置common分组，通过minChunks配置将使用率较高的资源合并为Common资源，对于懒加载资源，通过异步方式引入
评论区