Bundle with Webpack or Rollup about react-recollect

[davidgilbertson]

This turned into a bit of a Webpack vs Rollup exercise.

Webpack won. 4% smaller bundle and less painful config.

For posterity...

Webpack

Webpack's documentation was as baffling as always, of course there's 600 ways of using externals and I'm sure it's perfectly obvious which one to use if you already know which one to use.

Bundle size: 4.159 KB

Config:

const path = require('path');
const { peerDependencies } = require('./package.json');

module.exports = {
  mode: 'production',
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
    ],
  },
  externals: Object.keys(peerDependencies),
};

Rollup

Rollup needs 4 plugins and the associated reading material just to work. I wound up copy/pasting from react-redux. And it throws 'circular reference' warnings, which is not confidence inspiring.

Bundle size: 4.335 KB

Config:

import babelPlugin from 'rollup-plugin-babel';
import nodeResolvePlugin from 'rollup-plugin-node-resolve';
import commonJsPlugin from 'rollup-plugin-commonjs';
import { uglify } from 'rollup-plugin-uglify';
import { peerDependencies } from './package.json';

export default {
  input: './src/index.js',
  output: {
    file: './dist/index.js',
    format: 'umd',
    name: 'ReactRecollect',
  },
  external: Object.keys(peerDependencies),
  plugins: [
    nodeResolvePlugin(),
    babelPlugin({
      exclude: '**/node_modules/**',
      runtimeHelpers: true,
    }),
    commonJsPlugin(),
    uglify({
      compress: {
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        warnings: false,
      },
    }),
  ],
};

Parcel

Was a non-starter, since it seems it can exclude externals (e.g. react).