使用 PartyTown 提高 VueJS 应用程序的性能
什么是PartyTown？
PartyTown 是一个 JavaScript 库，可帮助将资源密集型脚本（通常是第三方脚本）重新定位到web worker中并脱离主线程。这通过释放主线程来运行我们的代码来加速我们的网站。
注意： PartyTown 不会与您网站的其他 JavaScript 捆绑在一起。相反，它故意与您的代码保持分离，以便它可以在 webworker 中运行。
在 VueJS 中使用 PartyTown
要将 PartyTown 与 VueJS 一起使用，您需要找到将第三方脚本插入页面的位置。通常，这意味着在index.html您的 Vue 应用程序的页面中。
创建 VueJS 应用程序
如果你已经有一个现有的 VueJS 应用程序，你可以跳过这一步。如果你只是想测试一下 PartyTown，你可以通过创建一个新的 VueJS 项目来实现。
通过运行创建一个新的 Vue 项目：
npm init vue@latest
您应该index.html在生成的项目中有一个。在一个新的 VueJS 项目中，这通常是我们添加全局第三方脚本的地方。这个文件也将是我们添加 PartyTown 的地方。
添加第三方脚本
如果您的项目中已经有第三方脚本（例如Google Analytics ）或任何其他跟踪/测量脚本，则可以跳过此步骤。否则，您可以设置第三方脚本。
安装PartyTown
要将partytyown 安装到您的应用程序中，您只需在package.json项目所在的位置使用 npm 或 yarn。
npm install @builder.io/partytown
或（如果使用纱线）
yarn add @builder.io/partytown
设置PartyTown
设置 PartyTown (Vite)
从 Partytown 0.3.6 开始可用
将来自 @builder.io/partytown/utils 的 partytownVite 插件导入到您的 vite.config.js 配置文件中。接下来，将partytownVite(opts) 添加到插件选项。
Vite 插件会将 PartyTown lib 目录复制到给定的目的地，该目的地必须是绝对文件路径。复制将在 writeBundle() 挂钩时发生。在开发模式下，Partytown lib 文件将使用 Vite 开发服务器提供服务。
下面是使用 Vite 配置将 PartyTown 库复制到 dist 构建目录的示例：
// vite.config.js
import path from "path";
import { partytownVite } from "@builder.io/partytown/utils";
export default ({ command }) => ({
build: {
plugins: [
partytownVite({
dest: path.join(__dirname, "dist", "~partytown"),
}),
],
},
});
设置 PartyTown（长版）
安装 PartyTown 后，你需要修改你的 package.json 来设置 PartyTown。为此，您可以将partytown lib 文件复制到我们可以在 VueJS 应用程序中引用的目录中。
添加 PartyTown 脚本并更改相关的构建/预览脚本以在实际构建/预览脚本之前运行 PartyTown 脚本。
// In package.json
"scripts": {
// ...
"dev": "partytown && vite",
"build": "partytown && vite build",
"preview": "partytown && vite preview --port 4173",
"partytown": "partytown copylib public/~partytown"
}
您现在应该在项目中看到一个public/~partytown目录。在这个目录中，我们有一个partytown.js文件。这是我们将在 html 页面中引用的文件。
还值得注意的是，截至撰写本文时，PartyTown 还没有与原生 VueJS 应用程序的官方集成。但是，还有其他 Vue 工具集成，例如Nuxt PartyTown 集成，可以使这个过程更快。还有一些方法可以设置不同的构建工具，例如Vite和Webpack
将 PartyTown 与第三方脚本一起使用
在我们可以将partytown 与我们的第三方脚本一起使用之前，我们需要将它包含到我们的页面中。
打开index.html页面，然后添加您的 PartyTown 脚本。
<!-- ./index.html -->
<head>
<script src="public/~partytown/partytown"></script>
</head>
为了使用 PartyTown 将第三方脚本的执行从主线程转移到 web worker（并提高 VueJS 应用程序的性能），您需要做的就是将脚本标记为text/partytown. 为应该从 web worker 运行的每个脚本添加type="text/partytown"属性。
例如：
<script src="./third-party-script.js"></script>
会变成
<script src="./third-party-script.js" type="text/partytown"></script>
通过添加text/partytown，您是在告诉 PartyTown 该脚本不应在主 JavaScript 线程上执行。PartyTown 还确保脚本在您的网络工作者中运行。无需额外设置。
注意： 每个脚本都是可选的，这意味着更新的类型属性应该只添加到应该与 PartyTown 一起运行的脚本中。除非添加此属性，否则 PartyTown 不会自动升级任何脚本。
浏览器支持
PartyTown 致力于确保所有浏览器仍然可以运行第三方脚本，无论它们是否支持服务工作者、原子或两者都不支持。这意味着，如果您支持 IE11 等旧版浏览器，则脚本应该会继续工作，就像不使用 Partytown 一样。
有关 PartyTown 浏览器支持的更多信息，您可以查看PartyTown 官方文档。
结论
通过确保我们的主线程只做它需要做的事情（运行我们的代码），我们可以为我们的用户提供更流畅的体验。PartyTown 帮助我们毫不费力地做到这一点。我建议您检查一下。要了解有关 PartyTown 的更多信息（包括如何配置它），请查看PartyTown 的文档。
