I'm trying to create a react + babel + webpack project. it works, but the bundle.js file is 950KB big.

is bundle.js always that big? if not, how do i reduce the size?

this is my webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
entry: APP_DIR + '/index.jsx',
output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
},
plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      pressor: {
        warnings: false
      }
    })
],
module : {
    loaders : [
      {
        test : /\.jsx?/,
        loader : 'babel',
        query:
        {
            presets: ["es2015", 'react']
        }
      }
    ]
}
};

module.exports = config;

I'm trying to create a react + babel + webpack project. it works, but the bundle.js file is 950KB big.

is bundle.js always that big? if not, how do i reduce the size?

this is my webpack.config.js:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
entry: APP_DIR + '/index.jsx',
output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
},
plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      pressor: {
        warnings: false
      }
    })
],
module : {
    loaders : [
      {
        test : /\.jsx?/,
        loader : 'babel',
        query:
        {
            presets: ["es2015", 'react']
        }
      }
    ]
}
};

module.exports = config;

• javascript
• reactjs
• webpack
• frontend
• babeljs

• yes. bundle will grow based on your dependencies. webpack will pack all your dependencies where you include that using import. alternate way you can use CDN as possible for you dependencies while deploy and make convert ES6 to ES5 using babel for your react ponents. – subash Commented Dec 28, 2016 at 15:56
• It always depends on the librairies you bundle with it as well. You can also try spliting the bundle between vendor librairies and your app code. This way, the client can cache the vendor and not have to download it again for a while. You also have the Webpack dll approach which splits and speeds up pilation afterwards (if you are using a tool like hmr) – gretro Commented Dec 28, 2016 at 15:57

4 Answers 4

It largely depends on your dependencies. You can ignore ie8 and dedupe your dependencies to shave of some kBs:

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      press: {
        screw_ie8: true,
        warnings: false
      },
      mangle: {
        screw_ie8: true
      },
      output: {
        ments: false,
        screw_ie8: true
      }
    })
  ]
};

There are usually lots of dependencies included so this size isn't anything unmon. Try using following flags when generating your bundle:

--optimize-minimize - Minifies bundle

--optimize-occurrence-order - Optimizes chunk IDs

--optimize-dedupe - Deduplicates same pieces of code

More on the topic here.

I have webpack 6.0.1 and recently have discovered that documentation for webpack are changed. I tested, use and can suggest the following configuration ideas for webpack.config.js. You can try these ideas and reduce the bundle size:

//webpack.config.js
module.exports = {
  ...
  devtool: 'cheap-module-source-map',
  ...
  plugins : [
    ...
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.HashedModuleIdsPlugin({
      hashFunction: 'sha256',
      hashDigest: 'hex',
      hashDigestLength: 4
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],

  ...

  optimization: {
    namedModules: false,
    namedChunks: false,
    nodeEnv: 'production',
    flagIncludedChunks: true,
    occurrenceOrder: true,
    sideEffects: true,
    usedExports: true,
    concatenateModules: true,
    splitChunks: {
      cacheGroups: {
        mons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all'
        }
      },
      minSize: 30000,
      maxAsyncRequests: 5,
      maxAsyncRequests: 3,      
    },
    noEmitOnErrors: true,
    minimize: true, 
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          press: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ],
    removeAvailableModules: true,
    removeEmptyChunks: true,
    mergeDuplicateChunks: true,    
  },
...
}

Comments:

1. webpack.optimize.ModuleConcatenationPlugin() - concatenate the scope of all your modules into one closure and allow for your code to have a faster execution time in the browser
2. webpack.HashedModuleIdsPlugin() - cause hashes to be based on the relative path of the module, generating a four character string as the module id
3. webpack.optimize.OccurrenceOrderPlugin() - vary the distribution of the ids to get the smallest id length for often used ids
4. webpack.NoEmitOnErrorsPlugin() - skip the emitting phase whenever there are errors while piling. This ensures that no assets are emitted that include errors

you can always try to use a javascript "minify" tool. It presses optimize your code. Search on google for javascript minify.