react js with browserify

Question

I start to learn react js and they say on the react website "We recommend using React with a CommonJS module system like browserify"

So I used browserify with a simple hello world react component. Finally it produces an output file bundle.js of 651 ko (just for a simple hello world). With this file bundle.js, I no longer have to include the scripts react.js and react-dom.js in my webpage, so I concluded that the file bundle.js includes my component and the react library.

But if I creates many components, I will have some javascript files and after the browserify transformation, each output files will be big because each files contains the react library. it will produce only one output file.

So I don't understand why they recommend to use browserify rather than just include react.js and react-dom.js library into my webpage and also my components js files after a babel transformation?

Answer 1

I think your question is about the size of the bundle file (the resulted file of browserify build), you worry about the time it will take when loaded on the page. This is some really important things you should know : 1. you don't have to include all your files in one bundle : you can generate multiple bundles. For example, you can configure browserify to create one bundle for your vendor files, and one or multiple bundles for your components.

2. in Dev mode, you don't have to minify your bundle,

3. For prod, you should generate your bundle using the react prod mode and minification.

To achieve point 1 (multiple bundles), here is an example with grunt browserify plugin.

var jsFiles = {
        jsSrcFiles: './src/main/js/vs/**/*.js*', // my js and jsx source files
        jsLibs: [
            // vendor libs that I want to put in separate bundle
            'react/addons',
            ...
        ]
    };
    ...
    browserify: {
            app: {
                options: {
                    transform: ['reactify'],
                    extensions: ['.jsx'],
                    // Here is where I tell browserify not to bundle vendor files with my source files
                    external: jsFiles.jsLibs

                },
                src: [jsFiles.jsSrcFiles],
                dest: buildParams.js + '/vs_app.js'
            },
            // here is where I build vendor files in separate bundle named vendor.js
            vendor: {
                src: ['.'],
                dest: buildParams.js + '/vendor.js',
                options: {
                    alias: jsFiles.jsLibs
                }
            }
        }...

Browserify is a great tool when it comes to small projects, when your project becomes more complex, browserify config tends to be very complex. In order to have more control of your built bundles, I recommend to use webpack, which is also a tool that facebook recommends. It allows easy bundling customization...

Answer 2

For development it is better not to minify. You apply minify when you go to production. For example with gulp;

gulp.task('appjs', function(){
	browserify({ debug: true })
		.transform(babel.configure({stage: 0}))
		.require(source.appjs, { entry: true })
		.bundle()
		.pipe(vsource('app.min.js'))
		.pipe(gulp.dest('./ui-dist'));
});

gulp.task('buildapp', function(){
	browserify({ debug: false })
		.transform(babel)
		.require(source.appjs, { entry: true })
		.bundle()
		.pipe(vsource('app.min.js'))
		.pipe(vbuffer())
		.pipe(uglify())
		.pipe(gulp.dest('./ui-dist'));
});