Parcel 代碼拆分(Code Splitting)

?? 代碼拆分(Code Splitting)

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

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

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

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

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

因?yàn)?nbsp;import() 返回一個(gè) Promise，所以你也可以使用 async/await 語(yǔ)法。不過(guò)，在瀏覽器廣泛支持它之前，你可能需要配置 Babel 來(lái)轉(zhuǎn)換語(yǔ)法。

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

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

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

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

注意： 如果你仍然想在本地瀏覽器中使用不支持的語(yǔ)法 async/await ，切記需要在你的應(yīng)用程序引入 babel-polyfill 或在你的庫(kù)中引入 babel-runtime + babel-plugin-transform-runtime 。

yarn add babel-polyfill

import 'babel-polyfill'
import './app'

請(qǐng)參閱 babel-polyfill 和 babel-runtime 的文檔。

Bundle 解析

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

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

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