code splitting?

[framework7io]

code splitting?

[LarsVoith]

I'm supposed to make a presentation to our dev team in October on F7 and React, I got a few hours to burn through yet so give it a try and let you know how it turns out.

[bencompton]

I have never tried code splitting / dynamic imports in Create React App, but it supposedly works. It would be nice if just importing something with a dynamic imports like import('dynamically-loaded-page').then(...) automatically caused the build process to generate more than one JavaScript file and then dynamically load portions of your app on demand. In my experience with other build tools, it isn't always easy to get it to work. If you end up trying it, I'd be curious to hear how it worked out for you.

[LarsVoith]

So far I have been able to import a component when the page loads after adding
an AsyncComponent - see 3.chunk.js. However you can't navigate back because the class for previous and the new current page is missing. Maybe
a <Switch in routes.js would work better? (My Code is at the bottom)

Normally we would expect to see classes previous and current.

class for previous page is missing and the class for the new current page is missing.

routes.js

 import asyncComponent from "./components/AsyncComponent";

 import NotFoundPage from './components/pages/NotFoundPage';

 import AboutPage from "./components/pages/AboutPage";

 const AsyncHome = asyncComponent(() =>import("./components/pages/HomePage"));

 const DynamicRoutePage = asyncComponent(() =>import("./components/pages/DynamicRoutePage"));

export default [{
   path: '/',
   component: AsyncHome,
 },
 {
    path: '/dynamic-route/blog/:blogId/post/:postId/',
    component: DynamicRoutePage,
  },
 {
    path: '/about/',
    component: AboutPage,
  },
  {
    path: '(.*)',
    component: NotFoundPage,
  }
];

AsyncComponent

 import React, { Component } from "react";

 export default function asyncComponent(importComponent) {

  class AsyncComponent extends Component {

    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

[bencompton]

It appears to at least be splitting into separate JavaScript files correctly, which is pretty awesome. I would recommend handling the async loading in your routes or navigation logic instead of in your React components. For example, you could try using async routes. I have never tried them myself, but it's worth a shot. This is the basic idea anyhow:

routes = [
  {
    path: '/foo/',
    async(routeTo, routeFrom, resolve, reject) {
      const DynamicRoutePage = await import("./components/pages/DynamicRoutePage");
      resolve({ component: DynamicRoutePage });
    }
  }
]

[LarsVoith]

Ok sometimes it helps to read the docs .

async-lazy-components
http://framework7.io/react/navigation-router.html#async-lazy-components

I can validate at this point that it is working in the template.

[bencompton]

Ah, I didn't see that either. Nice job getting it working, and thanks for sharing your experiences!