> For the complete documentation index, see [llms.txt](https://justin-se.gitbook.io/justin-se-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://justin-se.gitbook.io/justin-se-docs/javascript/bundler.md).

# Bundler

**Its the tool to compile source code to production friendly.**

### What is Production Friendly?

* **Consistent & Zero Dependency.**

  make it only need a runtime to start the app.\
  by compile all the 3rd party modules into one single build,\
  it doesn't need to install others module on production environment,\
  also avoid most of “it work on my computer” situation.
* **Performance Optimized**

  code minify, remove unused code (tree shaking).

  basically human write code that human readable,\
  and bundler make code run efficient on computer.

### Popular Bundlers

* [Vite](https://vitejs.dev/)\
  most favourite **"bundler"** or **"build tools"** of modern framework,\
  it is blazing fast that can make "hot module replace" (HMR) unnoticeable.\
  leverage both **esbuild** & **Rollup**
* [Esbuild](https://esbuild.github.io/)\
  fast compile time, most common used bundler
* [Rollup](https://rollupjs.org/)\
  provide great tree shaking performance, remove unused code to reduce build size,\
  it is a great pair with **esbuild**.
* [Ncc](https://github.com/vercel/ncc)\
  it‘s slow asf when you experiance esbuild.