v7.0.9
Support Framework7
logo_github stars forks
logo_applelogo_androiddevice_desktop
sun_max_fillmoon_fill
SponsorsBecome a sponsor
Improve this Doc

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
Lazyframework7/components/lazy
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
Menuframework7/components/menu
Pie Chartframework7/components/pie-chart
Area Chartframework7/components/area-chart
Typographyframework7/components/typography
Text Editorframework7/components/text-editor
Breadcrumbsframework7/components/breadcrumbs

Browser Modules

Browser modules are intended to be used in development setup without bundlers (like Webpack or Rollup).

First of all, in our main app layout we need to use so called minimal core Framework7 library instead of framework7-bundle.js and framework7-bundle.css scripts and styles that contains whole framework.

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Path to Framework7 Core Library CSS -->
    <link rel="stylesheet" href="path/to/framework7/framework7.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="path/to/my-app.css">
  </head>
  <body>
    <div id="app">
      ...
    </div>
    <!-- Path to Framework7 Core Library JS-->
    <script type="text/javascript" src="path/to/framework7/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

We also need to inclued modules/components that we need on initial page after framework7 styles and script. If we need Searchbar and Accordion then we need to include them in app layout:

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Path to Framework7 Core Library CSS -->
    <link rel="stylesheet" href="path/to/framework7/framework7.min.css">
    <!-- Include modules required for initial page -->
    <link rel="stylesheet" href="path/to/framework7/components/accordion/accordion.css">
    <link rel="stylesheet" href="path/to/framework7/components/searchbar/searchbar.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="path/to/my-app.css">
  </head>
  <body>
    <div id="app">
      ...
    </div>
    <!-- Path to Framework7 Core Library JS-->
    <script type="text/javascript" src="path/to/framework7/framework7.min.js"></script>
    <!-- Include modules required for initial page -->
    <script type="text/javascript" src="path/to/framework7/components/accordion/accordion.lazy.js"></script>
    <script type="text/javascript" src="path/to/framework7/components/searchbar/searchbar.lazy.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

Now when we init Framework7 app we need to specify where is the rest of modules in lazyModulesPath parameter (path to /components/ folder):

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

Now we can just load module by its name (it will automatically fetch file with such file name in specified lazyModulesPath location):

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

Note, that browser modules also load modules styles automatically. So loading gauge.js will also automatically load gauge.css stylesheet.

So the above expression app.loadModules(['calendar', 'gauge']) will load the following files:

  • path/to/framework7/components/calendar/calendar.lazy.js
  • path/to/framework7/components/calendar/calendar.css
  • path/to/framework7/components/gauge/gauge.lazy.js
  • path/to/framework7/components/gauge/gauge.css

When we need to preload modules for specific route and we use browser modules, then we can just use route's modules property:

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

Or the same but using async route like in example with ES 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
    async: function({ resolve }) {
      app.loadModules(['gauge', 'calendar']).then(() => {
        resolve({
          componentUrl: './gauge-calendar.html',
        });
      });
    },
  }
]

The following browser modules-components are available for loading (all other components are part of the core):

ComponentNamePath
Dialogdialogframework7/components/dialog/dialog.lazy.js
Popuppopupframework7/components/popup/popup.lazy.js
LoginScreenlogin-screenframework7/components/login-screen/login-screen.lazy.js
Popoverpopoverframework7/components/popover/popover.lazy.js
Actionsactionsframework7/components/actions/actions.lazy.js
Sheetsheetframework7/components/sheet/sheet.lazy.js
Toasttoastframework7/components/toast/toast.lazy.js
Preloaderpreloaderframework7/components/preloader/preloader.lazy.js
Progressbarprogressbarframework7/components/progressbar/progressbar.lazy.js
Sortablesortableframework7/components/sortable/sortable.lazy.js
Swipeoutswipeoutframework7/components/swipeout/swipeout.lazy.js
Accordionaccordionframework7/components/accordion/accordion.lazy.js
ContactsListcontacts-listframework7/components/contacts-list/contacts-list.lazy.js
VirtualListvirtual-listframework7/components/virtual-list/virtual-list.lazy.js
ListIndexlist-indexframework7/components/list-index/list-index.lazy.js
Timelinetimelineframework7/components/timeline/timeline.lazy.js
Tabstabsframework7/components/tabs/tabs.lazy.js
Panelpanelframework7/components/panel/panel.lazy.js
Cardcardframework7/components/card/card.lazy.js
Chipchipframework7/components/chip/chip.lazy.js
Formformframework7/components/form/form.lazy.js
Inputinputframework7/components/input/input.lazy.js
Checkboxcheckboxframework7/components/checkbox/checkbox.lazy.js
Radioradioframework7/components/radio/radio.lazy.js
Toggletoggleframework7/components/toggle/toggle.lazy.js
Rangerangeframework7/components/range/range.lazy.js
Stepperstepperframework7/components/stepper/stepper.lazy.js
SmartSelectsmart-selectframework7/components/smart-select/smart-select.lazy.js
Gridgridframework7/components/grid/grid.lazy.js
Calendarcalendarframework7/components/calendar/calendar.lazy.js
Pickerpickerframework7/components/picker/picker.lazy.js
InfiniteScrollinfinite-scrollframework7/components/infinite-scroll/infinite-scroll.lazy.js
PullToRefreshpull-to-refreshframework7/components/pull-to-refresh/pull-to-refresh.lazy.js
Lazylazyframework7/components/lazy/lazy.lazy.js
DataTabledata-tableframework7/components/data-table/data-table.lazy.js
Fabfabframework7/components/fab/fab.lazy.js
Searchbarsearchbarframework7/components/searchbar/searchbar.lazy.js
Messagesmessagesframework7/components/messages/messages.lazy.js
Messagebarmessagebarframework7/components/messagebar/messagebar.lazy.js
Swiperswiperframework7/components/swiper/swiper.lazy.js
PhotoBrowserphoto-browserframework7/components/photo-browser/photo-browser.lazy.js
Notificationnotificationframework7/components/notification/notification.lazy.js
Autocompleteautocompleteframework7/components/autocomplete/autocomplete.lazy.js
Tooltiptooltipframework7/components/tooltip/tooltip.lazy.js
Gaugegaugeframework7/components/gauge/gauge.lazy.js
Skeletonskeletonframework7/components/skeleton/skeleton.lazy.js
Menumenuframework7/components/menu/menu.lazy.js
Pie Chartpie-chartframework7/components/pie-chart/pie-chart.lazy.js
Area Chartarea-chartframework7/components/area-chart/area-chart.lazy.js
Typographytypographyframework7/components/typography/typography.lazy.js
Text Editortext-editorframework7/components/text-editor/text-editor.lazy.js
Breadcrumbsbreadcrumbsframework7/components/breadcrumbs/breadcrumbs.lazy.js