Pemisahan Kod

Pembahagian Kod

Parcel menyokong pemisahan kod konfigurasi sifar dari kotak. Ini membolehkan anda membahagikan kod aplikasi anda kepada himpunan bebas yang boleh dimuatkan atas permintaan, bermakna saiz berkas awal yang lebih kecil dan masa muat yang lebih cepat. Apabila pengguna menyemak imbas modul dalam aplikasi dan perlu memuatkannya, Parcel secara automatik menguruskan pemuatan subpakej atas permintaan.
Pemisahan kod dikawal melalui cadangan sintaks menggunakan fungsi import() dinamik, yang berfungsi seperti penyataan import biasa atau memerlukan fungsi, tetapi mengembalikan Janji. Ini bermakna modul dimuatkan secara tidak segerak.
Contoh berikut menunjukkan cara menggunakan import dinamik untuk memuatkan subhalaman aplikasi anda atas permintaan.

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

Memandangkan import() mengembalikan Promise , anda juga boleh menggunakan sintaks tak segerak/menunggu. Anda mungkin perlu mengkonfigurasi Babel untuk mengangkut sintaks sehingga pelayar mendapat sokongan yang lebih luas.

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

Import dinamik juga malas dimuatkan dalam Parcel, jadi anda masih boleh meletakkan semua panggilan import() anda di bahagian atas fail dan ia tidak akan dimuatkan sehingga subpakej digunakan. Contoh berikut menunjukkan cara malas memuatkan subhalaman aplikasi secara dinamik.

// 设置页面名称到动态导入映射。
// 这些页面都不会被加载，直到使用前。
const pages = {
  about: import('./pages/about'),
  blog: import('./pages/blog')
};
async function renderPage(name) {
  // 延迟加载请求页面。
  const page = await pages[name];
  return page.default();
}

Nota: Jika anda ingin menggunakan async/tunggu dalam penyemak imbas yang tidak menyokongnya secara asli, sila ingat untuk memperkenalkan babel-polyfill dalam aplikasi anda atau babel-runtime dalam perpustakaan +

babel-plugin-transform-runtime 。
yarn add babel-polyfill
import "babel-polyfill";
import "./app";

Sila baca babel- Dokumentasi untuk polyfill dan babel-runtime.