2

I am using react-loadable to split my code. I have opted to do this at route level to begin with. My routes.js looks like this:

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';

const Loading = props => {
  if (props.error) {
    return <div>Error loading page!</div>;
  } else {
    return null;
  }
};

const AsyncHomepage = Loadable({ loader: () => import('../Scenes/Homepage/Homepage' /* webpackChunkName: "homepage" */), loading: Loading });
const AsyncSearchPage = Loadable({ loader: () => import('../Scenes/Search/Search' /* webpackChunkName: "search" */), loading: Loading });
const AsyncAboutUsPage = Loadable({ loader: () => import('../Scenes/AboutUs/AboutUs' /* webpackChunkName: "aboutus" */), loading: Loading });

// omitted for brevity

export const Routes = () => {
  return (
    <Switch>
      <Route exact path="/" component={AsyncHomepage} />
      <Route exact path="/search" component={AsyncSearchPage} />
      <Route exact path="/about-us" component={AsyncAboutUsPage} />

      // omitted for brevity
    </Switch>
  );
};

This is the only place I'm using react-loadable.

When I build the application, I get my named chunks as expected but I also get a bunch of random numbered chunks as well:

enter image description here

These other chunks seem to contain things like moment.js, react-select, there's another that contains react-dom which surely would just be included in every page?

What I'd like to know is why is this happening and how can I name these chunks or merge them with the page chunks?

Andy Furniss
  • 3,814
  • 6
  • 31
  • 56
  • can you share your webpack config. Meanwhile, you can look into this for the solution. https://webpack.js.org/plugins/split-chunks-plugin/ – Balavishnu V J Mar 14 '19 at 15:42
  • My application was created with `create-react-app` so I do not have a customised webpack config. – Andy Furniss Mar 14 '19 at 15:43
  • This looks like a standard chunk configuration, webpack splits your code in chunks and uses alphanumeric hashes to prevent caching the same filename and to prevent indesirable override of previous build. – Mosè Raguzzini Mar 14 '19 at 15:49
  • default optimisation of webpack is to make chunks if the file size if more than `30kB`. These files might be internally required by other chunks like `aboutus` – Balavishnu V J Mar 14 '19 at 15:57
  • I only want one bundle to be downloaded per page but for my homepage I end up with several downloading... I just don't understand why it's splitting where it is. – Andy Furniss Mar 14 '19 at 16:11
  • These extra bundles are so small it's hardly worth them being in their own bundle. The time taken to download an extra tiny file does not justify it. – Andy Furniss Mar 14 '19 at 16:25
  • Webpack should be trying to group the deps according to what pages use them so it's not downloading code multiple times for different pages. Try adding chunk name comments. Depending on default CRA config it might name those chunks which will make things clearer. ie they should end up with multiple names each where they're shared between pages. `loader: () => import(/* webpackChunkName: "aboutus" */ "../Scenes/AboutUs/AboutUs"),`. Are you using `webpack-bundle-analyzer`? that can give you insights too. – lecstor Mar 14 '19 at 23:01
  • That's my issue. I don't know how to name these chunks because they are appearing from nowhere! I can see what's in them with source map explorer but I can't find any way to actually name them because Webpack is creating the chunks by itself. – Andy Furniss Mar 15 '19 at 11:30
  • @AndyFurniss Hey, I'm experiencing the same problem now, I can't figure out why these extra chunks are being generated on build besides the explicitly code-split oneWere you able to figure it out? – Jeremy Jun 07 '20 at 23:58

0 Answers0