Search code examples
reactjswebpackcreate-react-app

combine react build output into single js file

This is similar to this question however neither of the answers solves the problem.

After running npm run build the resultant index.html looks similar to:

<script>!function (i) { function e(e) { for //rest omitted
<script src="/static/js/2.3f294f32.chunk.js"></script>
<script src="/static/js/main.7b9daa35.chunk.js"></script>

The first <script> element is inlined javascript that i have extracted to a file called loader.js

<script src="/loader.js"></script>
<script src="/static/js/2.3f294f32.chunk.js"></script>
<script src="/static/js/main.7b9daa35.chunk.js"></script>

this works but I would like to combine all 3 files into a single file

I've tried filesmerge.com to combine the JS files but this results in an error when referencing the single file:

output.min.js:1 Uncaught TypeError: (intermediate value)(...) is not a function
at output.min.js:1

I then tried combining using jscompress.com and whilst this does not produce any errors the react root element is not rendered

I've also tried this solution suggested on the create-react-app repo which does not work. No error is produced but no react element is rendered (page remains blank)

Solution

  • 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