懒加载模块

懒加载模块提供了一种方法，通过仅加载主页/视图所需的功能来使您的 Web 应用启动时间更快，并在导航到使用它们的页面时加载额外的模块/组件。这将使您的初始应用脚本和样式的大小更小，这在您构建 Web 应用或 PWA 时非常重要。

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

模块 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 模块组件可用于导入（所有其他组件都是核心的一部分）：