CODEWITHSUNDEEP
javascriptnode.jsreactjsbrowserify
Marco
Marco

Reputation: 789

React and ReactDOM bundled by browserify bigger than react.min.js and react-dom.min.js

i'm following the react getting started tutorial and everything is fine. Then I tried to understand how to import external package and so I started to use npm, browserify, watchify, and so on. From the same tutorial there is a section dedicated to package managers. The first question is "Why in the tutorial they write

var React = require('react');
var ReactDOM = require('react-dom');

but later they still include raw files, as follow

<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>

rather than include only bundle.js coming out from browserify? That's not clear to me.

I kind of ignored this. So my HTML is including ONLY the whole bundle

<script src="bundle.js"></script>

which is generated in this way

browserify -t [ babelify --presets [ react ] ] index.js | uglifyjs > bundle.js

Inside my index.js file there are these requires

var React = require('react');
var ReactDOM = require('react-dom');
var $ = require('jquery');

If I go and look at bundle.js size there is something I don't understand. Total size is 520KB. Too much only for a little example! If I remove require("jquery") total size goes down to 388 KB, so jquery weighs 132KB, but if I download jquery.min.js the size is only 84KB. If I remove require("react-dom") total size goes down to 70KB, it means that React DOM weighs 318KB, while react-dom.min.js is only 1KB!!

What's going on here? I read about NODE_ENV var (honeslty i didn't understand how/where to change its value), try a couple of solutions, but file size remains the same. But that'not the point.

react-dom.min.js is 1KB, react-dom.js is 2KB! So it doesn't seem to be the production/develpment environment, or am i missing something?

Thanks to anyone who will help me to understand a little more.

Upvotes: 0

Views: 525

Answers (1)

Taner Topal
Taner Topal

Reputation: 921

Try out this

browserify -t [ envify --NODE_ENV production babelify --presets [ react ] ] index.js | uglifyjs > bundle.js

Upvotes: 0

Related Questions