コード分​​割

コード分割

Parcel は、すぐに使える構成ゼロのコード分割をサポートしています。これにより、アプリケーション コードをオンデマンドでロードできる独立したバンドルに分割できるため、初期バンドル サイズが小さくなり、ロード時間が短縮されます。ユーザーがアプリケーションでモジュールを参照し、それをロードする必要がある場合、Parcel はオンデマンドでサブパッケージのロードを自動的に処理します。
コード分割は、動的な import() 関数を使用した構文提案によって制御されます。この関数は通常の import ステートメントまたは require 関数と同様に機能しますが、Promise を返します。これは、モジュールが非同期でロードされることを意味します。
次の例は、動的インポートを使用してアプリケーションのサブページをオンデマンドで読み込む方法を示しています。

// 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-polyfill と babel-runtime のドキュメントをお読みください。