https://github.com/Thoughtscript/x_team_build_tool_round_up
X-Team Rollup v Webpack v Parcel comparison!
https://github.com/Thoughtscript/x_team_build_tool_round_up
parcel rollup webpack4
Last synced: 10 months ago
JSON representation
X-Team Rollup v Webpack v Parcel comparison!
- Host: GitHub
- URL: https://github.com/Thoughtscript/x_team_build_tool_round_up
- Owner: Thoughtscript
- Archived: true
- Created: 2018-04-20T17:44:46.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-11T02:59:29.000Z (over 7 years ago)
- Last Synced: 2024-10-28T13:11:30.185Z (about 1 year ago)
- Topics: parcel, rollup, webpack4
- Language: JavaScript
- Homepage: https://x-team.com/blog/rollup-webpack-parcel-comparison/
- Size: 142 KB
- Stars: 10
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```json
"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:
```json
"parcel-bundler": "=1.7.1"
```
`rollup` dependencies:
```json
"rollup": "=0.58.2",
"rollup-plugin-babel": "=3.0.4",
"rollup-plugin-uglify": "=3.0.0"
```
`webpack` dependencies:
```json
"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:
```bash
$ 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/