Bundle size not reduced when I make a production build

[sourabhdebnath]

When I try in development, the bundle analyzer shows a reduction of 200kB. However, when I make a build for production, it does not seem to kick in and the bundle size is not reduced at all.

webpack.config.js

/* eslint-disable no-console */
const webpack = require('webpack');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const logger = require('../logger.js');
const merge = require('webpack-merge');

const webpackConfig = process.env.NODE_ENV === 'development' ?
  require('./webpack.dev.config') : require('./webpack.prod.config');

const BUILD_DIR = path.resolve(__dirname, '..', 'build');
const APP_DIR = path.resolve(__dirname, '..', 'src');

const baseConfig = {
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        include: APP_DIR,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: Infinity,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    },
    minimizer: [new TerserPlugin({
      sourceMap: true,
      parallel: true,
    })]
  },
  plugins: [
    new webpack.HashedModuleIdsPlugin(),
    new webpack.ContextReplacementPlugin(
      /moment[\/\\]locale$/, // eslint-disable-line
      /en/
    ),
    // move static assets from src to build dir
    new CopyWebpackPlugin([
      { from: path.resolve(APP_DIR, 'manifest.json'), to: BUILD_DIR }
    ]),
  ]
};

// merge webpack baseConfig with dev config
module.exports = merge(baseConfig, webpackConfig);
/* eslint-disable no-console */

.babelrc

{
  "plugins": [
    "transform-async-to-generator", 
    "transform-object-rest-spread", 
    "transform-class-properties", 
    "react-hot-loader/babel",
    "syntax-dynamic-import",
    [ 
      "react-intl", {
        "messagesDir": "build/messages"
      }
    ],
    "lodash"
  ],
  "presets": ["es2015", "react", ["env", {"targets": { "node": "8.10.0" }}]]
}

Any help would be appreciated! Thanks.

[jdalton]

Hi @Sourabh-!

I'm not sure. You might try babel or webpack support channels.