- ES Modules
- Last updated on
Bundling & Tree-Shaking
Bundling is the process of taking your ES modules, and all of the modules that they import, and combining them into a single bundled JavaScript file.
Modern browsers can load ES modules natively. But, native ES modules create performance issues in a two ways.
When a browser downloads a JavaScript file, it has to be parsed and compiled before it can run. With native ES modules, the functions you import can’t be used (and the file can’t run) until the browser parses and compiles file, notices the import, and then downloads, parses, and compiles the imported modules.
For each import, this adds additional latency. The CSS @import directive has similar performance issues.
Additionally, with native ES modules, when you import a function or variable, the entire file for that module has to be downloaded. If you’re importing just a single function from a file that contains hundreds of them, you end up downloading far more JavaScript than you actually need.
Using a module bundler before shipping your code to production allows you to overcome both of these issues.
Currently, ESBuild is my bundler of choice.