Do not see any docs relate to this topic.
the main js’s size of my template is 1200kb.
Thanks a lot.
If you use Webpack you can use lazy router components like described here http://framework7.io/react/navigation-router.html#async-lazy-components
1 Like
Seems not worked for me, did I miss some config of webpack?
I write async load like this, and run npm run build
, these’s only one main.67bxxxxx.js
in the static\js directory.
“react”: “^16.4.1”,
“framework7-react”: “^3.0.1”,
“webpack”: “3.10.0”,
{
path: '/course',
// component: CoursePage,
async(routeTo, routeFrom, resolve, reject) {
// dynamic import component; returns promise
const reactComponent = () => import('./components/pages/course/CoursePage');
// resolve promise
reactComponent().then((rc) => {
// resolve with component
resolve({ component: rc.default })
});
},
},
{
path: '/memoNew',
// component: MemoNewPage
async(routeTo, routeFrom, resolve, reject) {
// dynamic import component; returns promise
const reactComponent = () => import('./components/pages/course/memo/memoNew');
// resolve promise
reactComponent().then((rc) => {
// resolve with component
resolve({ component: rc.default })
});
},
},
If I recall well, then lazy components are available in f7 versions beginning from 3.4.0.
1 Like
Could be a webpack config, I think it has kind of configuration for chunks and their min/max size. So for example of one of dynamically included components is less than min size then it will include it in main bundle
1 Like