자바스크립트 동적 가져오기 + Next.js

이 기사는 원래 제 개인 blog 에 게시되었습니다.

Dynamic import() introduces a new function-like form of import that unlocks new capabilities compared to static import. This article compares the two and gives an overview of what’s new. V8 implementation

일반 가져오기 구문을 알고 있다고 가정합니다. 멋지긴 하지만 너무 정적이고 엄격합니다. 모르는 경우 this을 읽고 아이디어를 얻으세요. Next.js에서 이와 유사한 것을 살펴보겠습니다.

소개 👋

이 작은 기사에서 동적 가져오기에 대해 가르치는 것이 아니라 Next.js에서 동적 가져오기에 대한 몇 가지 아이디어를 구체적으로 제공할 것입니다. , 그래서 내가 수정했다면 당신이 그것을 수정하기를 기대합니다.

검토 또는 소개를 위해 이 예제와 같이 동적 가져오기를 구현할 수 있지만 이는 좋지 않습니다.

// 📁 say.js
export function hi() {
  alert(`Hello`);
}

export function bye() {
  alert(`Bye`);
}
// example from https://javascript.info/modules-dynamic-imports
// another file

// regular import 
import { bye, hi } from './say.js';
// dynamic import  
let { bye, hi } = await import('./say.js');

다음

Next.js에서 우리는 그것을 어디에 사용합니까? 구체적으로 알지 못하지만 사용하는 몇 가지 상황을 알고 있습니다. 예를 들면 다음과 같습니다.

거대한 구성 요소는 우리를 귀찮게 하고 페이지 로딩 속도를 늦춥니다. 그래서 우리는 그것을 *동적 가져오기*로 시작할 수 있습니다. 즉, 우리는 초기 로딩 페이지 이후에 로드합니다(지연 로딩). 왜냐하면 우리는 원하지 않기 때문에 시간을 낭비하는 브라우저. 즉, Next.js는 코드를 관리 가능한 다른 청크로 분할합니다. 이를 통해 필요한 구성 요소만 로드할 수 있습니다.

같은 방법으로 완벽한 사진과 같은 다른 대용량 파일을 처리합니다.

Next.js는 React.Lazy & Suspense이 SSR 또는 ... 지금 준비되지 않았기 때문에 다른 유사한 방식으로 구현했습니다. 나는 다른 이유가 있다고 생각합니다.

내가 이 글을 쓰는 이유는 이 글을 읽고 있는 블로그에서 TTFB에 문제가 있어서 여기에 공유하고자 합니다.

거대한 구성 요소

이 블로그는 마크다운 블로그이므로 마크다운 엔진이 필요하고 마크다운 내부에는 코드 샘플을 사용하고 코드 샘플에는 마크다운 엔진이나 구성 요소에 전달해야 하는 구문 형광펜이 필요합니다. 여기 요점이 있습니다. 마크다운 구성 요소와 구문 형광펜은 너무 큰 구성 요소이며 정기적으로 사용할 때 TTFB(페이지 로딩)에 영향을 미치므로 다음과 같이 사용했습니다.

import ReactMarkdown from "react-markdown/with-html"; // 157.2 KB
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; // 495.1 KB

크기만 봐도 미쳤다.
그래서 Next.js에서 동적 가져오기에 대해 배웠고 다음과 같이 구현했습니다.

import dynamic from 'next/dynamic'; // Next.js dynamic
// const Component = dynamic(() => import('Your component'),{...options})
const ReactMarkdown = dynamic(() => import('react-markdown/with-html'), { loading: () => '🐞...' });
const SyntaxHighlighter = dynamic(() => import('react-syntax-highlighter/dist/cjs/prism'));

React에서는 React.Lazy 구문을 사용했지만 Next.js에서는 약간 다르며 대신 dynamic을 사용하고 그 안에 import()를 래핑합니다. 이 방법에는 다음과 같이 사용할 수 있는 몇 가지 옵션이 있습니다.

ssr: 기본값은 true이고 false로 설정하면 구성 요소가 클라이언트 측에서 처리됩니다.

loading: 구성 요소가 로드 상황에 있을 때 무언가를 표시합니다.

기타

거대한 이미지나 다른 것이 있는 경우 import() 또는 require()만 사용하여 처리할 수 있습니다. 예를 들어 다음과 같이 동적이 필요하지 않습니다.

<Image
        src={require(`../path/to/image.png`)}
        className='w-full'
    />

메모

나처럼 집착하지 마세요. 때로는 TTFB 문제나 거대한 구성 요소가 없기 때문에 동적 가져오기가 필요하지 않습니다. 당신이 브라우저이고 누군가가 당신이 15줄 구성 요소를 다루기에는 너무 약하다고 생각한다고 상상해보십시오. 당신은 무엇을 할거야?
React re-rendering에 문제가 없을 때 순수 컴포넌트나 메모를 사용하는 것과 같습니다.

이 작은 기사를 즐겼기를 바라며 내 기사에 대한 반응과 공유를 잊지 마세요. 저에게 말하고 싶은 것이 있으면 다른 곳에서 저를 언급하십시오. 내 blog에서도 내 뉴스레터를 구독할 수 있습니다.

표지 사진 Tanya Pro Unsplash