DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Allan N Jeremy for This Dot

Posted on

Using PartyTown to improve the performance of VueJS Applications

What is partytown?

Partytown is a JavaScript library that helps relocate resource intensive scripts (often third-party scripts) into a web worker and off the main thread. This speeds up our site by freeing up the main thread to run our code.

Note:
Partytown does not get bundled with the rest of your site's JavaScript. Instead, it intentionally stays separate from your code so that it can run within a webworker.

Using partytown with VueJS

To use partytown with VueJS, you need to find where your third-party scripts are inserted into your page. Typically, this would mean in the index.html page of your vue application.

Create the VueJS application

If you already have an existing VueJS application, you can skip this step. If you are simply looking to test out partytown, you can do so by creating a new VueJS project.

Create a new vue project by running [and following the steps after that].

npm init vue@latest
Enter fullscreen mode Exit fullscreen mode

You should have an index.html in the generated project. In a new VueJS project, this is generally where we would add global third-party scripts. This file is also going to be where we add partytown

Add third-party scripts

If you already have third-party scripts such as Google Analytics or any other tracking/measurement scripts in your project, you can skip this step. Otherwise, you can set up third-party scripts.

Install partytown

To install partytyown into your application, all you need is to use npm or yarn where your package.json is of your project.

npm install @builder.io/partytown
Enter fullscreen mode Exit fullscreen mode

or (if using yarn)

yarn add @builder.io/partytown
Enter fullscreen mode Exit fullscreen mode

Setup PartyTown

Setup partytown (vite)

Available as of Partytown 0.3.6

Import the partytownVite plugin from @builder.io/partytown/utils into your vite.config.js config file. Next, add partytownVite(opts) to the plugins option.

The Vite plugin will copy Partytown lib directory to the given destination, which must be an absolute file path. The copying will happen at the time of the writeBundle() hook. When in dev mode, the Partytown lib files will be served using the Vite Dev Server.

Below is an example of using a Vite config to copy the Partytown lib to a dist build directory:

// 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"),
      }),
    ],
  },
});
Enter fullscreen mode Exit fullscreen mode

Setup partytown (the long version)

After installing partytown, you need to modify your package.json to setup partytown. You do this by copying the partytown lib files into a directory we can reference from within our VueJS application.

Add the partytown script and change the relevant build/preview scripts to run the partytown script before your actual build/preview script.

// In package.json
"scripts": {
  // ...
  "dev": "partytown && vite",
  "build": "partytown && vite build",
  "preview": "partytown && vite preview --port 4173",
  "partytown": "partytown copylib public/~partytown"
}
Enter fullscreen mode Exit fullscreen mode

You should see a public/~partytown directory in your project now. Inside this directory, we have a partytown.js file. This is the file we will be referencing in our html page.


It is also worth noting that as of the time of writing this article, there is no official integration for partytown with native VueJS applications. There are however other vue tool integrations such as the Nuxt partytown integration that make this process a lot faster. There are also approaches to setting up for different build tools such as vite and webpack

Using partytown with third-party scripts

Before we can use partytown with our thirdparty scripts, we need to include it into our page.
Open the index.html page and add your partytown script.

<!-- ./index.html -->
<head>
  <script src="public/~partytown/partytown"></script>
</head>
Enter fullscreen mode Exit fullscreen mode

In order to use partytown to move the execution of your third-party scripts from the main thread to a web worker (and improve the performance of your VueJS application), all you need to do is mark the script with the type of text/partytown. Add the type="text/partytown" attribute for each script that should run from a web worker.

For example:

<script src="./third-party-script.js"></script>
Enter fullscreen mode Exit fullscreen mode

would turn into

<script src="./third-party-script.js" type="text/partytown"></script>
Enter fullscreen mode Exit fullscreen mode

By adding the text/partytown you are telling partytown that this script should not be executed on the main JavaScript thread. Partytown also makes sure that the script runs in a web worker for you, no additional setup required.

Note: that each script is opt-in, meaning that the updated type attribute should only be added to scripts that should run with Partytown. Partytown will not automatically upgrade any scripts unless this attribute is added.

Browser support

Partytown works to ensure that all browsers can still run third-party scripts, whether they have support for service workers, atomics, or neither. This means if you’re supporting legacy browsers such as IE11, the scripts should continue to work as if Partytown wasn’t being used.

For more information on partytown's browser support, you can check out the official partytown documentation.

Conclusion

By making sure our main thread does only what it needs to do (run our code), we can deliver smoother experiences for our users. PartyTown helps us do this effortlessly. I would recommend that you check it out. To learn more about PartyTown (including how to configure it), check out partytown's documentation.


This Dot Labs is a JavaScript consulting firm that enables companies to build and improve their digital technologies with confidence. For expert architectural guidance, training, consulting, engineering leadership, and development services in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, Polymer, and more, visit thisdot.co

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!