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