Lazy Modules

Lazy Modulesは、ホームページ/ビューに必要な機能のみを最初にロードし、それらを使用するページに移動するときに追加のモジュール/コンポーネントをロードすることで、Webアプリの起動時間を大幅に高速化する方法を提供します。これにより、初期アプリのスクリプトとスタイルが大幅に小さくなり、WebアプリまたはPWAを構築する際に非常に重要になります。

Framework7では、ESモジュールと「ブラウザモジュール」の2種類のモジュールが利用できます。ESモジュールを使用するには、WebpackやRollupのようなimport/exportをサポートするバンドラーを使用する必要があります。ブラウザモジュールは、バンドラーを使用しない場合にのみ使用するように設計されています。

モジュールAPI

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モジュールコンポーネントをインポートできます（他のすべてのコンポーネントはコアの一部です）。