0

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.

Marco
  • 759
  • 3
  • 9
  • 22
  • Look here: http://stackoverflow.com/questions/26540627/how-to-set-process-env-before-a-browserified-script-is-run – Taner Topal Jul 05 '16 at 14:35
  • I saw that post. How can I merge this `browserify index.js -t [ envify --DEBUG app:* --NODE_ENV production --FOO bar ] > bundle.js` with this `browserify -t [ babelify --presets [ react ] ] index.js | uglifyjs > bundle.js` ? – Marco Jul 05 '16 at 15:36
  • You're probably including the non-minified versions. You probably won't be able to match your size with your own minification, because each library probably has a specific optimized configuration. – Jeremy Jul 07 '16 at 00:13
  • Possible duplicate of [Reduce Browserify bundle of react.min.js and react-dom.min.js](https://stackoverflow.com/questions/41286874/reduce-browserify-bundle-of-react-min-js-and-react-dom-min-js) – Flux Sep 24 '18 at 14:04

1 Answers1

0

Try out this

browserify -t [ envify --NODE_ENV production babelify --presets [ react ] ] index.js | uglifyjs > bundle.js
Taner Topal
  • 921
  • 8
  • 14
  • I does not work. I moved babel transform to package.json, and left envify transform inline beside browserify command. Now I got no errors (seems it works), but the file size remains the same, and i still can see the "Download the React DevTools for a better development experience" message in the developer bar. So i guess I am still in developer environment . – Marco Jul 08 '16 at 13:10
  • It does work, but you need to use the `-g` flag instead of `-t` to transform globally. Otherwise, it will only envify your code and not required modules. – Mike Jan 24 '17 at 17:13