✂️ 代码拆分(Code Splitting)

Parcel 支持零配置代码拆分,并且开箱即用。这允许您将应用程序的代码拆分成单独的包,这些包可以按需加载,这意味着更小的初始包大小和更短的加载时间。随着用户在应用程序中浏览相应的模块需要加载,Parcel 会自动负责按需加载子捆绑包。

代码拆分时通过使用动态 import() 函数的语法提案来控制的,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象。这意味着模块是异步加载的。

以下示例展示了如何使用动态导入(dynamic import)来按需加载应用程序的子页面。

  1. // pages/about.js
  2. export function render() {
  3. // 渲染页面
  4. }
  1. import('./pages/about').then(function(page) {
  2. // 渲染页面
  3. page.render()
  4. })

因为 import() 返回一个 Promise,所以你也可以使用 async/await 语法。不过,在浏览器广泛支持它之前,你可能需要配置 Babel 来转换语法。

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

动态导入也会在 Parcel 中延迟加载,因此你仍然需要将所有的 import() 调用放在文件的顶部,并且在使用子捆绑包之前,它们不会被加载。以下示例展示如何动态地延迟加载应用程序的子页面。

  1. // 设置页面名称到动态引入的映射中。
  2. // 在使用前,这些页面都不会被加载。
  3. const pages = {
  4. about: import('./pages/about'),
  5. blog: import('./pages/blog')
  6. }
  7. async function renderPage(page) {
  8. // 懒加载请求页面。
  9. const page = await pages[page]
  10. return page.render()
  11. }

注意: 如果你仍然想在本地浏览器中使用不支持的语法 async/await ,切记需要在你的应用程序引入 babel-polyfill 或在你的库中引入 babel-runtime + babel-plugin-transform-runtime

  1. yarn add babel-polyfill
  1. import 'babel-polyfill'
  2. import './app'

请参阅 babel-polyfillbabel-runtime 的文档。

Bundle 解析

Parcel 可以自动推断 Bundle 的位置。这是在 bundle-url模块中完成的,并使用堆栈跟踪(Stack Trace)确定初始化加载 Bundle 的路径。

这意味着你不需要配置 Bundle 从哪里载入,但是你必须从相同位置提供 Bundle。

Parcel 目前可以在下列协议下解析 Bundle:http, https, file, ftp, chrome-extension and moz-extension

帮助我们改善文档

如果有遗漏或者不清楚的地方,请在本站的仓库 提交issue 或者 编辑此页面.