Why ReactJS bundle size in development mode is smaller than production mode?

Question

I'm trying to create my own Webpack configuration for a ReactJS project, I started with one component that displays single div.

The configuration seems to work pretty well, but the bundle size in development mode is smaller than production mode.

If I put module.exports.mode = "production" the bundle size is 411KB , and after changing the mode to "development" the bundle size reduced to 283KB

This is my webpack.config.js file:

 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const webpack = require('webpack'); module.exports = { // mode: 'production', mode: 'development', entry: { index: './src/index.jsx' }, output: { filename: '[name].bundle.js', chunkFilename: '[name].bundle.js', path: path.resolve(__dirname, './dist') }, plugins: [ new CleanWebpackPlugin([path.resolve(__dirname, './dist')]), new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}}), new HtmlWebpackPlugin({hash: true}) ], devtool: 'inline-source-map', module: { rules: [{ test: /(\\.js|\\.jsx)$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader' } }, { test: /\\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\\.scss$/, use: ['sass-loader'] }, { test: /\\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, { test: /\\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }] }, optimization: { splitChunks: { cacheGroups: { commons: { test: /[\\\\/]node_modules[\\\\/]/, name: "vendors", chunks: "all" } } } } };

This is the index.jsx file:

 import {Component} from 'react'; import {render} from 'react-dom'; class App extends Component { render() { return <div>David</div> } } let app = document.createElement("div"); app.setAttribute("id", "app"); document.body.appendChild(app); render(<App/>, document.querySelector('#app'));

package.json file:

 { "name": "simple-app", "version": "1.0.0", "main": "src/index.js", "license": "MIT", "scripts": { "build": "webpack -p --progress --config webpack.config.js", // bundle size: 411KB "build-stg": "webpack --progress --config webpack.config.js" // bundle size: 283KB }, "dependencies": { "@material-ui/core": "^3.2.2", "react": "^16.5.2", "react-dom": "^16.5.2", "react-router-dom": "^4.3.1" }, "devDependencies": { "@babel/core": "^7.1.2", "@babel/plugin-transform-runtime": "^7.1.0", "@babel/preset-env": "^7.1.0", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.4", "clean-webpack-plugin": "^0.1.19", "compression-webpack-plugin": "^2.0.0", "css-loader": "^1.0.0", "file-loader": "^2.0.0", "html-webpack-plugin": "^3.2.0", "path": "^0.12.7", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "uglifyjs-webpack-plugin": "^2.0.1", "webpack": "^4.21.0", "webpack-bundle-analyzer": "^3.0.3", "webpack-cli": "^3.1.2" } }

Answer 1

The reason behind this problem are inline-source-maps. Disabling them for both modes development and production gave 111KB size of vendor.bundle.js for development mode and 101KB in production mode. Moreover, enabling source-maps in production is usually a bad practice.