Disable file chunking with CRACO

Question

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?

OArnarsson · Accepted Answer · 2021-01-19T09:19:13.737

10

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'),
    },
  ],
}

edited Jan 19 '21 at 09:19

answered Jan 19 '21 at 09:01

OArnarsson

801
1
9
25

Thanks I now have a main bundle file but I am still getting 1 chunk file `1.hash.chunk.js`. Any way to find out what this is from? – Guerrilla Jan 19 '21 at 09:10
@Guerrilla I've updated the answer with a new solution, please let me know how it goes. – OArnarsson Jan 19 '21 at 09:19
3

Thanks, the edit still gave one chunk file but reading the linked github thread had answer that this file is being created by reportWebVitals. Commenting that out results in a single bundle file – Guerrilla Jan 19 '21 at 09:33
@Guerrilla nice one! – OArnarsson Jan 19 '21 at 10:16

score 0 · Answer 2 · answered Aug 18 '23 at 14:04

follow the new solution in the github comments. I use this in my craco.config.cjs:

module.exports = {
  webpack: {
    configure: {
      plugins: [
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 1,
        })
      ]
    }
  },
  plugins: [{ plugin: CracoEsbuildPlugin }]
};

It works at @craco/craco 7.0.0

Disable file chunking with CRACO

2 Answers2

Linked