Disable Code Splitting in Create React App 2 & Add Cache Busting

This example demonstrates disabling code splitting when building an app created with Create React App 2. The build will output a single CSS file and a single JS file. A simple cache-busting parameter is automatically added to the file references within index.html.

1. Install 'rewire' as a dependency

Rewire will allow us to override certain variables and values in the configuration.

npm

npm install rewire	

yarn

yarn add rewire	

2. Create a file scripts/build-non-split.js

For this example we have created a folder scripts in the root of our React app, and placed the build-non-split.js file inside it. See scripts/build-non-split.js in this repo.

scripts/build-non-split.js

Note: the cacheBust parameter will be added to the file references in index.html, but is removed from the actual file names.

3. Modify package.json

Modify the build script in package.json to run our new file.

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

4. Build Your App

The next time you perform a build you should see a single CSS file and a single JS file, both named "app".

Credit

Much of this example was derived from the discussion for Create React App issue 5306, specifically comments by vonkanehoffen, jw-afc, and illepic.

v2.0.0

Comments by vincerubinetti found in issue 5306.

License

MIT License