Question

Parcel 预设支援免设定的程式码分离 (Code Splitting)，可将你的程式分割为多个 bundle 并按需载入，这意味着初始化的 bundle 更小，且载入速度更快。

当使用者浏览你的网页时，Parcel 将会依照需求自动载入子 bundle。

程式码分离由动态的 import() 语法控制，它就像一般的 import 语法或 require 函式一样，差别在于其回传一个 Promise，这意味着模组可被动态地载入。

使用动态载入

下列的範例展示了如何在你的程式中动态载入子页面。

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

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

使用 async/await 动态载入

因 import() 回传 Promise，你也可以使用 async/await 语法，但在浏览器普遍支援以前，你可能需要设定 Babel 来转译语法。

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

在 Parcel 中，动态的 import 会被延迟载入 (Lazy Load)，所以你还是能将所有的 import() 放在档案顶部，只有用到子 bundle 时才会载入。

下列的範例展示了如何在程式中动态地延迟子页面的载入。

// 设定页面名称与动态 import 之间的对应关係
// 只有在它们被用到时才会被载入
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
}

async function renderPage(name) {
  // 延迟载入请求的页面
  const page = await pages[name]
  return page.render()
}

请注意：如你你想在尚未支援的浏览器中使用 async/await 语法，记得在你的 app 使用 babel-polyfill，或在你的函式库引入 babel-runtime 及 babel-plugin-transform-runtime。

yarn add babel-polyfill

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

请参阅 babel-polyfill 及 babel-runtime 的文件。

Bundle 解析

Parcel 会利用 bundle-url 模组来自动侦测 bundle 的位置，并使用堆叠追蹤（Stack Trace）来决定初始化 bundle 的载入路径。这表示你不需要亲自设定 bundle 要从何载入，但你必须将所有 bundle 放置于同一位置。

Parcel 目前可解析的协定有：http、https、file、ftp、chrome-extension 及 moz-extension。