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!