Webpack 2 vs Rollup

babel.client.js

const config = {
  presets: ['es2015', 'stage-3', 'react'],
  plugins: [
    'transform-object-rest-spread',
    'transform-function-bind',
    'transform-class-properties',
    'transform-decorators',
  ],
  sourceMaps: 'both',
};

if (process.NODE_ENV === 'production') {
  [
    'transform-react-constant-elements',
    'transform-react-inline-elements',
    'transform-node-env-inline',
    'remove-debugger',
    'remove-console',
  ].forEach(p => config.plugins.push(p));
  config.sourceMaps = false;
}

module.exports = config;

rollup.js

import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
const babelConfig = require('./babel.client');

babelConfig.presets[0] = 'es2015-rollup';

export default {
  entry: 'src/client.js',
  dest: 'src/public/bundle-rollup.js',
  plugins: [
    babel(Object.assign({
      exclude: 'node_modules/**',
      babelrc: false,
    }, babelConfig)),
    commonjs({
      include: 'node_modules/**',
      namedExports: {
        react: ['PropTypes'],
        'react-dom': ['render'],
      },
    }),
    nodeResolve({
      jsnext: false,
      main: true,
      browser: true,
    }),
  ],
  format: 'cjs',
};

Webpack 2.0.7-beta vs Rollup

❯ rollup --version
rollup version 0.25.3

❯ time rollup -c ./rollup.js                      
rollup -c ./rollup.js  4.65s user 0.22s system 118% cpu 4.131 total

❯ time webpack                      
Hash: ebb00bbccd954c114d3c
Version: webpack 2.0.7-beta
Time: 3623ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.44 MB       0  [emitted]  bundle
bundle.js.map  1.64 MB       0  [emitted]  bundle
    + 373 hidden modules
webpack  4.46s user 0.17s system 104% cpu 4.445 total

❯ du *.js -h 
1.4M    bundle.js
1.8M    bundle-rollup.js


❯ time NODE_ENV='production' webpack
NODE_ENV='production' webpack  9.94s user 0.20s system 107% cpu 9.396 total

❯ time (NODE_ENV='production' rollup -c ./rollup.js && uglifyjs src/public/bundle-rollup.js --compress --mangle -o src/public/bundle-rollup.js)     
( NODE_ENV='production' rollup -c ./rollup.js && uglifyjs  --compress --mangl)  10.52s user 0.33s system 115% cpu 9.405 total

❯ du -h *.js
456K    bundle.js
876K    bundle-rollup.js

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const babelConfig = require('./babel.client');

const config = {
  debug: true,

  devtool: 'source-map',

  entry: {
    bundle: './src/client.js',
  },

  output: {
    path: path.resolve(__dirname, 'src/public'),
    filename: '[name].js',
  },

  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: Object.assign(babelConfig, { cacheDirectory: './tmp' }),
    }],
  },
  plugins: [],
  resolve: { },
};

// Hot mode
if (process.env.HOT) {
  config.devtool = 'eval';
  config.entry.bundle.unshift('react-native-webpack-server/hot/entry');
  config.entry.bundle.unshift('webpack/hot/only-dev-server');
  config.entry.bundle.unshift('webpack-dev-server/client?http://localhost:8082');
  config.output.publicPath = 'http://localhost:8082/';
  config.plugins.unshift(new webpack.HotModuleReplacementPlugin());

  // Note: enabling React Transform and React Transform HMR:

  config.module.loaders[0].query.plugins.push('react-transform');
  config.module.loaders[0].query.extra = {
    'react-transform': [{
      target: 'react-transform-hmr',
      imports: ['react-native'],
      locals: ['module'],
    }],
  };
}

if (process.env.NODE_ENV === 'production') {
  config.devtool = false;
  config.debug = false;
  config.plugins.push(new webpack.optimize.OccurrenceOrderPlugin());
  config.plugins.push(new webpack.optimize.UglifyJsPlugin());
}

module.exports = config;

Awesome, thanks a lot! I'm surprised that the webpack2 bundle is that much smaller than the rollup bundle.

EDIT: Just switched some personal small react apps over to webpack2 from rollup but there is practically no difference. :/

Thanks a lot for sharing with us those benchmarks ;)

Here's another set of benchmarks for anyone interested https://github.com/samccone/The-cost-of-transpiling-es2015-in-2016

Looks like the Webpack version is uglified, but rollup.js version is not.

easily undestandable!

@compulim You'd better be go over Webpack 2.0.7-beta vs Rollup again , both webpack and rollup is uglified.(rollup is uglified with assigning in the shell, while for webpack ,it is pushed into the webpack.config.js's Plugin field )

It's not comparing apples to apples. It's comparing uglify's dead code elimination to rollup's tree shaking. Dead code elimination and tree shaking is not the same.

To have a better comparison, you should enable rollup uglify plugin https://github.com/TrySound/rollup-plugin-uglify

But again, webpack doesn't have any tree shaking.

@Vanuan webpack does have tree shaking out of the box.
https://medium.com/modus-create-front-end-development/webpack-2-tree-shaking-configuration-9f1de90f3233

In case of rollup the --mangle flag has a typo. That may explain the diff in size:

uglifyjs --compress --mangl

Webpack produced code cannot be less than a Rollup code because it wraps each module in function.