How to do code-split with f7-react

Questions
1

Do not see any docs relate to this topic.
the main js’s size of my template is 1200kb.
Thanks a lot.

2

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
3

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 })
      });
    },
  },
4

If I recall well, then lazy components are available in f7 versions beginning from 3.4.0.

1 Like
5

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