using webpack code splitting, how to load chunks and HTML layout?

Question

I use webpack to build chunks, to be loaded on demand (code splitting); each chunk is rendering React components into DOM elements (divs). I need HTML to create those divs: how and when should I load the corresponding HTML ? And how should I load the chunks on demand ?

I use jQuery's load function to insert HTML from files in container divs. In addition I put a <script> tag to tell which chunk should be loaded but I find it clumsy and not elegant at all compared to the rest of my application code.

Is there a less brittle way to do this?

Answer 1

You should use require.ensure for dynamic route loading. Even better, if you set up your project to use Webpack 2 + Tree shaking, you can use System.import.

Here's how:

import App from 'containers/App';
function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}
function loadRoute(cb) {
  return (module) => cb(null, module.default);
}
export default {
  component: App,
  childRoutes: [
    {
      path: '/',
      getComponent(location, cb) {
        System.import('pages/Home')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
    {
      path: 'blog',
      getComponent(location, cb) {
        System.import('pages/Blog')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    }
  ]
};

You can get the entire guide in this blog post: Automatic Code Splitting for React Router