• Utiliza AMD (Asynchronous module definition)
• No empaqueta los módulos de la aplicación
• Hace una petición HTTP por cada ḿodulo

define(
  ['react', 'react-dom', './containers/App.js'],
  (React, ReactDOM, App) => {
    return ReactDOM.render(
      React.createElement(App, null),
      document.getElementById('app')
    );
  }
);

Require.js

Tiempo

M ó d u l os

App.js

React

ReactDOM

• Utiliza CommonJS (el sistema nativo de Node.js)
• Permite usar los módulos de npm
• Genera un solo archivo final

const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./containers/App.js');

return ReactDOM.render(
  React.createElement(App, null),
  document.getElementById('app')
);

Browserify

Tiempo

M ó d u l os

bundle.min.js?v=1

• Utiliza CommonJS y AMD
• Permite usar los módulos de npm
• Permite carga asíncrona
• Permite múltiples funciones extras (HMR, DLL, Hashing, servidor de estáticos)

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

require.ensure(
  ['./containers/App.js'],
  App => {
    return render(
      React.createElement(App, null),
      document.getElementById('app')
    );
  }
);

Tiempo

M ó d u l os

main.7ff87a8.js