코드 분할

코드 분할

Parcel은 기본적으로 제로 구성 코드 분할을 지원합니다. 이를 통해 애플리케이션 코드를 필요할 때 로드할 수 있는 독립적인 번들로 분할할 수 있습니다. 즉, 초기 번들 크기가 더 작고 로드 시간이 더 빠릅니다. 사용자가 애플리케이션에서 모듈을 찾아 로드해야 하는 경우 Parcel은 요청 시 자동으로 하위 패키지 로드를 처리합니다.
코드 분할은 일반 import 문이나 require 함수처럼 작동하지만 Promise를 반환하는 동적 import() 함수를 사용하는 구문 제안을 통해 제어됩니다. 이는 모듈이 비동기적으로 로드된다는 의미입니다.
다음 예에서는 동적 가져오기를 사용하여 요청 시 애플리케이션의 하위 페이지를 로드하는 방법을 보여줍니다.

// pages/about.js
export function render() {
  // 渲染页面
}
import('./pages/about').then(function (page) {
  // 渲染页面
  page.render();
});

import()가 Promise를 반환하므로 async/await 구문을 사용할 수도 있습니다. 브라우저가 더 폭넓게 지원될 때까지 구문을 전송하도록 Babel을 구성해야 할 수도 있습니다.

const page = await import('./pages/about');
// 渲染页面
page.default();

동적 가져오기도 Parcel에서 지연 로드되므로 모든 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-Documentation을 읽어보세요. 폴리필 및 바벨 런타임용.