惰性模块

惰性模块提供了一种让你的 Web 应用启动时间更快的办法，一开始只加载主页/视图所需的功能，并在导航到使用它们的页面时加载额外的模块/组件。这会让你的初始应用脚本和样式变得更小，这是在构建 Web 应用或 PWA 时很重要的。

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

模块 API

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

ES 模块

该方法仅在使用打包工具（如 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
});

稍后，当我们需要安装额外的 F7 模块时，我们可以使用动态导入

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

如果我们需要一次加载几个模块

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

每次编写它可能不太方便，因此我们可以为此创建一个函数

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(() => {
  // modules loaded and we can use their 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 }) {
      // load modules
      loadF7Modules(['gauge', 'calendar']).then(() => {
        // resolve route
        resolve({
          componentUrl: './gauge-calendar.html',
        });
      });
    }
  }
]

可导入以下 ES 模块组件（所有其他组件都是核心的一部分）