页面可见度API

页面可见度API【渡一教育】_哔哩哔哩_bilibiliDocument: visibilitychange event - Web APIs | MDN 使用addEventListener("visibilitychange", (event) => {})方法，可以监听页面的可见度发生变化。例如：

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    playingOnHide = !audio.paused;
    audio.pause();
  } else {
    // Resume playing if audio was "playing on hide"
    if (playingOnHide) {
      audio.play();
    }
  }
});

需要注意，在不同版本浏览器中，事件名字和对应的属性名字可能有不同，需要进行判断，以下是对应关系：

• 最新浏览器中，属性名：hidden，事件名：visibilitychange;
• ie浏览器中，属性名：msHidden，事件名：msvisibilitychange；
• 旧版本浏览器中，属性名：webkitHidden，事件名：webkitvisibilitychange；

惰性函数

惰性函数【渡一教育】_哔哩哔哩_bilibili 由于浏览器版本多样，所以在调用浏览器API时，常常会进行浏览器API是否支持的判断，但是这种判断并不需要每次执行时都进行判断，所以可以考虑使用惰性函数，在第一次执行时就进行判断，将使用的API确定下来，后续再次执行时不再进行判断，而是直接使用该函数。 或者可以使用立即执行函数或工厂函数，将该函数在一开始定义时就进行判断固定下来。

Vite中进行手动分包

在vite中手动分包【渡一教育】_哔哩哔哩_bilibili 对于项目中稳定的内容，例如第三方库，可以将其进行单独分包，这样用户访问时可以利用浏览器缓存机制，减少下载次数。 配置的方法则是在vite的配置文件中使用build.rollupOptions进行配置，该配置项除了接收数组，还可以接收一个函数，这个函数的返回值则是该文件要封装进的文件的名称。