遅延モジュール

遅延モジュールは、Framework7 version 3.4.0から利用可能です。

遅延モジュールは、ホームページやビューに必要な機能のみを初期にロードし、それらを使用するページに移動した際に追加のモジュールやコンポーネントをロードすることで、ウェブアプリの起動時間を大幅に短縮する方法を提供します。これにより、ウェブアプリやPWAを構築する際に重要となる、初期アプリのスクリプトやスタイルのサイズをより小さくすることができます。

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

モジュール API

Framework7のモジュールを初期化後にロードするには、以下のappメソッドを使用する必要があります。

app.loadModule(module) - load module

module - 以下のいずれかです。
- Framework7 プラグインを持つオブジェクト。
- Framework7 Pluginを返すfunction。
- string 読み込みたいモジュール名（例：'searchbar'）。
- string 読み込みたいモジュールのパス（例：'path/to/components/searchbar.js'）。

メソッドは、モジュールを含むPromise

app.loadModules(modules) - load modules

modules - 配列を返します。各配列の項目には、上で説明したモジュールのいずれかが入ります。

メソッドはPromiseを返します。

ESモジュール

このメソッドは、WebpackやRollupなどのバンドルラーを使用している場合にのみ動作します。

まず、アプリが初期ページを表示するのに必要なモジュールを把握し、それらをインポートする必要があります。

// import core コアコンポーネントのみのフレームワーク。
import Framework7 from 'framework7';

// import framework7 初期ページに必要なモジュール/コンポーネント
import Searchbar from 'framework7/components/searchbar';
import Accordion from 'framework7/components/accordion';

// コアモジュールのインストール
Framework7.use([Searchbar, Accordion]);

// アプリの起動
var app = new Framework7({
  // F7パラメータ
});

後でF7モジュールを追加でインストールする必要がある場合は、動的なインポートを使用できます。

import('framework7/components/gauge')
  .then(module => app.loadModule(module.default))
  .then(() => {
    // モジュールがロードされ、ゲージアピを使用することができます。
    app.gauge.create(/* ... */)
  })

一度にいくつかのモジュールをロードする必要がある場合。

Promise
  .all([
    import('framework7/components/gauge'),
    import('framework7/components/calendar')
  ])
  .then((modules) => {
    // ロードされたモジュールは、インポート結果の".default "プロップに表示されます。
    var modulesToLoad = modules.map(module => module.default);
    return app.loadModules(modulesToLoad);
  })
  .then(() => {
    // モジュールがロードされ、その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(() => {
  // モジュールがロードされ、それらの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 }) {
      // モジュールのロード
      loadF7Modules(['gauge', 'calendar']).then(() => {
        // ルートの解決
        resolve({
          componentUrl: './gauge-calendar.html',
        });
      });
    }
  }
]

以下のESモジュールコンポーネントがインポート可能です（他のコンポーネントはすべてコアの一部です）。

Component	Path
Dialog	`framework7/components/dialog`
Popup	`framework7/components/popup`
LoginScreen	`framework7/components/login-screen`
Popover	`framework7/components/popover`
Actions	`framework7/components/actions`
Sheet	`framework7/components/sheet`
Toast	`framework7/components/toast`
Preloader	`framework7/components/preloader`
Progressbar	`framework7/components/progressbar`
Sortable	`framework7/components/sortable`
Swipeout	`framework7/components/swipeout`
Accordion	`framework7/components/accordion`
ContactsList	`framework7/components/contacts-list`
VirtualList	`framework7/components/virtual-list`
ListIndex	`framework7/components/list-index`
Timeline	`framework7/components/timeline`
Tabs	`framework7/components/tabs`
Panel	`framework7/components/panel`
Card	`framework7/components/card`
Chip	`framework7/components/chip`
Form	`framework7/components/form`
Input	`framework7/components/input`
Checkbox	`framework7/components/checkbox`
Radio	`framework7/components/radio`
Toggle	`framework7/components/toggle`
Range	`framework7/components/range`
Stepper	`framework7/components/stepper`
SmartSelect	`framework7/components/smart-select`
Grid	`framework7/components/grid`
Calendar	`framework7/components/calendar`
Picker	`framework7/components/picker`
InfiniteScroll	`framework7/components/infinite-scroll`
PullToRefresh	`framework7/components/pull-to-refresh`
Lazy	`framework7/components/lazy`
DataTable	`framework7/components/data-table`
Fab	`framework7/components/fab`
Searchbar	`framework7/components/searchbar`
Messages	`framework7/components/messages`
Messagebar	`framework7/components/messagebar`
Swiper	`framework7/components/swiper`
PhotoBrowser	`framework7/components/photo-browser`
Notification	`framework7/components/notification`
Autocomplete	`framework7/components/autocomplete`
Tooltip	`framework7/components/tooltip`
Gauge	`framework7/components/gauge`
Skeleton	`framework7/components/skeleton`
Menu	`framework7/components/menu`
Pie Chart	`framework7/components/pie-chart`
Area Chart	`framework7/components/area-chart`
Typography	`framework7/components/typography`
Text Editor	`framework7/components/text-editor`

