腳本優化

應用程式腳本

若要為所有路由載入第三方腳本，請導入 next/script 並直接在您的自訂 _app 中包含腳本：

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：（實驗性）在 web worker 中載入腳本。

請參閱 next/script API 參考文檔以深入了解每種策略及其使用案例。

將腳本卸載至 Web Worker（實驗性）

警告：worker 策略尚未穩定，且尚不適用於 app 目錄。請謹慎使用。

使用 worker 策略的腳本會被卸載並在 Partytown 的 web worker 中執行。這可以通過將主線程專用於應用程式的其餘代碼來提升網站性能。

此策略仍處於實驗階段，只有在 next.config.js 中啟用 nextScriptWorkers 標誌時才能使用：

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

然後，運行 next（通常是 npm run dev 或 yarn dev），Next.js 將引導您完成安裝所需套件的設置：

npm run dev

您將看到類似以下的指示：請通過運行 npm install @builder.io/partytown 來安裝 Partytown。

設置完成後，定義 strategy="worker" 將自動在您的應用程式中實例化 Partytown 並將腳本卸載至 web worker。

import Script from 'next/script'

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

在 web worker 中載入第三方腳本時需要考慮許多權衡。請參閱 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')
        }}
      />
    </>
  )
}

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