Lazy Modules(懒加载模块)

懒加载模块可以通过仅在首页/视图所需的功能加载时加载，以加快Web应用程序的启动时间，并在导航到使用它们的页面时加载其他模块/组件。这将使您的初始应用程序脚本和样式文件的大小更小，这在构建Web应用程序或PWA时非常重要。

Framework7提供两种类型的模块：ES模块和“浏览器模块”。要使用ES模块，您需要使用支持import/export的打包工具，如Webpack或Rollup。浏览器模块仅用于在不使用任何打包工具时使用。

Modules API

要在Framework7初始化后加载模块，我们需要使用以下应用程序方法：

ES Modules

只有在使用类似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
});

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):