How to reduce bundle.js file size of react using webpack

Question

I am using webpack to build my react app, it's creating 4 Mb size of bundle.js which is very huge. How can I reduce this size? Here is my webpack.config.js, what else plugins should I use?

Here's a list of plugins I'm using, please suggest other plugins that can be helpful to reduce the size of bundle file, or what's wrong with my config.

var compressionPlugin = require('compression-webpack-plugin');
var copyWebpackPlugin = require('copy-webpack-plugin');
var extractTextWebpackPlugin = require('extract-text-webpack-plugin');
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

// Setup config.
module.exports = {
  devServer: {
    port: API === 'local' ? 8081 : 8080
  },
  devtool: DEBUG ? 'inline-source-map' : false,
  entry: [
    'whatwg-fetch',
    path.join(__dirname, PATH)
  ],
  module: {
    loaders: [
      {
        exclude: /(bower_components|node_modules)/,
        loader: 'babel-loader',
        query: {
          plugins: [
            'transform-class-properties',
            'transform-object-rest-spread',
            'transform-runtime'
          ],
          presets: ['latest', 'react']
        },
        test: /\.jsx?$/
      },
      {
        test: /\.scss?$/,
        use: CssPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        loader: 'worker-loader',
        options: {
          name: '[name].js',
          inline: true
        },
        test: /\.worker\.js$/
      }
    ]
  },
  output: {
    filename: '[name].bundle.[chunkhash].js',
    path: path.join(__dirname, './dist'),
    chunkFilename: "[name].[chunkhash].js",
    publicPath: '/'
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

Did you create a production build or did you measure the size with dev build? Usually production build doesn't include source maps and minifies your code. That will reduce your build size. 4Mb looks like you're including source maps in your build. — Dinesh Pandiyan, Feb 13 '19 at 06:38
Where and how is the `DEBUG` constant defined? I think if you run it as `NODE_ENV=production webpack` the file size will be smaller. If not, you need to take a look to the dependencies you are using. — n9iels, Feb 13 '19 at 07:12

score 0 · Answer 1 · answered Feb 13 '19 at 07:34

You should analyse your bundle by using webpack-bundle-analyzer to recognize the reasons. Then you could split your bundle. I found that react lazy is a good option.

Finally, you could try some webpack plugin to reduce your bundle such as: compression-webpack-plugin, dedupe-plugin, uglifyjs-plugin, ignore-plugin

How to reduce bundle.js file size of react using webpack

1 Answers1