بارگذاری در Web Worker

توضیحات

این افزونه اجرای جاوا اسکریپت را به یک Web Worker منتقل می‌کند، که با آزاد کردن رشته اصلی (main thread) عملکرد را بهبود می‌بخشد. این باید منجر به بهبود امتیازات تعامل تا ترسیم بعدی (INP) شود.

⚠ این قابلیت آزمایشی است. ⚠

برای انتخاب یک اسکریپت جهت بارگذاری در یک ورکر، کافیست داده اسکریپت worker را به یک اسکریپت ثبت شده اضافه کنید. برای مثال،
اگر اسکریپتی با هندل foo ثبت کرده‌اید، برای انتقال آن به یک وب ورکر به روش زیر عمل کنید:

wp_script_add_data( 'foo', 'worker', true );

برخلاف استراتژی‌های بارگذاری اسکریپت (async/defer)، هر اسکریپت درون‌خطی قبل/بعد (before/after) مرتبط با اسکریپت ثبت شده منتقل شده به ورکر نیز به ورکر منتقل می‌شود، در حالی که با استراتژی‌های اسکریپت، یک اسکریپت درون‌خطیِ بعد (after script)، مانع از به تأخیر افتادن اسکریپت می‌شود.

در غیر این صورت، این افزونه در حال حاضر با ادغام‌های داخلی برای انتقال Google Analytics به یک وب ورکر برای افزونه زیر ارائه می‌شود:

• رنک مث سئو (Rank Math SEO)
• سایت کیت گوگل (Site Kit by Google)
• ووکامرس (WooCommerce)

لطفاً پس از فعال‌سازی، آمار خود را رصد کنید تا اطمینان حاصل کنید که تمام رویدادهای مورد انتظار ثبت می‌شوند. در عین حال، امتیازات INP خود را برای بررسی بهبود نظارت کنید.

این افزونه متکی بر کتابخانه Partytown 🎉 ساخته Builder.io است که تحت مجوز MIT منتشر شده. این کتابخانه در نسخه بتا است و چندین باگ باز دارد.

پیکربندی Partytown را می‌توان از طریق فیلتر plwwo_configuration تغییر داد. برای مثال:

<?php
add_filter( 'plwwo_configuration', function ( $config ) {
    $config['mainWindowAccessors'][] = 'wp'; // Make the wp global available in the worker (e.g. wp.i18n and wp.hooks).
    return $config;
} );

با این حال، همه گزینه‌های پیکربندی را نمی‌توان به این روش به JSON سریال‌سازی کرد، برای مثال پیکربندی resolveUrl یک تابع است. برای مشخص کردن این مورد، می‌توانید یک اسکریپت درون‌خطی به صورت زیر اضافه کنید.

<?php
add_action(
    'wp_enqueue_scripts',
    function () {
        wp_add_inline_script(
            'web-worker-offloading',
            <<<JS
            window.partytown = {
                ...(window.partytown || {}),
                resolveUrl: (url, location, type) => {
                    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'
        );
    }
);

همچنین گزینه‌های پیکربندی زیادی وجود دارد که مستند نشده‌اند، بنابراین به تعاریف TypeScript مراجعه کنید.