延遲載入模組

延遲載入模組提供一種方法，可讓您的網路應用程式啟動時間大幅加快，方法是僅載入首頁/檢視最初需要的功能，並在導覽至使用這些功能的頁面時載入其他模組/元件。這將讓您的初始應用程式指令碼和樣式縮小許多，在您建置網路應用程式或 PWA 時，這一點非常重要。

Framework7 提供兩種類型的模組。ES 模組和「瀏覽器模組」。若要使用 ES 模組，您需要使用支援 import/export 的套件管理工具，例如 Webpack 或 Rollup。瀏覽器模組僅設計為在您不使用任何套件管理工具時使用。

模組 API

若要在 Framework7 初始化之後載入 Framework7 模組，我們需要使用以下應用程式方法

ES 模組

此方法僅在您使用 Webpack 或 Rollup 等套件管理工具時才會運作。

首先，我們需要了解我們的應用程式需要哪些模組才能顯示初始頁面，並匯入這些模組

// import core framework with core components only:
import Framework7 from 'framework7';

// import framework7 modules/components we need on initial page
import Searchbar from 'framework7/components/searchbar';
import Accordion from 'framework7/components/accordion';

// install core modules
Framework7.use([Searchbar, Accordion]);

// init app
var app = new Framework7({
  // f7 params
});

稍後，當我們需要安裝其他 F7 模組時，可以使用動態匯入

import('framework7/components/gauge')
  .then(module => app.loadModule(module.default))
  .then(() => {
    // module loaded and we can use gauge api
    app.gauge.create(/* ... */)
  })

如果我們需要一次載入多個模組

Promise
  .all([
    import('framework7/components/gauge'),
    import('framework7/components/calendar')
  ])
  .then((modules) => {
    // loaded module will be at ".default" prop of import result
    var modulesToLoad = modules.map(module => module.default);
    return app.loadModules(modulesToLoad);
  })
  .then(() => {
    // modules loaded and we can use their api
    app.gauge.create(/* ... */)
    app.calendar.create(/* ... */)
  })

每次都這麼寫可能不太方便，因此我們可以為此建立一個函式

function loadF7Modules(moduleNames) {
  var modulesToLoad = moduleNames.map((moduleName) => {
    return import(`framework7/components/${moduleName}`);
  });
  return Promise.all(modulesToLoad)
    .then((modules) => {
      return app.loadModules(modules.map(module => module.default));
    })
}

我們可以像這樣使用它

loadF7Modules(['gauge', 'calendar']).then(() => {
  // modules loaded and we can use their api
  app.gauge.create(/* ... */)
  app.calendar.create(/* ... */)
});

如果我們需要為特定路由預先載入模組，則路由的 async 最適合這樣做

var routes = [
  {
    path: '/',
    url: './index.html',
  },
  /* Page where we need Gauge and Calendar modules to be loaded */
  {
    path: '/gauge-calendar/',
    async: function ({ resolve }) {
      // load modules
      loadF7Modules(['gauge', 'calendar']).then(() => {
        // resolve route
        resolve({
          componentUrl: './gauge-calendar.html',
        });
      });
    }
  }
]

下列 ES 模組元件可供匯入（所有其他元件都是核心的一部分）