ブラウザモジュール

ブラウザモジュールは、（WebpackやRollupなどの）バンドルラーを使わない開発セットアップでの使用を想定しています。

まず、メインの app layout では、フレームワーク全体を含む framework7-bundle.js や framework7-bundle.css のスクリプトやスタイルではなく、いわゆるミニマムコアの Framework7 ライブラリを使用する必要があります。

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Framework7コアライブラリCSSへのパス -->
    <link rel="stylesheet" href="path/to/framework7/framework7.min.css">
    <!-- カスタムアプリのスタイルへのパス-->
    <link rel="stylesheet" href="path/to/my-app.css">
  </head>
  <body>
    <div id="app">
      ...
    </div>
    <!-- Framework7コアライブラリJSへのパス-->
    <script type="text/javascript" src="path/to/framework7/framework7.min.js"></script>
    <!-- あなたのアプリの js へのパス-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

また、初期ページに必要なモジュールやコンポーネントを framework7 のスタイルやスクリプトの後に含める必要があります。検索バーやアコーディオンが必要な場合、アプリのレイアウトにそれらを含める必要があります。

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Framework7コアライブラリCSSへのパス -->
    <link rel="stylesheet" href="path/to/framework7/framework7.min.css">
    <!-- 初期ページに必要なモジュールを含める -->
    <link rel="stylesheet" href="path/to/framework7/components/accordion/accordion.css">
    <link rel="stylesheet" href="path/to/framework7/components/searchbar/searchbar.css">
    <!-- カスタムアプリのスタイルへのパス-->
    <link rel="stylesheet" href="path/to/my-app.css">
  </head>
  <body>
    <div id="app">
      ...
    </div>
    <!-- Framework7コアライブラリJSへのパス-->
    <script type="text/javascript" src="path/to/framework7/framework7.min.js"></script>
    <!-- 初期ページに必要なモジュールを含める -->
    <script type="text/javascript" src="path/to/framework7/components/accordion/accordion.js"></script>
    <script type="text/javascript" src="path/to/framework7/components/searchbar/searchbar.js"></script>
    <!-- アプリのjsへのパス-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

さて、Framework7アプリを初期化する際には、残りのモジュールがどこにあるのかを、lazyModulesPathパラメータで指定する必要があります（/components/フォルダへのパス）。

var app = new Framework7({
  // ...
  lazyModulesPath: 'path/to/framework7/components',
});

これで、モジュールの名前を指定するだけで、モジュールをロードすることができます（指定した lazyModulesPath にあるファイル名のファイルを自動的に取得します）。

app.loadModules(['calendar', 'gauge']).then(() => {
  // モジュールがロードされ、そのAPIを使えるようになりました
  app.gauge.create(/* ... */)
  app.calendar.create(/* ... */)
});

ブラウザモジュールは、モジュールのスタイルも自動的に読み込むことに注意してください。つまり、gauge.js をロードすると、gauge.css スタイルシートも自動的にロードされます。

つまり、上記の式 app.loadModules(['calendar', 'gauge']) は、以下のファイルを読み込むことになります。

パス/to/framework7/components/calendar/calendar.js
パス/to/framework7/components/calendar/calendar.css
パス/to/framework7/components/gauge/gauge.js
パス/to/framework7/components/gauge/gauge.css

特定のルートに対してモジュールをプリロードする必要があり、ブラウザモジュールを使用している場合は、ルートの modules プロパティを使用することができます。

