Search code examples
javascriptreactjswebpackreact-routerreact-loadable

In Webpack 4, can we dynamically generate page chunk with import() token so we can turn a react component into a react-loadable one?


We use react and react-loadable.

During our application initialization, we are verifying that the component.preload method is existing for each <Route /> we define.

If the method is missing, we display a warning that show that the component should be loadable.

We use webpack 4, is there a way to automatically wrap the component, so we don't have to do it manually?

This is how a component look like:

/** MyComponent.js: page component */
export default () => <div>Hello world</div>;

This is the same component wrapped in a react-loadable component:

/**
 * preconfigured react-loadable 
 * See https://github.com/jamiebuilds/react-loadable#how-do-i-avoid-repetition)
 */
import MyLoadable from '@scopped/react-loadable';

/** loadable component */
export default MyLoadable({
  loader: () => import('./MyComponent'), /** import page component */
});
  1. Our <Route /> are declared in node_modules and from within different packages.
  2. It may be declared using <Resource /> (from react-admin) instead of <Route />
  3. They are not distributed in ESM format but only CJS (CommonJS).

Solution

  • I'm not sure this is the right way to do it but maybe you can write some kind of webpack loader that would preprocess your files, find <Route /> patterns in your files, identify the path of the components they render and transform them into loadable components with that information.

    This is a bit hacky but it should work (Only with imports but you can tweak it as you want to match your requirements):

    Webpack config:

    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: [
          "babel-loader", // Rest of your loaders
          path.resolve(__dirname, 'path/to/your/loader.js')
        ]
      }
    }
    

    loader.js:

    module.exports = function (source) {
      const routeRegex = new RegExp(/<Route.*component={(.*)}.*\/>/g);
      let matches;
      let components = [];
    
      while (matches = routeRegex.exec(source)) {
        components.push(matches[1]); // Get all the component import names
      }
    
      // Replace all import lines by a MyLoadable lines
      components.forEach((component) => {
        const importRegex = new RegExp(`import ${component} from '(.*)'`);
        const path = importRegex.exec(source)[1];
    
        source = source.replace(importRegex, `
          const ${component} = MyLoadable({
            loader: () => import('${path}')
          });
        `);
      });
    
      source = `
        import MyLoadable from './MyLoadable';
        ${source}
      `;
    
      return source;
    };
    

    This is definitely hacky but if you stick to convention this could work. It transforms this kind of file:

    import Page1 from './Page1';
    import Page2 from './Page2';
    
    export default () => (
      <Switch>
        <Route path='/page1' component={Page1} />
        <Route path='/page2' component={Page2} />
      </Switch>
    );
    

    into this file:

    import MyLoadable from './MyLoadable;
    
    const Page1 = MyLoadable({
      loader: () => import('./Page1')
    });
    
    const Page2 = MyLoadable({
      loader: () => import('./Page2')
    });
    
    export default () => (
      <Switch>
        <Route path='/page1' component={Page1} />
        <Route path='/page2' component={Page2} />
      </Switch>
    );
    

    This example has some problems (the path to MyLoadable should be absolute, it works only when Page components are imported, loadable components are not in a separate file and this could lead to duplicates, ...) but you get the idea