✂️ 코드 분할

Parcel 은 일체의 설정 없이(zero configuration) 코드 분할(splitting)을 지원합니다. 애플리케이션 코드를 필요할 때에 로드할 수 있는 각각의 번들로 분할 할 수 있습니다. 이로 인해 초기 번들이 더 작아지고 로드 시간이 더 빨리지게 됩니다. 사용자가 애플리케이션을 탐색하다 모듈이 필요해지면, Parcel 이 자동으로 필요한 하위 번들을 처리합니다.

코드 분할은 다이나믹 import() 함수 구문 제안으로 제어합니다. 이 함수는 보통의 importrequire함수처럼 움직이지만 프로미스(Promise)를 반환합니다. 이것은 모듈이 비동기적으로 로드됨을 의미합니다.

아래 예제는 다이나믹 임포트로 애플리케이션 요구에 따라 어떻게 서브페이지를 로드하는지 보여줍니다.

import('./pages/about').then(function(page) {
  // 페이지 렌더
  page.default()
})

import()가 프로미스를 반환하기 때문에 async/await 구문을 사용할 수 있습니다. 더 많은 브라우저가 이를 지원하기 전 까지는 Babel 을 구성하여 구문을 변환할 필요가 있을 겁니다.

const page = await import('./pages/about')
// 페이지 렌더
page.default()

다이나믹 임포트는 Pacel 에서 지연 로드 됩니다. 따라서 모든 import() 호출을 파일 최상위에 놓고 하위 번들이 사용되기 전까지 로드되지 않게 할 수 있습니다. 아래 예제는 애플리케이션 서브페이지가 동적으로 지연 로드되는 방식을 보여줍니다.

// 다이나믹 임포트 할 페이지 이름을 준비.
// 사용되기 전까지 로드 되지 않음.
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
}

async function renderPage(name) {
  // 요청 페이지 로드 지연
  const page = await pages[name]
  return page.default()
}

주의: 만약 브라우저에서 async/await 를 사용하고 싶다면, babel-polyfill을 앱에 포함시키거나 babel-runtime + babel-plugin-transform-runtime이 라이브러리에 있어야 합니다. 그냥 사용하려고 하지 마세요.

yarn add babel-polyfill
import 'babel-polyfill'
import './app'

babel-polyfillbabel-runtime를 읽어보세요.

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.