?? 代碼拆分(Code Splitting)

Parcel 支持零配置代碼拆分，并且開箱即用。這允許您將應(yīng)用程序的代碼拆分成單獨的包，這些包可以按需加載，這意味著更小的初始包大小和更短的加載時間。隨著用戶在應(yīng)用程序中瀏覽相應(yīng)的模塊需要加載，Parcel 會自動負(fù)責(zé)按需加載子捆綁包。

代碼拆分時通過使用動態(tài) import() 函數(shù)的語法提案來控制的，該提案與普通 import 語句或 require 函數(shù)的類似，但返回一個 Promise 對象。這意味著模塊是異步加載的。

以下示例展示了如何使用動態(tài)導(dǎo)入(dynamic import)來按需加載應(yīng)用程序的子頁面。

// pages/about.js
export function render() {
  // 渲染頁面
}

import('./pages/about').then(function(page) {
  // 渲染頁面
  page.render()
})

因為 import() 返回一個 Promise，所以你也可以使用 async/await 語法。不過，在瀏覽器廣泛支持它之前，你可能需要配置 Babel 來轉(zhuǎn)換語法。

const page = await import('./pages/about')
// 渲染頁面
page.render()

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

// 設(shè)置頁面名稱到動態(tài)引入的映射中。
// 在使用前，這些頁面都不會被加載。
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
}

async function renderPage(page) {
  // 懶加載請求頁面。
  const page = await pages[page]
  return page.render()
}

注意： 如果你仍然想在本地瀏覽器中使用不支持的語法 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 的文檔。

Bundle 解析

Parcel 可以自動推斷 Bundle 的位置。這是在 bundle-url模塊中完成的，并使用堆棧跟蹤（Stack Trace）確定初始化加載 Bundle 的路徑。

這意味著你不需要配置 Bundle 從哪里載入，但是你必須從相同位置提供 Bundle。

Parcel 目前可以在下列協(xié)議下解析 Bundle：http, https, file, ftp, chrome-extension and moz-extension。