كيفية تحميل وتحسين البرامج النصية

نصوص البرمجة للتطبيق

لتحميل نص برمجي لطرف ثالث لجميع المسارات، استورد next/script وقم بتضمين النص مباشرة في _app المخصص الخاص بك:

pages/_app.js

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://example.com/script.js" />
    </>
  )
}

سيتم تحميل وتنفيذ هذا النص البرمجي عند الوصول إلى أي مسار في تطبيقك. سيتأكد Next.js من أن النص البرمجي سيتم تحميله مرة واحدة فقط، حتى إذا انتقل المستخدم بين عدة صفحات.

التوصية: نوصي بتضمين نصوص الطرف الثالث في صفحات أو تخطيطات محددة فقط لتقليل أي تأثير غير ضروري على الأداء.

الاستراتيجية

على الرغم من أن السلوك الافتراضي لـ next/script يسمح لك بتحميل نصوص الطرف الثالث في أي صفحة أو تخطيط، يمكنك ضبط سلوك التحميل باستخدام خاصية strategy:

beforeInteractive: تحميل النص البرمجي قبل أي كود Next.js وقبل حدوث أي ترطيب للصفحة.
afterInteractive: (الافتراضي) تحميل النص البرمجي مبكرًا ولكن بعد حدوث بعض الترطيب على الصفحة.
lazyOnload: تحميل النص البرمجي لاحقًا خلال وقت الفراغ في المتصفح.
worker: (تجريبي) تحميل النص البرمجي في عامل ويب.

راجع وثائق مرجع next/script API لمعرفة المزيد عن كل استراتيجية وحالات استخدامها.

تفريغ النصوص البرمجية إلى عامل ويب (تجريبي)

تحذير: استراتيجية worker ليست مستقرة بعد ولا تعمل مع موجه التطبيق. استخدم بحذر.

يتم تفريغ النصوص البرمجية التي تستخدم استراتيجية worker وتنفيذها في عامل ويب باستخدام Partytown. يمكن أن يحسن هذا أداء موقعك من خلال تخصيص الخيط الرئيسي لبقية كود التطبيق الخاص بك.

هذه الاستراتيجية لا تزال تجريبية ويمكن استخدامها فقط إذا تم تمكين علامة nextScriptWorkers في next.config.js:

next.config.js

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

ثم، قم بتشغيل next (عادة npm run dev أو yarn dev) وسيرشدك Next.js خلال تثبيت الحزم المطلوبة لإكمال الإعداد:

Terminal

npm run dev

سترى تعليمات مثل هذه: يرجى تثبيت Partytown عن طريق تشغيل npm install @builder.io/partytown

بمجرد اكتمال الإعداد، سيؤدي تعريف strategy="worker" إلى إنشاء Partytown تلقائيًا في تطبيقك وتفريغ النص البرمجي إلى عامل ويب.

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}

هناك عدد من المقايضات التي يجب مراعاتها عند تحميل نص برمجي لطرف ثالث في عامل ويب. يرجى الاطلاع على وثائق Partytown المقايضات لمزيد من المعلومات.

استخدام تكوين Partytown المخصص

على الرغم من أن استراتيجية worker لا تتطلب أي تكوين إضافي للعمل، يدعم Partytown استخدام كائن تكوين لتعديل بعض إعداداته، بما في ذلك تمكين وضع debug وإعادة توجيه الأحداث والمحفزات.

إذا كنت ترغب في إضافة خيارات تكوين إضافية، يمكنك تضمينها داخل مكون <Head /> المستخدم في _document.js المخصص:

_pages/document.jsx

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          data-partytown-config
          dangerouslySetInnerHTML={{
            __html: `
              partytown = {
                lib: "/_next/static/~partytown/",
                debug: true
              };
            `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

لتعديل تكوين Partytown، يجب استيفاء الشروط التالية:

يجب استخدام سمة data-partytown-config من أجل الكتابة فوق التكوين الافتراضي المستخدم بواسطة Next.js
ما لم تقرر حفظ ملفات مكتبة Partytown في دليل منفصل، يجب تضمين خاصية lib: "/_next/static/~partytown/" والقيمة في كائن التكوين لإعلام Partytown بمكان تخزين Next.js للملفات الثابتة الضرورية.

ملاحظة: إذا كنت تستخدم بادئة أصل وترغب في تعديل التكوين الافتراضي لـ Partytown، يجب تضمينه كجزء من مسار lib.

اطلع على خيارات التكوين لـ Partytown لرؤية القائمة الكاملة للخصائص الأخرى التي يمكن إضافتها.

النصوص البرمجية المضمنة

النصوص البرمجية المضمنة، أو النصوص التي لا يتم تحميلها من ملف خارجي، مدعومة أيضًا بواسطة مكون Script. يمكن كتابتها عن طريق وضع JavaScript داخل الأقواس المعقوفة:

<Script id="show-banner">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

أو باستخدام خاصية dangerouslySetInnerHTML:

<Script
  id="show-banner"
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').classList.remove('hidden')`,
  }}
/>

تحذير: يجب تعيين خاصية id للنصوص البرمجية المضمنة حتى يتمكن Next.js من تتبع وتحسين النص البرمجي.

تنفيذ كود إضافي

يمكن استخدام معالجات الأحداث مع مكون Script لتنفيذ كود إضافي بعد حدوث حدث معين:

onLoad: تنفيذ الكود بعد انتهاء تحميل النص البرمجي.
onReady: تنفيذ الكود بعد انتهاء تحميل النص البرمجي وفي كل مرة يتم فيها تحميل المكون.
onError: تنفيذ الكود إذا فشل تحميل النص البرمجي.

ستعمل هذه المعالجات فقط عند استيراد next/script واستخدامه داخل مكون عميل حيث يتم تعريف "use client" كأول سطر من الكود:

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}

راجع مرجع next/script API لمعرفة المزيد عن كل معالج حدث وعرض أمثلة.

هناك العديد من سمات DOM التي يمكن تعيينها لعنصر <script> والتي لا تستخدم بواسطة مكون Script، مثل nonce أو سمات بيانات مخصصة. سيؤدي تضمين أي سمات إضافية إلى إعادة توجيهها تلقائيًا إلى عنصر <script> النهائي والمحسن الذي يتم تضمينه في HTML.

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        id="example-script"
        nonce="XUENAJFW"
        data-test="script"
      />
    </>
  )
}

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        id="example-script"
        nonce="XUENAJFW"
        data-test="script"
      />
    </>
  )
}