Partytown是一个懒加载库，用于将资源密集型脚本转移到Web Worker中，远离主线程。它的目标是通过将主线程专用于您的代码，并将第三方脚本转移到Web Worker中，优化您的页面速度和Lighthouse评分，从而帮助加快网站速度。
即使您的网站遵循了当今的最佳实践，并且具有完美的Lighthouse评分，但添加第三方脚本很可能会抵消您的性能优势。
根据Partytown的说法：
Partytown在其设置和配置方面与大多数Web开发库有很大的不同。在最低级别上，Partytown可以与纯HTML一起使用，这意味着它不需要成为构建过程的一部分，不需要打包工具，不需要特定的框架等等。因为它可以与任何HTML页面集成，所以它也更容易为几乎任何生态系统创建包装器组件或插件，例如Shopify、WordPress、Nextjs、Gatsby等等。
您可以使用以下命令安装该软件包：
yarn add @builder.io/partytown
尽管Partytown可以与纯HTML一起使用，但在此示例中，我将向您展示如何在一个非常常见的前端库React或NextJS以及一个非常常见的第三方脚本Google Tag Manager（用于分析）中使用Partytown。
让我们先看一下我网站目前的性能（移动端）：
您可以看到，尽管其他得分很高，但性能仅为69，Lighthouse指出第三方脚本是主要因素。因此，我们将立即使用Partytown进行优化。
首先，在根索引页面中，我们只需要为我们的脚本包含type="text/partytown"：
<script
async
type="text/partytown"
src="https://www.googletagmanager.com/gtag/js?id=G-BDYELQMSCB"
></script>
<script type="text/partytown" id="gtm">
{`
window.dataLayer = window.dataLayer || [];
window.gtag = function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-BDYELQMSCB',{ 'debug_mode':true });
`}
</script>
因为gtag向window添加了一个全局变量，用户代码调用该变量以将数据发送到服务。
由于GTM实际上是在Web Worker中加载的，所以我们需要转发这些调用。forward配置用于设置应该被修补和转发的window变量。forward字符串值是要调用的函数：
<Partytown debug={true} forward={['gtag']} />
现在您可以安全地在应用程序中调用window.gtag。
让我们看看在我们实施Partytown之后的得分：
性能得分现在是93，得到了极大的改善，并且Lighthouse给出的建议已经不再存在。
第三方脚本在当今非常常见，特别是当网站需要像Hotjar、Google Analytics或Facebook Pixel这样的跟踪器和广告时。
我希望本文能够帮助您在很短的时间内改善您的网站性能。
