combine react build output into single js file

by

Brief

In short: It’s possible, but not very practical. Why? Your application will no longer be performant as your single bundle file grows. A single large request, instead of smaller requests, will inevitably lead to slower web performance and potentially wasted bandwidth.

On that same note, I’d highly advise against using the CRA for your single-bundled application. While the CRA is a great boilerplate geared toward a DX friendly approach to React with Webpack, it does contain a lot of dependencies that may be unnecessarily bundled with your app.

As such, I’d highly recommend building your own Webpack configuration (it’s relatively simple with the help of the Webpack documentation combined with the CRA Webpack notes) or consider alternatives like rollup, gulp, microbundle, or browserify to name a few.

The following procedure below will inevitably become outdated as the CRA gets updated. Therefore, use these instructions at your own risk.

Procedure

CRA Version: v4.0.3

You’ll first want to eject: yarn eject or npm run eject — you can probably use some 3rd party packages to override without ejecting, but I’ll leave that up to you to figure out.

Then, you’ll need to go to the config/webpack.config.js file and change the following:

  • Remove the InlineChunkHtmlPlugin import from top imports and under plugins, remove isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]) as it creates a chunk file list inside the index.html file when building
  • Under plugins, change MiniCssExtractPlugin options to only output a single css file by changing filename to filename: "static/css/bundle.min.css" and removing the chunkFileName option.
  • Under output, change filename to filename: "static/js/bundle.min.js" to output to a single filename for production.
  • Under output, remove the chunkFilename property as you’re no longer chunking JS files
  • Under optimization, remove splitChunks property as you’re no longer splitting JS chunks
  • Under optimization, set runtimeChunk to runtimeChunk: false to avoid creating a runtime.chunk.js file
  • Under optimization, after the TerserPlugin, add new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) to limit outputted chunks to 1

Demo

CRA Version: v4.0.3 (demo updated as May 25th, 2021)

Working repo: https://github.com/mattcarlotta/cra-single-bundle

Notes

This configuration will inevitably become outdated as the dev world adopts Webpack 5

More Related Contents:

  1. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  2. How should I configure create-react-app to serve app from subdirectory?
  3. How to set build .env variables when running create-react-app build script?
  4. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  5. The create-react-app imports restriction outside of src directory
  6. How to specify a port to run a create-react-app based project?
  7. Template not provided using create-react-app
  8. Dynamically Add Images React Webpack
  9. where is create-react-app webpack config and files?
  10. Remove console.logs with Webpack & Uglify
  11. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  12. How to tell webpack dev server to serve index.html for any route
  13. Nextjs: Unable to load images from static folder
  14. Unable to create new react app with npx create-react-app
  15. How to add fonts to create-react-app based projects?
  16. How do I hide an API key in Create React App?
  17. How to avoid using relative path imports (/../../../redux/action/action1) in create-react-app
  18. react long press event
  19. How to use environment variables in Github Page?
  20. Create-React-App Proxy in Production Build
  21. What is public/manifest.json file in create-react-app?
  22. create-react-app: how to use https instead of http?
  23. Disable ESLint that create-react-app provides
  24. Importing images breaks jest test
  25. Webpack & Typescript image import
  26. Cache busting with CRA React
  27. google is not defined in react app using create-react-app
  28. Unable to load images from static folder
  29. create-react-app is not working since version 4.0.1
  30. ‘React’ was used before it was defined

Leave a Comment