主流打包工具对比
构建工具就是指能自动对代码执行检验、转换、压缩等功能的工具。从目前市场上流行的构建工具来看，常见的功能有：
- 代码转换，例如将 ts 文件转换为 js 文件。
- 代码打包，将有关联的代码打包在一起。
- 代码压缩、文件压缩、gzip 压缩等。
- 热加载，修改代码后自动刷新页面。
- 代码检验，检查代码格式是否符合规范。
- 在开发中使用构建工具，能够大大的提升了开发效率。
webpack
- 热加载：开发环境下修改代码，页面实时刷新。
- 按需加载：每次打开页面时，只加载当前页面所需要的资源。在切换到其他页面时，再加载对应的资源。
- 代码打包：打包、压缩、分割代码等等。
- tree-shaking：打包过程中自动剔除没有使用的代码。
- 可以通过 loader 和 plugin 处理各种各样的资源依赖。
loader
什么是 loader？它是一个转换器，用于对源代码进行转换。
plugin
webpack 在整个编译周期中会触发很多不同的事件，plugin 可以监听这些事件，并且可以调用 webpack 的 API 对输出资源进行处理。
这是它和 loader 的不同之处，loader 一般只能对源文件代码进行转换，而 plugin 可以做得更多。plugin 在整个编译周期中都可以被调用，只要监听事件。
rollup
能得到广大开发者的喜爱，依靠的就是它的打包功能。
- 对于使用原生 ESM 模块编写的代码，rollup 会静态分析代码中的 import，并将排除任何未实际使用的代码。
- 支持程序流分析，能更加正确的判断项目本身的代码是否有副作用（配合 tree-shaking）。
从 webpack 提供的 tree-shaking 官方 DEMO，也能看出 webpack 的 tree-shaking 并不完美，但rollup 就不会有这种问题，它基于原生 ESM 模块，在编译时就能分析出哪些是没有使用的代码（webpack 还要额外配置）。所以 rollup 打包出来的代码非常干净。
另外 webpack 打包还需要注入自己的模块加载系统，所以还会有一部分“多余”的代码，不够干净。
vite
- 开发环境下，使用原生 ESM 模块进行开发。同时拦截资源请求，根据请求找到对应的文件，作少许改动后返回代码。因此无需进行打包，直接按需编译，启动非常快。相比之下，webpack 的热加载在每次更改代码时都需要重新打包所有代码才能刷新页面，特别是代码很多时，打包非常缓慢。
- 生产环境下使用 rollup 打包。