Comparison of rollup vs webpack bundle sizes

Prerequisites

• install node: https://nodejs.org/en/download

Install

    npm i -g yarn

    git clone [email protected]: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.