React: Webpack bundle with react and react dom output a large file

[ogawaryu]

I have a question for everyone.
I did a test with react + react-dom and preact + preact-compat using the same js file to generate a bundle using different frameworks. but the output of the react bundle with react-dom is very large, about 224kb. while the preact is 30.7kb, I find that a lot of difference. I do not know if there is any light version of react-dom or I need to do some optimization in the webpack. because it is a very big difference.

Has anyone seen this and talked about it?

output using Preact:

Same project using React:

thank you

[gaearon]

It’s hard to say anything without seeing your project.

[ogawaryu]

That my code app.js and webpack.config.js

file: app.js

import React from 'react'
import { render } from 'react-dom'

class App extends React.Component {
  static propTypes = {
    name: React.PropTypes.string
  }
  render() {
    return (
      <div>
        <h1>My name:  {this.props.name}</h1>
        <Comp nameComp='sample'/>
      </div>
    )
  }
}

const Comp = (props) => (
  <div>
    <h3>Title {props.nameComp}</h3>
  </div>
)


render(<App name='Ryuichi' />, document.getElementById('app'))

file: webpack.config.js

var webpack = require('webpack')

module.exports = {
  entry: './app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: 'babel-loader',
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react'],
        plugins: ['transform-decorators-legacy', 'transform-class-properties']
      }
    }]
  },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

with Preact, I added this line in webpack config

{
    // ...
    resolve: {
        alias: {
            'react': 'preact-compat',
            'react-dom': 'preact-compat'
        }
    }
    // ...
}

[gaearon]

Please provide a full project that we can git clone and npm install. Unfortunately a lot of issue reports without published projects end up being invalid or not actually reproducing the problem. So we ask that you publish a project to demonstrate it. Thanks!

[gaearon]

From a cursory glance though, I can see you don't follow the instructions for setting up a production build:

https://facebook.github.io/react/docs/optimizing-performance.html#webpack

React gives you a development build by default so that you can see helpful warnings. Preact does not, so if you do something incorrectly you might not find out for a long time what's causing the problems.

You need to explicitly switch React to production mode before deploying or measuring the app as documented in the link above. It is going to be larger because React has a more rich feature set (such as children manipulation API that handles edge cases correctly, event polyfills for older browsers, and cross-browser support for controlled inputs).

[ogawaryu]

this is the project in github:
https://github.com/ogawaryu/webpack-optimizing-react-test

I did as webpack command as facebook.github speaks the difference for very little.
see screenshot:
With react

With Preact:

The difference is still very huge.

[gaearon]

This result (~150 kB, not ~230 kB like in the original post) looks correct.
Note that after gzipping React would be ~40 kB, so it’s not a lot.

In the next version (out in a few days) React is even smaller (~105 kB, ~32 kB gzipped).

If you target low-end devices on bad connections, and your app is relatively simple, Preact might work well for you. If you care about supporting older desktop browsers, runtime performance, and correctness, you might want to consider React.

Ultimately I suggest you to try both and stick with what works best in your experience.
Hope this helps!

[ogawaryu]

For someone need more info about bundle file size:
https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html#reduced-file-size
React 16.0:
"
That amounts to a combined 32% size decrease compared to the previous version (30% post-gzip).

The size difference is partly attributable to a change in packaging. React now uses Rollup to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins. The flat bundle format also means that React's impact on bundle size is roughly consistent regardless of how your ship your app, whether it's with Webpack, Browserify, the pre-built UMD bundles, or any other system.
"