동적 가져오기 - 빠른 응용 프로그램의 설계도

본고에서 자바스크립트 모듈의 동적 가져오기와 React 구성 요소의 지연 로드를 깊이 있게 연구할 것입니다.우리는 실제 사례를 통해 그들이 어떻게 작동하는지, 그리고 초기 패키지 크기를 줄여서 웹 응용 프로그램의 속도를 높일 수 있는지 연구할 것이다.정적 유형 시스템에서는 TypeScript를 사용하는 것이 일반적입니다.우리는 항상 의존항의 유형을 필요로 하지만, 만약 우리가 주의하지 않는다면, 그것은 우리가 실현하기 어려운 코드 분리를 파괴할 수도 있다.나는 너에게 그것을 피하기 위해 새로운 문법을 보여줄 것이다.

동적 가져오기
동적 가져오기는 TC39 프로세스의 4단계에 도달했으며 ECMAScript 2020 언어 사양에 포함됩니다.Webpack은 현재 가장 유행하는 JavaScript 모듈 바인딩기로서 2017년 v2가 발표된 이래 지원되고 있다.실행할 때 일부 프로그램을 불러올 수 있습니다.특정 상황에서만 심각한 의존성을 사용했을 수도 있고, 사용자의 선호에 따라 다국어 페이지에 필요한 로컬 파일을 불러오기만 할 수도 있습니다.이런 방식을 통해 너는 너의 사이트를 성능과 경량급의 동시에 만들 수 있다.
동적 가져오는 문법은 매우 간단합니다. import 키워드만 확장해서 괄호를 사용할 수 있고 괄호에 의존항을 포함하는 경로를 포함할 수 있습니다.

import('module/example').then(example => console.log(example.default)

This sytax looks like a function call, but it is not. Import is not defined as a function, it is a specific operator.

위의 코드는 실행할 때 모듈을 불러오고 기본적으로 컨트롤러에 기록합니다.이것은 기본 예시일 뿐입니다. 리셋 함수에서 모듈이 내보낸 모든 내용을 사용할 수도 있고, 여러 모듈을 동시에 불러올 수도 있습니다.전부
모든 유행하는 현대 패키지는 그것을 지원합니다. 동적 가져온 모듈을 자동으로 단독 패키지로 분리합니다.이 모듈이나 의존 항목의 모든 가져오기 문장은 프로젝트 전체에서 동적이어야 예상대로 작동할 수 있습니다.

반응을 보이다.게으르다
React 16.6 이후 React 어셈블리를 동적으로 가져올 수도 있습니다.React.lazy는 동적 가져오기를 처리하고 렌더링 가능한 React 구성 요소를 생성하는 함수입니다.가져온 함수를 반환하는 매개변수가 있습니다.

const MyComponent = React.lazy(() => import('./MyComponent'))

모듈 귀속기는 React.lazy 매개 변수에 따라 동적 가져오기를 처리할 것입니다. 위에서 말한 바와 같습니다.
중요한 것은 구성 요소가 가져오는 모듈의 기본 내보내기여야 한다는 것을 알아야 한다는 것이다.제공되지 않은 경우(예: 타사 라이브러리를 이름으로 내보내는 경우) 응용 프로그램에서 처리하는 모듈을 만들 수 있습니다.

export { Component as default } from 'react-library'

예비 모듈을 사용하여 임시 마운트에 반응해서 마운트가 지연된 모듈을 포장할 수 있습니다.동적 어셈블리가 로드될 때 예비(fallback)됩니다.

<Suspense fallback={<Loader />}>
    <MyComponent />
</Suspense>

가져오기 유형
이전에는 TypeScript가 컴파일된 JavaScript 코드에서 유형 가져오기만 생략하려고 했지만 정확하게 식별하고 삭제할 수 없었습니다.어떤 가장자리에서는, 가져오는 것이 형식으로만 사용되더라도 코드에 컴파일됩니다.그들은 3.8 버전의 언어에 이 문제를 방지하기 위해 새로운 문법을 추가했다.

import type { SomeType } from "external-dependency";

이런 방식을 통해 외부 형식을 자신 있게 사용할 수 있으며, 새로운 의존항을 패키지에 도입할 필요가 없습니다.자세한 내용은 TypeScript release note에서 확인할 수 있습니다.

실생활의 예
센스/Net에서 센스넷이라는 헤드리스 CMS를 개발하고 있습니다.우리 제품의 일부분은 사용자 인터페이스를 관리하는 것이다. 이것은 고객의 내용 관리를 간단하게 한다.그것은 많은 내부와 외부 의존 관계를 가진 복잡한 React 응용 프로그램이다.시간의 흐름에 따라 우리의 묶음이 커졌기 때문에 우리는 다양한 기술로 그것을 최적화하기 시작했다.그 중 하나는 지연 로드 페이지와 의존 항목을 더 잘 사용하는 것이다.
가장 큰 개선은 편집기를 불러오는 지연을 통해 이루어진 것이다.Visual Studio 코드를 지원하는 코드 편집기입니다.이 코드는 3페이지나 4페이지에서만 사용할 수 있도록 처리된 JavaScript 코드가 약 2MB 정도 됩니다.사용하지 않은 페이지에 불러오고 싶지 않을 거야.
우리는 상술한 모든 방법을 응용하여 코드를 하나의 블록으로 분리하고 필요에 따라 불러옵니다.프로그램의 여러 독립된 부분에서 사용하기 때문에 편집기를 가져올 때마다 변경해야 합니다.
재미있는 부분은 함수를 가져오는 사용이다.함수의 반환 값을 저장하기 위한 새로운 React 상태를 만들었습니다.useEffect에서 함수를 불러오고 호출하며 상태가 값이 될 때까지 로드 프로그램을 표시합니다.

export const Loader = (props) => {
  const [uri, setUri] = useState()

  useEffect(() => {
    ;(async () => {
      const { monaco } = await import('react-monaco-editor')
      setUri(monaco.Uri.parse(`sensenet:File`))
    })()
  }, [])

  if (!uri) {
    return <Loader />
  }
  ...
}

마지막 생각
한마디로 JavaScript와 그 생태계는 우리에게 응용 프로그램의 성능을 향상시킬 수 있는 많은 기회를 제공했다.사용자 체험의 가장 중요한 부분은 속도이기 때문에 이것은 절대로 노력할 가치가 있다.미래에 이런 최적화를 실현하는 것이 더욱 쉬울 것이라고 희망한다.
도움이 필요하거나 피드백이 있으면 언제든지 여기에 논평을 해 주십시오.
제 글을 읽어주셔서 감사합니다!만약 네가 좋아한다면, GitHub에 sensenet 별 하나를 주어라.나는 네가 give a try to our headless CMS for free할 수 있기를 바란다. 우리는 너의 피드백을 듣고 싶다.