Lessons from open-source: Partytown — a library that uses web worker to run third party scripts.

This lesson is picked from Next.js source code. In this article, you will learn what a Partytown library is and where to find the code related to Partytown in Next.js

What is a partytown?

Partytown is an open source library built by Builder.io to relocate resource intensive third-party scripts into a web worker so that main thread is dedicated to your code.

Partytown is a lazy-loaded library to help relocate resource intensive scripts into a_ web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker. — Source

Keep in mind, this library is still in beta and cannot be guaranteed to work in every scenario.

I found the following concepts that require further reading:

1. Web worker

2. Main thread

3. Critical rendering path

4. Partytown, Google Slide Presentation

Where to find the code related to Partytown in next.js?

Notice that Partytown is not bundled in the next.js source code, it is supposed to be like that.

Practice the exercises based on documentation to become an expert in Next.js

Different ways to install Partytown in Next.js:

1. Add Partytown type attribute to Third-Party Scripts
2. Add Partytown snippet to the
3. Copy Partytown library files

Conclusion:

I came across Partytown built by Builder.io when I was reading the pages/_document.tsx in the Next.js source code and wanted to find out what it is about.

Partytown helps to speed up sites by running third party scripts in a web worker and this allows the main thread dedicated only to your code. Partytown is still in beta and not guaranteed to work in every scenario. This also made me read the MDN docs related to web workers.