reactjscreate-react-appcraco

Disable file chunking with CRACO


I am trying to figure out how to use CRACO (https://github.com/gsoft-inc/craco) to disable file chunking in create react app.

I have created the following craco.config.js:

// craco.config.js
module.exports = {
  output: {
    fileName: 'static/js/bundle.js',
  },
}

But it doesn't have any effect. What should the config look like to disable file chunking in CRA with CRACO?


Solution

  • EDIT: To disable chunking completely I believe this might do it.
    Source: https://github.com/facebook/create-react-app/issues/5306#issuecomment-650737697

    // craco.config.js
    module.exports = {
      webpack: {
        configure: {
          optimization: {
            runtimeChunk: false,
            splitChunks: {
              chunks(chunk) {
                return false
              },
            },
          },
        },
      },
    }
    

    ORIGNIAL: Maybe this could help?

    module.exports = {
      webpack: {
        configure: {
          output: {
            filename: 'static/js/bundle.js',
          },
          optimization: {
            runtimeChunk: false,
            splitChunks: {
              chunks: 'all',
              cacheGroups: {
                default: false,
                vendors: false,
                // vendor chunk
              },
            },
          },
        },
      },
      plugins: [
        {
          plugin: require('craco-plugin-scoped-css'),
        },
      ],
    }