스크립트 태그에 Partytown 유형을 사용하여 웹 사이트 성능을 향상시키십시오.

9067 단어 reactperformancewebdevjavascript
web worker에서 Google 태그 관리자를 사용할 수 있습니까? <script type="text/partytown">는 새로운 표준인가요? 이 새로운 script 유형이 무엇이며 GTM 및 Next.js를 사용하는 예를 통해 워크로드를 main thread에서 작업자로 쉽게 이동하는 방법을 살펴보겠습니다. 그런 다음 바닐라 JS 및 Facebook Pixel, Mixpanel, Amplitude 등과 같은 기타 타사 스크립트를 사용하여 이를 구현할 수 있습니다.

파티타운 🎉이 무엇인가요?



Partytown은 GTM에서 사용되는 dataLayer.push()와 같이 통신 채널을 생성하는 웹 작업자로 스크립트를 재배치하는 데 도움이 되는 라이브러리입니다. GTM이 작업자에 로드된 경우 dataLayer.push()에 대한 모든 호출은 기본 스레드에서 작업자 스레드로 전달되어야 하며 Partytown은 이를 자동으로 해결합니다! 또한 웹 작업자에서 실행되는 코드가 DOM에 동기식으로 액세스할 수 있도록 하므로 타사 스크립트가 코딩된 방식과 변경 없이 정확하게 실행할 수 있습니다.



작업자용 스크립트 태그 생성



작업자에서 코드를 실행하려면 type="text/partytown" 를 사용하십시오. 브라우저는 script 태그를 무시하고 해당 유형을 인식하지 못하고 Partytown은 웹 작업자 내부에서 해당 유형script을 로드합니다. 이것은 인라인 코드 또는 파일에 대해 작동합니다.

<script type="text/partytown">
  /* GTM Script Here */
</script>
<script type="text/partytown" src="https://example.com/analytics.js"></script>


포워드는 어디에 있습니까?



작업자에 대한 함수 호출forward을 위해 인라인된 Partytownwindow 앞에 있는 script 개체에 구성을 추가하기만 하면 됩니다.

<script>
  window.partytown = { forward: ['dataLayer.push'] };
</script>
<script type="text/partytown">
  /* GTM script here */
</script>


이제 메인 스레드에서 window.dataLayer.push()를 사용할 수 있습니다. 🙌

Next.js에서 작업자 사용



Next.js 웹사이트에서 Partytown을 설정하는 것은 매우 쉽습니다! Next.jsv12.1.1 이상이 필요합니다.

🧠 이것은 Next.js의 실험적 기능이며 semver에서 다루지 않는다는 점을 기억하세요. 🙀

먼저 next.config.js 파일에서 실험적 플래그를 활성화해야 합니다.

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


그리고 Partytown 패키지를 설치합니다.

npm install --save-dev @builder.io/partytown


Next.js 작업자는 추가 구성이 필요하지 않지만 이 예에서는 forward를 dataLayer.push 해야 합니다. 사용자 지정<Head> 내부의 _document.js 구성 요소에 이 구성을 포함해야 합니다.

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

const Document = () => (
  <Html>
    <Head>
      <script
        data-partytown-config
        dangerouslySetInnerHTML={{
          __html: `
            partytown = {
              lib: '/_next/static/~partytown/',
              debug: true,
              forward: ['dataLayer.push']
            };
          `
        }}
      />
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
);

export default Document;


💡 debug: true 설정은 DevTools의 콘솔에서 유용한 정보를 제공합니다.

마지막으로 _app.js 에 GTM 스크립트를 추가할 수 있습니다.

import Script from 'next/script'; 

const MyApp = ({ Component, pageProps }) => (
  <>
    <Script
      id="gtm-script"
      strategy="worker"
      dangerouslySetInnerHTML={{
        __html: `/* GTM script here */`
      }}
    />
    <Component {...pageProps} />
  </>
);

export default MyApp;


Next.js가 스크립트를 추적하고 최적화하도록 하려면 인라인 스크립트에 id 속성이 필요합니다.

그리고 끝났습니다! GTM은 항상 그렇듯이 dataLayer.push를 사용하여 통신할 수 있는 작업자에서 실행됩니다.

React , Angular , Nuxt 및 more 에 대한 설치 지침을 찾을 수 있습니다.

결론



너무 많은 JavaScript는 DOM 구성을 차단하여 페이지 렌더링 속도를 지연시킬 수 있습니다. 메인 스레드에서 자바스크립트를 줄이는 것은 상호작용까지 걸리는 시간을 줄이는 좋은 전략입니다. 이렇게 하면 기본 스레드 리소스가 해제되어 기본 웹 앱 실행에 사용할 수 있습니다. 네트워크 요청.

Partytown을 사용하면 웹 작업자 내에서 읽기 및 쓰기 기본 스레드 DOM 작업을 동기식으로 사용할 수 있습니다. 웹사이트의 응답성을 높이기 위해 마이크로프론트엔드 애플리케이션에서 이것이 사용될 수 있는지 궁금합니다.

귀하의 웹사이트에 대한 성능 향상을 위해 이곳을 찾으셨다면 이 정보가 도움이 되셨기를 바랍니다. 작업자와 생산 경험이 있습니까? 이전에 Partytown을 사용한 적이 있습니까? 댓글로 알려주세요.
🚀 Github Actions: 다른 워크플로에서 워크플로를 트리거하는 간단한 방법
【jQuery~hasClass 메소드~】공부 메모 ⑤

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage