Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webpack 2 vs Rollup
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;
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',
};
❯ 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
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;
@marvinhagemeister

This comment has been minimized.

Copy link

@marvinhagemeister marvinhagemeister commented Aug 20, 2016

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. :/

@benftwc

This comment has been minimized.

Copy link

@benftwc benftwc commented Sep 29, 2016

Thanks a lot for sharing with us those benchmarks ;)

@corysimmons

This comment has been minimized.

Copy link

@corysimmons corysimmons commented Oct 22, 2016

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

@compulim

This comment has been minimized.

Copy link

@compulim compulim commented Nov 16, 2016

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

@fanyer

This comment has been minimized.

Copy link

@fanyer fanyer commented Jan 11, 2017

easily undestandable!

@fanyer

This comment has been minimized.

Copy link

@fanyer fanyer commented Jan 11, 2017

@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 )

@Vanuan

This comment has been minimized.

Copy link

@Vanuan Vanuan commented Apr 8, 2017

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.

@aaugusto-efi

This comment has been minimized.

@cies

This comment has been minimized.

Copy link

@cies cies commented Feb 24, 2018

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

uglifyjs --compress --mangl
@alex-shamshurin

This comment has been minimized.

Copy link

@alex-shamshurin alex-shamshurin commented Mar 8, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment