代碼拆封（Code Splitting）

代碼拆封（Code Splitting）

Parcel 支持零配置代碼拆分，開箱即用。這使您可以將你的應(yīng)用程序代碼拆分為可以按需加載的獨(dú)立包，這意味著更小的初始包大小和更快的加載時間。 當(dāng)用戶在應(yīng)用程序中瀏覽模塊并需要加載時，Parcel 會自動負(fù)責(zé)按需加載子包。
代碼拆分是通過使用動態(tài)的import() 函數(shù)的 語法提案 來控制的，它的工作方式與普通的 import 語句或 require 函數(shù)類似，但返回一個 Promise 。 這意味著模塊是異步加載的。
以下示例顯示如何使用動態(tài)導(dǎo)入來按需加載應(yīng)用程序的子頁面。

// 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();

動態(tài)導(dǎo)入也會在 Parcel 中延遲加載，所以你仍然可以將所有的 import() 調(diào)用放在文件的頂部，并且在使用子包之前，它們將不會被加載。 以下示例顯示如何動態(tài)地延遲加載應(yīng)用程序的子頁面。

// 設(shè)置頁面名稱到動態(tài)導(dǎo)入映射。
// 這些頁面都不會被加載，直到使用前。
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
};
async function renderPage(name) {
  // 延遲加載請求頁面。
  const page = await pages[name];
  return page.default();
}

注意: 如果你想在本機(jī)不支持的瀏覽器中使用 async/await ，請記得在你的應(yīng)用中引入 babel-polyfill 或在庫中引入 babel-runtime +

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

請閱讀 babel-polyfill 和 babel-runtime 的文檔。