Thoughtscript / x_team_build_tool_round_up

X-Team Rollup v Webpack v Parcel comparison!

Home Page:https://x-team.com/blog/rollup-webpack-parcel-comparison/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

x_team_build_tool_round_up

X-Team Rollup v Webpack v Parcel comparison!

Build Tool Show Down

We'll build a simple React app that's got simple implementations of all the basics:

    1.  React Router v4
    2.  React Redux
    3.  React 16.2.x

The exact package.json dependencies for our build tools:

Shared babel dependencies:

    "babel-loader": "=7.1.4",
    "babel-plugin-external-helpers": "=6.22.0",
    "babel-preset-env": "=1.6.1",
    "babel-preset-react": "=6.24.1",
    "babel-preset-stage-0": "=6.24.1"

parcel dependencies:

    "parcel-bundler": "=1.7.1"

rollup dependencies:

    "rollup": "=0.58.2",
    "rollup-plugin-babel": "=3.0.4",
    "rollup-plugin-uglify": "=3.0.0"

webpack dependencies:

    "webpack": "=4.6.0",
    "webpack-cli": "=2.0.15"

Each build tool's configuration is seperated into independent directories!

Battle of the Builds

We'll be comparing build time for development and production and additional features:

    $ npm run build-parcel
    $ npm run build-webpack
    $ npm run build-rollup

Testing

All three testing libraries were tested and built on the following Dell 15 XPS 2016 with specs:

    Intel Core i7-6700HQ Quad-Core (8 Logical Cores) at 2.60 GHz
    32 GB RAM
    Windows 10 Pro + Linux Subsystem and Cygwin
    NVIDIA 960M GPU
    256GB m2 PCIe SSD
    15.6" FHD Screen

Results divided into production and development modes:

Tool Dev Build Time One Dev Build Time Two Dev Build Time Three Dev Build Time Avg
Parcel 14.92 s 5.22 s 4.36 s 8.16 avg s
Rollup 0.570 s 0.482 s 0.487 s 0.513 avg s
Webpack 3.608 s 3.328 s 3.844 s 3.59 avg s

Production mode:

Tool Prod Build Time One Prod Build Time Two Prod Build Time Three Prod Build Time Avg
Parcel 738.509 s 35.364 s 35.592 s 269.82 avg s
Rollup 0.712 s 0.665 s 0.714 s 0.697 avg s
Webpack 3.636 s 3.805 s 4.305 s 3.915 avg s

Other Considerations

Above, we compare raw build time alone but there are several other highly relevant considerations:

  1. Parcel's caching feature sees dramatically decreases in time consumption after the initial run. For frequent, small changes, in smaller projects Parcel is a great choice.
  2. Rollup provides much simpler configuration over webpack 4 and has a host of pre-configured plugins that are a breeze to incorporate into your project. Rollup's also the fastest of the build tools period.
  3. Rollup also provides convient source maps which can aid in debugging.
  4. webpack 4 has gotten a lot easier to use and particularly through the convenient mode attribute (which will enforce minification when set to 'production' automatically now).

Takeaway

Overall, Parcel's a fantastic choice for small projects since it's requires zero configuration.

Rollup represents the next generation of build tools and is lightning fast with easy configuration.

webpack 4 represents a great improvement in the tradition of a tried and true universal build-tool workhorse. It's also largely interchangeable with webpack 3 configuration which simplifies migration.

Shout Outs and Great Resources

https://parceljs.org/

https://webpack.js.org/

https://code.lengstorf.com/learn-rollup-js/

About

X-Team Rollup v Webpack v Parcel comparison!

https://x-team.com/blog/rollup-webpack-parcel-comparison/


Languages

Language:JavaScript 77.0%Language:HTML 23.0%