Build tools let's you transform your source code for production environments. Additionally, they can be utilized to use pre-processors, modules and perform various other tasks.
Some of these transformations include:
| Transformation | Definition |
|---|---|
| Transpilation | Adds backward compatibility for browsers that don't support new JavaScript syntax |
| Minify/Uglify | Removes white space and shortens variable names to reduce the source code's file size. |
| Bundling | Organizes your dependencies and other codes into file bundles to optimize delivery. |
| Dead Code Elimination | Removes unused code paths from the bundle. |
Build Tools
The following are some of the more popular build tools
Parcel
Parcel is a neat build tool that can be used with zero configuration. It also supports differential serving which means it will build different bundles but only send down those optimized for the visitor's browser.
Rollup
Rollup describes itself as a module bundler that lets you compiles your ES/AMD/common JS modules used into your project into your bundle. Rollup also has broader support for code splitting over parcel. Code Splitting is breaking up bundles into smaller independent bundles so that they only loaded on the pages that need them.
Webpack
Webpack is the most robust build tool on this list. Webpack has wide support for transformations such as dead code elimination, removing dead imported code and compressing images and svg. Webpack is also used by the angular CLI. However, webpack can be a bit daunting to pickup due to it's robustness.
ES Build
ES Build describes itself as 'An extremely fast JavaScript bundler'. ES Build boasts a 10-100x speed boost over other alternatives in terms of build times. ES Build supports ES6 and CommonJS modules.
Snowpack
Snowpack is a relatively new build tool on the scene and also boasts faster build times over parcel and webpack. Like the other tools snowpack can be used with libraries like React and Vue as an alternative to the default cli tool.
Browserify
Browserify started with the simple mission of allowing you to port your nodejs code to run in the browser. It can be used out of the box to compile a node script into a bundle that can be dropped into a web page. Browserify also supports other build tool features such as transformations and CSS & image imports.
Conclusion
This article is more an overview than a feature comparison. The Tooling Report is your best guide to understand of the features supported by some of the tools mentioned here.
It is also worth mentioning these tools support 3rd party plugins for adding custom functionality. Build tools are an essential part of the modern development workflow, it helps keeps our sites fast, manageable and optimized.
Need More? 👀🔍
We are just at the halfway point in our journey in the frontend web ecosystem. Next week will be our 5th destination but there's so much to discover outside of this series.
If you are interested in hearing about great dev talks, new products, services and tools consider following me on twitter. Over there I share whatever comes across my radar that I think is worth checking out.
Top comments (0)