Fractionnement du code

Code Splitting

Parcel prend en charge le fractionnement de code sans configuration dès la sortie de la boîte. Cela vous permet de diviser le code de votre application en bundles indépendants qui peuvent être chargés à la demande, ce qui signifie des tailles de bundle initiales plus petites et des temps de chargement plus rapides. Lorsqu'un utilisateur parcourt un module dans l'application et doit le charger, Parcel se charge automatiquement du chargement des sous-packages à la demande.
Le fractionnement du code est contrôlé par des propositions de syntaxe à l'aide de la fonction dynamique import(), qui fonctionne comme une instruction d'importation normale ou une fonction require, mais renvoie une promesse. Cela signifie que les modules sont chargés de manière asynchrone.
L'exemple suivant montre comment utiliser les importations dynamiques pour charger des sous-pages de votre application à la demande.

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

Puisque import() renvoie une Promise , vous pouvez également utiliser la syntaxe async/await. Vous devrez peut-être configurer Babel pour transporter la syntaxe jusqu'à ce que les navigateurs bénéficient d'une prise en charge plus large.

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

Les importations dynamiques sont également chargées paresseusement dans Parcel, vous pouvez donc toujours placer tous vos appels import() en haut du fichier et ils ne seront pas chargés tant que le sous-paquet ne sera pas utilisé. L'exemple suivant montre comment charger dynamiquement et paresseusement les sous-pages d'une application.

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

Remarque : si vous souhaitez utiliser async/await dans un navigateur qui ne le prend pas en charge nativement, n'oubliez pas d'introduire babel-polyfill dans votre application ou babel-runtime dans la bibliothèque +

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

Veuillez lire babel- Documentation pour polyfill et babel-runtime.