steventhan/rollup-vs-webpack

rollup/webpack comparison

Rollup build

npm run build:rollup

Webpack build

npm run build:webpack

Output difference

files	rollup	webpack	difference
HelloWorld.js	246 bytes	4 KB	16x
DogBreedList.js	3 KB	11 KB	3x
DogBreed.js	337 bytes	5 KB	15x
DogBreedListWithHook.js	2 KB	9 KB	4.5x

Some notes

• webpack has not had support esm output format. It's in the work for webpack@5 [1]. Would this affect treeshakability?

• Some theories for large bundle size:

  • Also the reason that impacts transpiled code's readability: webpack added a lot of boilerplate code to support module resolution in browser env (e.g. rollup's HelloWorld.js vs. webpack's HelloWorld.js)
  • webpack wasn't able to treeshake Babel's helpers with current setup (hmm, can I tweak this?); rollup moved them into a shared module (rollup's _virtual module vs. webpack's DogBreedList.js)

• [Needs investigation] Does webpack support bundling static assets for libraries? rollup handles this through smart-asset-plugin. There's a github issue on webpack side about this [3], the options seems to be workaround:

  • Load assets as base-64 string (this would normally increases assets' sizes by 33% and browser can't parallel load nor caches them separately)
  • Let the lib's consumers import the assets themselves ('does not work for images as if the module needs to know where the image is it has already been built with a public path.')

Interesting reads

[1] Github issue: support output.libraryTarget: 'module'

[2] Webpack and Rollup: the same but different

[3] Github issue: How to ship assets (images, fonts) in a NPM package/library bundled by Webpack?