Introduction to Build Tools

Build tools aid in improving performance, improving development productivity, or automating tasks.

Build Tools can assist with:

• combining JavaScript modules and CSS into bundled files for production
• minifying files for improved performance
• running unit tests with one command
• automatically previewing changes to your application

The web development ecosystem is the set of technologies used to create web applications and the interactions between those technologies. It can be broken down into three stages: development, testing, and deployment.

Build tools are most helpful for complex projects that involve various types of resources. Not every web app will require build tools.

Task runners, such as Grunt and Gulp.js, are build tools that can automate workflows.

Bundlers, such as Webpack and esbuild, are used to package JavaScript files and other assets such as stylesheets, images, and fonts into bundled files for distribution of the web app. Bundlers also remove unused and duplicated code, improving efficiency.

A dependency graph is a type of data structure formed by a directed graph representing the relationship between different files. When one file depends on another, a connection is added to the graph. Bundlers, such as Webpack, need to create dependency graphs to map how assets are linked to each other to produce an output containing everything the app needs starting from an entry point.

Build tools can improve web application performance through processes such as code splitting, minification, dead code elimination, tree shaking.