內容簡介
**總結：**
這個外掛將 JavaScript 執行工作委派給 Web Worker，在釋放主執行緒的同時提高了效能。這將導致互動至下一次繪製（INP）分數的提升。值得注意的是，這項功能目前仍在實驗階段。
**問題與答案：**
1. 如何透過這個外掛將腳本（script）加載到 Web Worker 中？
- 答案：只需將工作腳本數據添加到已註冊腳本中。例如，如果有一個以 'foo' 為標識的腳本，可以通過以下方式選擇將其委派給 Web Worker：`wp_script_add_data( 'foo', 'worker', true )`。
2. 這個外掛與哪些插件內建集成，可以將 Google Analytics 委派給 Web Worker？
- 答案：目前，這個外掛與 WooCommerce 內建集成，可將 Google Analytics 委派給 Web Worker。同時，計劃將支持 Site Kit by Google 和 Rank Math SEO。
3. 如何修改 Partytown 配置？
- 答案：可以透過使用 plwwo_configuration filter 來修改 Partytown 配置。例如，在 function 內加入 `$config['mainWindowAccessors'][] = 'wp';` 可以使 wp 全域在 Worker 中可用（例如 wp.i18n 和 wp.hooks）。
外掛標籤
開發者團隊
原文外掛簡介
This plugin offloads JavaScript execution to a Web Worker, improving performance by freeing up the main thread. This should translate into improved Interaction to Next Paint (INP) scores.
⚠ This functionality is experimental, and it is now intended to be sunset. ⚠
In order to opt in a script to be loaded in a worker, simply add worker script data to a registered script. For example,
if you have a script registered with the handle of foo, opt-in to offload it to a web worker by doing:
wp_script_add_data( 'foo', 'worker', true );
Unlike with the script loading strategies (async/defer), any inline before/after scripts associated with the worker-offloaded registered script will also be offloaded to the worker, whereas with the script strategies an inline after script would block the script from being delayed.
Otherwise, the plugin currently ships with built-in integrations to offload Google Analytics to a web worker for the following plugin:
Rank Math SEO
Site Kit by Google
WooCommerce
Please monitor your analytics once activating to ensure all the expected events are being logged. At the same time, monitor your INP scores to check for improvement.
This plugin relies on the Partytown 🎉 library by Builder.io, released under the MIT license. This library is in beta and there are quite a few open bugs.
The Partytown configuration can be modified via the plwwo_configuration filter. For example:
{
if (type === 'script') {
const proxyUrl = new URL('https://my-reverse-proxy.example.com/');
proxyUrl.searchParams.append('url', url.href);
return proxyUrl;
}
return url;
},
};
JS,
'before'
);
}
);
There are also many configuration options which are not documented, so refer to the TypeScript definitions.
