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/lazy-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.

Firs 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/searchbar.js';
import Accordion from 'framework7/components/accordion/accordion.js';
// 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/gauge.js')
  .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/gauge.js'),
    import('framework7/components/calendar/calendar.js')
  ])
  .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}/${moduleName}.js`);
  });
  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 (routeTo, routeFrom, resolve, reject) {
      // 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):

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 “framework7-lazy” library instead of framework7.js and framework7.css scripts and styles that contains whole framework.

<!DOCTYPE html>
<html>
  <head>
    ...
    <!-- Path to Framework7 Lazy Library CSS -->
    <link rel="stylesheet" href="path/to/framework7/css/framework7-lazy.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 Lazy Library JS-->
    <script type="text/javascript" src="path/to/framework7/js/framework7-lazy.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-lazy 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 Lazy Library CSS -->
    <link rel="stylesheet" href="path/to/framework7/css/framework7-lazy.min.css">
    <!-- Include modules required for initial page -->
    <link rel="stylesheet" href="path/to/framework7/lazy-components/accordion.css">
    <link rel="stylesheet" href="path/to/framework7/lazy-components/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 Lazy Library JS-->
    <script type="text/javascript" src="path/to/framework7/js/framework7-lazy.min.js"></script>
    <!-- Include modules required for initial page -->
    <script type="text/javascript" src="path/to/framework7/lazy-components/accordion.js"></script>
    <script type="text/javascript" src="path/to/framework7/lazy-components/searchbar.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 /lazy-components/ folder):

var app = new Framework7({
  // ...
  lazyModulesPath: 'path/to/framework7/lazy-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/lazy-components/calendar.js
• path/to/framework7/lazy-components/calendar.css
• path/to/framework7/lazy-components/gauge.js
• path/to/framework7/lazy-components/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(routeTo, routeFrom, resolve, reject) {
      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):