Disable Code Splitting (and caching) In Create React App

build-non-split.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
let config = defaults.__get__('config');

config.optimization.splitChunks = {
    cacheGroups: {
        default: false,
    },
};

config.optimization.runtimeChunk = false;

package.json

"start": "node ./scripts/start-non-split.js",
"build": "node ./scripts/build-non-split.js",

start-non-split.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/start.js');
let configFactory = defaults.__get__('configFactory');

defaults.__set__('configFactory', (env) => {
  const config = configFactory(env);
  config.optimization.splitChunks = {
      cacheGroups: {
          default: false,
      },
  };
  config.optimization.runtimeChunk = false;
  return config;  
})

Because ejecting can introduce much more complexity to your project than you might anticipate, it should be avoided. However, if you want to output a single bundle.js on npm run start and npm run build, you'll need to use the above scripts to override the default config until this issue is fixed.

View it in action in https://github.com/ghost-inspector/wordpress-plugin

Thanks to GitHub user vonkanehoffen for this solution!

Thank you for this solutions! Is there an option not to use rewire package? So that I do not have to install new package.

@juffalow sure, you can create your own version of the rewire package: https://github.com/jhnns/rewire/blob/master/lib/rewire.js

Hi I am getting these errors constantly

Error: Cannot find module 'react-scripts/scripts/start.js'
in case of disabling codesplitting

@Abraham-william I haven't had time to maintain this, so there may have been updates to create-react-app that need to be accounted for. Please check this issue: facebook/create-react-app#5306