Skript-Optimierung

Anwendungsweite Skripte

Um ein Drittanbieter-Skript für alle Routen zu laden, importieren Sie next/script und binden Sie das Skript direkt in Ihre benutzerdefinierte _app-Datei ein:

import Script from 'next/script'

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

Dieses Skript wird geladen und ausgeführt, wenn auf irgendeine Route Ihrer Anwendung zugegriffen wird. Next.js stellt sicher, dass das Skript nur einmal geladen wird, selbst wenn ein Benutzer zwischen mehreren Seiten navigiert.

Empfehlung: Wir empfehlen, Drittanbieter-Skripte nur in bestimmten Seiten oder Layouts einzubinden, um unnötige Auswirkungen auf die Leistung zu minimieren.

Strategie

Obwohl das Standardverhalten von next/script es ermöglicht, Drittanbieter-Skripte in jeder Seite oder jedem Layout zu laden, können Sie das Ladeverhalten mit der strategy-Eigenschaft feinjustieren:

• beforeInteractive: Lädt das Skript vor jeglichem Next.js-Code und vor der Hydratation der Seite.
• afterInteractive: (Standard) Lädt das Skript früh, aber nachdem ein Teil der Hydratation der Seite erfolgt ist.
• lazyOnload: Lädt das Skript später während der Leerlaufzeit des Browsers.
• worker: (experimentell) Lädt das Skript in einem Web Worker.

Lesen Sie die next/script-API-Referenzdokumentation, um mehr über jede Strategie und ihre Anwendungsfälle zu erfahren.

Auslagern von Skripten in einen Web Worker (experimentell)

Warnung: Die worker-Strategie ist noch nicht stabil und funktioniert noch nicht mit dem app-Verzeichnis. Mit Vorsicht verwenden.

Skripte, die die worker-Strategie verwenden, werden mit Partytown in einen Web Worker ausgelagert und dort ausgeführt. Dies kann die Leistung Ihrer Website verbessern, indem der Hauptthread für den Rest Ihres Anwendungscodes freigehalten wird.

Diese Strategie ist noch experimentell und kann nur verwendet werden, wenn das nextScriptWorkers-Flag in next.config.js aktiviert ist:

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

Führen Sie dann next aus (normalerweise npm run dev oder yarn dev), und Next.js wird Sie durch die Installation der erforderlichen Pakete zur Fertigstellung des Setups führen:

npm run dev

Sie werden Anweisungen wie diese sehen: Bitte installieren Sie Partytown durch Ausführen von npm install @builder.io/partytown

Sobald das Setup abgeschlossen ist, wird durch die Definition von strategy="worker" automatisch Partytown in Ihrer Anwendung initialisiert und das Skript in einen Web Worker ausgelagert.

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" />
    </>
  )
}

Es gibt eine Reihe von Abwägungen, die beim Laden eines Drittanbieter-Skripts in einem Web Worker berücksichtigt werden müssen. Weitere Informationen finden Sie in der Tradeoffs-Dokumentation von Partytown.

Inline-Skripte

Inline-Skripte, also Skripte, die nicht aus einer externen Datei geladen werden, werden ebenfalls von der Script-Komponente unterstützt. Sie können geschrieben werden, indem der JavaScript-Code in geschweifte Klammern gesetzt wird:

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

Oder durch Verwendung der dangerouslySetInnerHTML-Eigenschaft:

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

Warnung: Für Inline-Skripte muss eine id-Eigenschaft zugewiesen werden, damit Next.js das Skript verfolgen und optimieren kann.

Ausführen zusätzlichen Codes

Ereignishandler können mit der Script-Komponente verwendet werden, um zusätzlichen Code auszuführen, nachdem ein bestimmtes Ereignis eingetreten ist:

• onLoad: Führt Code aus, nachdem das Skript fertig geladen wurde.
• onReady: Führt Code aus, nachdem das Skript fertig geladen wurde und jedes Mal, wenn die Komponente eingebunden wird.
• onError: Führt Code aus, wenn das Skript nicht geladen werden kann.

Diese Handler funktionieren nur, wenn next/script importiert und in einer Client-Komponente verwendet wird, in der "use client" als erste Codezeile definiert ist:

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')
        }}
      />
    </>
  )
}

Lesen Sie die next/script-API-Referenz, um mehr über jeden Ereignishandler zu erfahren und Beispiele zu sehen.

Zusätzliche Attribute

Es gibt viele DOM-Attribute, die einem <script>-Element zugewiesen werden können und die nicht von der Script-Komponente verwendet werden, wie nonce oder benutzerdefinierte Datenattribute. Das Einfügen zusätzlicher Attribute führt automatisch dazu, dass sie an das finale, optimierte <script>-Element weitergeleitet werden, das in das HTML eingebunden wird.

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"
      />
    </>
  )
}