Code-Splitting

Code-Aufteilung

Parcel unterstützt die konfigurationsfreie Code-Aufteilung ab Werk. Dadurch können Sie Ihren Anwendungscode in unabhängige Bundles aufteilen, die bei Bedarf geladen werden können, was zu kleineren anfänglichen Bundle-Größen und schnelleren Ladezeiten führt. Wenn ein Benutzer ein Modul in der Anwendung durchsucht und es laden muss, kümmert sich Parcel bei Bedarf automatisch um das Laden von Unterpaketen.
Die Codeaufteilung wird durch Syntaxvorschläge mithilfe der dynamischen Funktion import() gesteuert, die wie eine normale Importanweisung oder Require-Funktion funktioniert, aber ein Promise zurückgibt. Das bedeutet, dass Module asynchron geladen werden.
Das folgende Beispiel zeigt, wie Sie dynamische Importe verwenden, um Unterseiten Ihrer Anwendung bei Bedarf zu laden.

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

Da import() ein Promise zurückgibt, können Sie auch die async/await-Syntax verwenden. Möglicherweise müssen Sie Babel so konfigurieren, dass die Syntax transportiert wird, bis Browser eine umfassendere Unterstützung bieten.

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

Dynamische Importe werden in Parcel auch verzögert geladen, sodass Sie alle Ihre import()-Aufrufe weiterhin oben in der Datei platzieren können und sie erst geladen werden, wenn das Unterpaket verwendet wird. Das folgende Beispiel zeigt, wie man Unterseiten einer Anwendung dynamisch verzögert lädt.

// 设置页面名称到动态导入映射。
// 这些页面都不会被加载，直到使用前。
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
};
async function renderPage(name) {
  // 延迟加载请求页面。
  const page = await pages[name];
  return page.default();
}

Hinweis: Wenn Sie async/await in einem Browser verwenden möchten, der es nicht nativ unterstützt, denken Sie bitte daran, babel-polyfill in Ihrer Anwendung oder babel-runtime in der Bibliothek einzuführen

babel-plugin-transform-runtime 。
yarn add babel-polyfill
import "babel-polyfill";
import "./app";

Bitte lesen Sie die Dokumentation von babel-polyfill und babel-runtime.