Home > Blockchain >  The bundle size is significantly larger than recommended
The bundle size is significantly larger than recommended

Time:07-06

hello guys when i use npm run build i get this error:

enter image description here

how can I fix that ? please help me and thank you

CodePudding user response:

This is not an error but a warning. So you can in theory ignore it without breaking your build.

What this warning suggests is one of your built JS files 2.de222e65.chunk.js is very large (yes, 1MB of JS is considered huge in web development) and that will negatively affect your webpage performance.

What I can think of is

  1. You are properly importing components that you don't need, judging by the console output.
  2. You may be using some components that have a large bundle size (e.g. chart libraries). Consider lazy load them (code-splitting).

CodePudding user response:

Please fix your imports in files, only import those file which are specific also remove all the npm packages which are not being used. You can use npm-prune to remove extraneous packages.

Add the following Webpack plugins

plugins: [
    new webpack.DefinePlugin({ // <-- key to reducing React's size
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.DedupePlugin(), //dedupe similar code 
    new webpack.optimize.UglifyJsPlugin(), //minify everything
    new webpack.optimize.AggressiveMergingPlugin()//Merge chunks 
  ],

if you want read the ref. blog: https://rajaraodv.medium.com/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a

  • Related