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
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
or (if using yarn)
yarn add @builder.io/partytown
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"),
}),
],
},
});
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"
}
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>
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>
would turn into
<script src="./third-party-script.js" type="text/partytown"></script>
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
Oldest comments (0)