Core: split app code bundle using vite with ES imports in routed components

Hi there!

I have created a PWA / web app in F7 Core with about 40 routed components. For all of these router compoents, in my routes.js, I use imports like this:

import GroupsPage from '../pages/groups.f7';
{
    path: '/groups/',
    component: GroupsPage
}

This, however, results in all pages being compiled into one large file. When building my app, the vite bundler understandably complains about chungs being too large:

[...]
../www/assets/index-CsJ2FlEB.js                       1,219.13 kB │ gzip: 309.75 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 2.78s

Now, I use ES6 imports in most of my routed components, e.g.

<template>...</template>
<script>
import { DateTime } from 'luxon';
import { shareHandler, updateOGMetaInfo } from '../js/Utils.js';
export default (props, { $f7, $on, $f7route, $store, $ref }) => {
   // ...
   return $render;
};
</script>

Referencing these components with imports in routes.js using componentUrl attribute (see below) does not work:

{
    path: '/groups/',
    componentUrl: '../pages/groups.f7'
}

It results in the following error: Cannot use import statement outside a module.

Since I rely on these imports for access to custom utils or DateTime library, I need to find another way to accomplish the following goals:

  • Reduce bundle file size (to speed up initial app loading)
  • Code split application into multiple chunks for the pages
  • Dynamically load chunks on demand when needed

My solution (so far)

{
    path: '/groups/',
    async({ app, to, resolve }) {
        import('../pages/groups.f7').then(module => {
            resolve({
                component: module.default,
            })
        })
    }
},

This seems to work fine so far, the vite bundler splits the code and creates a groups.js file with the component in it next to the index.js.

Now, to my questions

Is this the (only) way to achieve code splitting?
Is that the recommended approach for F7 apps with many routed components?

Thanks so much for your help!

I found the solution in the docs.

{
  path: '/some-page/',
  asyncComponent: () => import('./path/to/some-page.js'),
}