✂️ 代码拆封（Code Splitting）

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 的文档。