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 support like Webpack or Rollup. Browser modules are designed only to be used when you don’t use any bundler.

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

    Firs of all, we need to realize what modules our app requires to display initial page and import them:

    Later when we need to install additional F7 module we can use dynamic imports:

    1. import('framework7/components/gauge/gauge.js')
    2.   .then(module => app.loadModule(module.default))
    3.   .then(() => {
    4.     // module loaded and we can use gauge api
    5.     app.gauge.create(/* ... */)
    6.   })

    If we need to load few modules at a time:

    1. Promise
    2.   .all([
    3.     import('framework7/components/gauge/gauge.js'),
    4.     import('framework7/components/calendar/calendar.js')
    5.   ])
    6.   .then((modules) => {
    7.     // loaded module will be at ".default" prop of import result
    8.     var modulesToLoad = modules.map(module => module.default);
    9.     return app.loadModules(modulesToLoad);
    10.   })
    11.   .then(() => {
    12.     // modules loaded and we can use their api
    13.     app.gauge.create(/* ... */)
    14.     app.calendar.create(/* ... */)
    15.   })

    It may be not very convenient to write it every time so we can make a function for that:

    1. function loadF7Modules(moduleNames) {
    2.   var modulesToLoad = moduleNames.map((moduleName) => {
    3.     return import(`framework7/components/${moduleName}/${moduleName}.js`);
    4.   });
    5.   return Promise.all(modulesToLoad)
    6.     .then((modules) => {
    7.       return app.loadModules(modules.map(module => module.default));
    8.     })
    9. }

    And we can use it like:

    If we need to preload modules for specific route then route’s async is the best fit for it:

    1. var routes = [
    2.   {
    3.     path: '/',
    4.     url: './index.html',
    5.   },
    6.   /* Page where we need Gauge and Calendar modules to be loaded */
    7.   {
    8.     path: '/gauge-calendar/',
    9.     async: function (routeTo, routeFrom, resolve, reject) {
    10.       // load modules
    11.         // resolve route
    12.         resolve({
    13.           componentUrl: './gauge-calendar.html',
    14.         });
    15.       });
    16.     }
    17.   }
    18. ]

    The following ES-module components are available for importing (all other components are part of the core):

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

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     ...
    5.     <!-- Path to Framework7 Lazy Library CSS -->
    6.     <link rel="stylesheet" href="path/to/framework7/css/framework7-lazy.min.css">
    7.     <!-- Path to your custom app styles-->
    8.     <link rel="stylesheet" href="path/to/my-app.css">
    9.   </head>
    10.   <body>
    11.     <div id="app">
    12.       ...
    13.     </div>
    14.     <!-- Path to Framework7 Lazy Library JS-->
    15.     <script type="text/javascript" src="path/to/framework7/js/framework7-lazy.min.js"></script>
    16.     <!-- Path to your app js-->
    17.     <script type="text/javascript" src="path/to/my-app.js"></script>
    18.   </body>
    19. </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:

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     ...
    5.     <!-- Path to Framework7 Lazy Library CSS -->
    6.     <link rel="stylesheet" href="path/to/framework7/css/framework7-lazy.min.css">
    7.     <!-- Include modules required for initial page -->
    8.     <link rel="stylesheet" href="path/to/framework7/lazy-components/accordion.css">
    9.     <link rel="stylesheet" href="path/to/framework7/lazy-components/searchbar.css">
    10.     <!-- Path to your custom app styles-->
    11.     <link rel="stylesheet" href="path/to/my-app.css">
    12.   </head>
    13.   <body>
    14.     <div id="app">
    15.       ...
    16.     </div>
    17.     <!-- Path to Framework7 Lazy Library JS-->
    18.     <script type="text/javascript" src="path/to/framework7/js/framework7-lazy.min.js"></script>
    19.     <script type="text/javascript" src="path/to/framework7/lazy-components/accordion.js"></script>
    20.     <script type="text/javascript" src="path/to/framework7/lazy-components/searchbar.js"></script>
    21.     <!-- Path to your app js-->
    22.     <script type="text/javascript" src="path/to/my-app.js"></script>
    23.   </body>
    24. </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):

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

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

    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:

    1. var routes = [
    2.   {
    3.     path: '/',
    4.     url: './index.html',
    5.   },
    6.   /* Page where we need Gauge and Calendar modules to be loaded */
    7.   {
    8.     path: '/gauge-calendar/',
    9.     modules: ['gauge', 'calendar'], // will load these components before loading route
    10.     componentUrl: './gauge-calendar.html',
    11.   }
    12. ]

    Or the same but using async route like in example with ES modules:

    1. var routes = [
    2.   {
    3.     path: '/',
    4.     url: './index.html',
    5.   },
    6.   /* Page where we need Gauge and Calendar modules to be loaded */
    7.   {
    8.     path: '/gauge-calendar/',
    9.     modules: ['gauge', 'calendar'], // will load these components before loading route
    10.     async: function(routeTo, routeFrom, resolve, reject) {
    11.       app.loadModules(['gauge', 'calendar']).then(() => {
    12.         resolve({
    13.           componentUrl: './gauge-calendar.html',
    14.         });
    15.       });
    16.     },
    18. ]

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

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