Contents

About bundler(1)

   Jul 15, 2023     1 min read

A post to learn and share about Bundler.

Recently, Iโ€™ve been learning about ES (ECMAScript). While learning about browsers that donโ€™t support ES6 (IE, etc.), I was wondering who would be responsible for making my project ES-compliant, and I learned about Bundler, which I will share in this post.

What is a Bundler

A tool used in web application development that is responsible for taking multiple modules or files and bundling them together. Bundling is the process of bundling the resources (JavaScript files, CSS files, images, etc.) required by a web application into a single file and delivering it to the client.

What are the roles of a bundler

  1. Module support: Starting with ES6, the module system was added to the ES standard. Modules are written on a per-file basis, and can be exported and imported by other modules to use the parts they need. Bundlers handle these ES modules, identify their dependencies, and bundle them together.
  2. Dependency resolution: ES modules can declare dependencies on other modules, and import and use the modules they need. The bundler understands these dependencies, loads the required modules, and bundles them together. This allows you to efficiently manage dependencies between modules in your web application.
  3. Transfiling: The bundler can convert JavaScript code written using ES6 or later syntax to older versions of JavaScript. This is necessary to maintain compatibility with older browsers. It is often used in conjunction with Babel to convert ES6+ code to ES5 code.
  4. Code optimization: The bundler can perform various optimizations to minimize the size of the code and improve performance. This includes removing redundant code, compression, obfuscation, and more. The bundled output is delivered to the client in an optimized form, enabling fast loading and efficient execution.
  5. Separate environments: The bundler supports using different settings for development and production environments. The development environment provides a development server and features like Hot Module Replacement (HMR) to facilitate the development process. In production, you can create optimized bundles and take advantage of caching and other features to improve performance.

A popular JS bundler is webpack. It is mostly used in conjunction with babel, which I will write about in the next post.