程式碼拆封（Code Splitting）

程式碼拆封（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 的文件。