react-dom blowing out webpack bundle size MASSIVELY

Question

This has got to be one of the strangest issues with webpack i have ever come across...

Check out this bundle breakdown: react 116.01KB - fair enough

react-dom 533.24KB - seriously WTF

I thought it may be a corruption in my dependencies but nuking node_modules and reinstalling doesn't have any effect. I guess it's something to do with the way webpack is bundling it but i'm lost for ideas. The way i'm handing .js imports is pretty stock standard.

// webpack.config.js
const path = require('path');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');

const dashboard = new Dashboard();

module.exports = {
  context: path.join(__dirname, 'src'),
  entry: {
    bundle: './index.js',
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: 'file-loader?name=[name].[ext]',
      },
      {
        test: /.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            'postcss-loader',
          ],
        }),
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    // new BundleAnalyzerPlugin(),
    new ExtractTextPlugin('styles.css'),
    new DashboardPlugin(dashboard.setData),
  ],
  devServer: {
    quiet: true,
  },
};

// .babelrc
{
  "presets": [
    "react",
    "es2015"
  ],
  "plugins": ["transform-object-rest-spread"]
}

Toby Flemming · Accepted Answer · 2017-03-11T08:24:10.860

9

http://elijahmanor.com/react-file-size/

In v15.4.0 the file size of react-dom grew from 1.17kB to 619.05kB. Which means my webpack setup isn't doing anything wrong bundling files. The reason why this module grew so large is because code was transferred from the react module.

edited Mar 11 '17 at 08:24

answered Mar 10 '17 at 12:15

Toby Flemming

501
1
4
15

The values being listed are development bundle sizes. Generally a production or minimized build is shipped, probably gzip too, and so react.min.js.gz + react-dom.min.js.gz <50kb. Using "mode": "production" in the webpack build (now the default in webpack) will produce these expected smaller bundle sizes – Colin D May 31 '20 at 04:30

score 5 · Answer 2 · answered Aug 04 '21 at 14:06

I had to change my webpack.config.js, from

devtool: 'inline-source-map'

to

devtool: 'source-map'

Now it generates a much smaller .js + a separate .js.map file, for each of the chunks.

Notice the JS size is even less than react-dom.production.min.js in node_modules:

score 2 · Answer 3 · answered Mar 10 '17 at 11:29

2

If you look into the corresponding folders under the node_modules folder, and note the file sizes, you'll see that there's nothing to be surprised about:

That is, the size of the bundle grows noticeably because the size of react-dom.js is large.

answered Mar 10 '17 at 11:29

m1kael

2,801
1
15
14

I've got an old project that uses react-dom@15.3.2 and is 1KB... What has caused such a big jump? – Toby Flemming Mar 10 '17 at 11:57
The `react-dom@15.3.2` was just linking `react` package. – Gajus May 08 '17 at 17:41

score -1 · Answer 4 · answered Mar 10 '17 at 10:20

-1

Add this following commands at plugins to minify your imports:

new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.DefinePlugin(GLOBALS),
new webpack.optimize.UglifyJsPlugin(),

You should create a file or option to production bundle to use this plugins

answered Mar 10 '17 at 10:20

Alessander França

2,697
2
29
52

1

I'm aware that my bundle can be compressed down. My concern is the size of react-dom relative to react... I get a smaller bundle in production mode but react-dom is still not right. – Toby Flemming Mar 10 '17 at 10:22
I had a similar problem and solved with this plugins, in production react-dom becames 30k. To solve the 2mb compressed at my production bundle, I used route code splitting – Alessander França Mar 10 '17 at 10:25
2

I'm using Webpack 2. It does OccurrenceOrderPlugin and UglifyJsPlugin by default when you run `webpack -p` – Toby Flemming Mar 10 '17 at 10:34
I am using Wepack 2 either. When I change -p for theses plugins my bundle reduced from 8mb to 2mb – Alessander França Mar 10 '17 at 11:02
The plugins don't do anything for me... https://webpack.js.org/guides/migrating/#occurrenceorderplugin-is-now-on-by-default – Toby Flemming Mar 10 '17 at 11:23
*Terser* is [superior](https://github.com/babel/minify#benchmarks) to uglify. use `terser-webpack-plugin` – vsync Apr 24 '19 at 07:55

react-dom blowing out webpack bundle size MASSIVELY

4 Answers4