var routes = [
  {
    path: '/',
    url: './index.html',
  },
  /* Page where we need Gauge and Calendar modules to be loaded */
  {
    path: '/gauge-calendar/',
    modules: ['gauge', 'calendar'], // will load these components before loading route
    componentUrl: './gauge-calendar.html',
  }
]

または、ESモジュールの例のように、同じように async ルートを使用します。

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

以下のブラウザモジュール-コンポーネントがロード可能です（その他のコンポーネントはすべてコアの一部です）。

Component	Name	Path
Dialog	`dialog`	`framework7/components/dialog/dialog.js`
Popup	`popup`	`framework7/components/popup/popup.js`
LoginScreen	`login-screen`	`framework7/components/login-screen/login-screen.js`
Popover	`popover`	`framework7/components/popover/popover.js`
Actions	`actions`	`framework7/components/actions/actions.js`
Sheet	`sheet`	`framework7/components/sheet/sheet.js`
Toast	`toast`	`framework7/components/toast/toast.js`
Preloader	`preloader`	`framework7/components/preloader/preloader.js`
Progressbar	`progressbar`	`framework7/components/progressbar/progressbar.js`
Sortable	`sortable`	`framework7/components/sortable/sortable.js`
Swipeout	`swipeout`	`framework7/components/swipeout/swipeout.js`
Accordion	`accordion`	`framework7/components/accordion/accordion.js`
ContactsList	`contacts-list`	`framework7/components/contacts-list/contacts-list.js`
VirtualList	`virtual-list`	`framework7/components/virtual-list/virtual-list.js`
ListIndex	`list-index`	`framework7/components/list-index/list-index.js`
Timeline	`timeline`	`framework7/components/timeline/timeline.js`
Tabs	`tabs`	`framework7/components/tabs/tabs.js`
Panel	`panel`	`framework7/components/panel/panel.js`
Card	`card`	`framework7/components/card/card.js`
Chip	`chip`	`framework7/components/chip/chip.js`
Form	`form`	`framework7/components/form/form.js`
Input	`input`	`framework7/components/input/input.js`
Checkbox	`checkbox`	`framework7/components/checkbox/checkbox.js`
Radio	`radio`	`framework7/components/radio/radio.js`
Toggle	`toggle`	`framework7/components/toggle/toggle.js`
Range	`range`	`framework7/components/range/range.js`
Stepper	`stepper`	`framework7/components/stepper/stepper.js`
SmartSelect	`smart-select`	`framework7/components/smart-select/smart-select.js`
Grid	`grid`	`framework7/components/grid/grid.js`
Calendar	`calendar`	`framework7/components/calendar/calendar.js`
Picker	`picker`	`framework7/components/picker/picker.js`
InfiniteScroll	`infinite-scroll`	`framework7/components/infinite-scroll/infinite-scroll.js`
PullToRefresh	`pull-to-refresh`	`framework7/components/pull-to-refresh/pull-to-refresh.js`
Lazy	`lazy`	`framework7/components/lazy/lazy.js`
DataTable	`data-table`	`framework7/components/data-table/data-table.js`
Fab	`fab`	`framework7/components/fab/fab.js`
Searchbar	`searchbar`	`framework7/components/searchbar/searchbar.js`
Messages	`messages`	`framework7/components/messages/messages.js`
Messagebar	`messagebar`	`framework7/components/messagebar/messagebar.js`
Swiper	`swiper`	`framework7/components/swiper/swiper.js`
PhotoBrowser	`photo`	`framework7/components/browser/photo-browser/browser/photo-browser.js`
Notification	`notification`	`framework7/components/notification/notification.js`
Autocomplete	`autocomplete`	`framework7/components/autocomplete/autocomplete.js`
Tooltip	`tooltip`	`framework7/components/tooltip/tooltip.js`
Gauge	`gauge`	`framework7/components/gauge/gauge.js`
Skeleton	`skeleton`	`framework7/components/skeleton/skeleton.js`
Menu	`menu`	`framework7/components/menu/menu.js`
Pie Chart	`pie-chart`	`framework7/components/pie-chart/pie-chart.js`
Area Chart	`area-chart`	`framework7/components/area-chart/area-chart.js`
Typography	`typography`	`framework7/components/typography/typography.js`
Text Editor	`text-editor`	`framework7/components/text-editor/text-editor.js`