Comparison of rollup vs webpack bundle sizes
Prerequisites
- install node: https://nodejs.org/en/download
Install
npm i -g yarn
git clone git@github.com:nialloc9/rollup-vs-webpack.git
cd rollup-vs-webpack
npm install
Run
npm run compile
npm run compare
Results
-
Webpack(964) has a larger bundle size than rollup(110) by 854 bytes.
-
Upon inspection of the bundle it is because webpack wraps each module in a function that is internally invoked. This is to scope our code from each file.
-
The webpack wrapper function passes in arguements of module, exports, webpack_require to define the imports and exports.
-
This scoping of modules makes it safer than rollbar. Also with webpack it includes extra magic for CSS/HTML/image loading. However, this leads to increased bundle sizes.
Recommendation
-
Use rollbar for simpler modules such as a library.
-
Use webpack for more complicated projects.