使用 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 集成,可以使这个过程更快。还有一些方法可以设置不同的构建工具,例如ViteWebpack

将 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 的文档