Lazy Modules

Lazy Modules available from Framework7 version 3.4.0.

Lazy modules provide a way to make your web app startup time much faster, by loading initially only functionality required for home page/view, and load additional modules/components when navigating to pages that use them. This will make your initial app scripts and styles a way more smaller size, which is significant when you build a web app or PWA.

There are two type of modules available with Framework7. ES-modules and "browser modules". To use ES-modules you need to use bundler with import/export support like Webpack or Rollup. Browser modules are designed only to be used when you don't use any bundler.

Modules API

To load Framework7 modules after it was initialized we need to use following app methods:

app.loadModule(module) - load module

  • module - one of the following:
    - object with Framework7 Plugin
    - function that returns Framework7 Plugin
    - string with module name to load (e.g. 'searchbar')
    - string with module path to load (e.g. 'path/to/components/searchbar.js')

Method returns Promise

app.loadModules(modules) - load modules

  • modules - array with modules, where each array item one of the described above

Method returns Promise

ES Modules

This method will only work if you use bundler like Webpack or Rollup.

First of all, we need to realize what modules our app requires to display initial page and import them:

// 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
});

Later when we need to install additional F7 module we can use dynamic imports:

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

If we need to load few modules at a time:

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(/* ... */)
  })

It may be not very convenient to write it every time so we can make a function for that:

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));
    })
}

And we can use it like:

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

If we need to preload modules for specific route then route's async is the best fit for it:

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',
        });
      });
    }
  }
]

The following ES-module components are available for importing (all other components are part of the core):

ComponentPath
Dialogframework7/components/dialog
Popupframework7/components/popup
LoginScreenframework7/components/login-screen
Popoverframework7/components/popover
Actionsframework7/components/actions
Sheetframework7/components/sheet
Toastframework7/components/toast
Preloaderframework7/components/preloader
Progressbarframework7/components/progressbar
Sortableframework7/components/sortable
Swipeoutframework7/components/swipeout
Accordionframework7/components/accordion
ContactsListframework7/components/contacts-list
VirtualListframework7/components/virtual-list
ListIndexframework7/components/list-index
Timelineframework7/components/timeline
Tabsframework7/components/tabs
Panelframework7/components/panel
Cardframework7/components/card
Chipframework7/components/chip
Formframework7/components/form
Inputframework7/components/input
Checkboxframework7/components/checkbox
Radioframework7/components/radio
Toggleframework7/components/toggle
Rangeframework7/components/range
Stepperframework7/components/stepper
SmartSelectframework7/components/smart-select
Gridframework7/components/grid
Calendarframework7/components/calendar
Pickerframework7/components/picker
InfiniteScrollframework7/components/infinite-scroll
PullToRefreshframework7/components/pull-to-refresh
DataTableframework7/components/data-table
Fabframework7/components/fab
Searchbarframework7/components/searchbar
Messagesframework7/components/messages
Messagebarframework7/components/messagebar
Swiperframework7/components/swiper
PhotoBrowserframework7/components/photo-browser
Notificationframework7/components/notification
Autocompleteframework7/components/autocomplete
Tooltipframework7/components/tooltip
Gaugeframework7/components/gauge
Skeletonframework7/components/skeleton
Pie Chartframework7/components/pie-chart
Area Chartframework7/components/area-chart
Typographyframework7/components/typography
Text Editorframework7/components/text-editor
Breadcrumbsframework7/components/breadcrumbs