Skip to main content

Prevent Build Chunk Splitting

Follow this setup to prevent Create React App’s default code chunk splitting behavior. You might want to do this when building a React app to deliver in ServiceNow.

References​

Install Rewire​

You can install the rewire library as a dev dependency.

https://github.com/jhnns/rewire

npm install rewire --save-dev

Create an Alternate Build Script​

// build-no-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;

Add a Reference to the Build Script​

Add node build-no-split.js to your project’s package.json file in the “scripts” section. You can modify the existing “build” script or add a new script entry point.

"scripts": {
    "build-nosplit": "node build-no-split.js"
}

Build Your Project​

When you run this script, you should see a your main js and css files as individual files without the chunks.