了解打包的历史可以更好的知道事物发展的趋势。
Darkness
2009以前
在2009年之前的前端历史里，基本是不存在打包这个说法的。最开始的网页基本是纯静态的HTML或者服务端输出，js能做的事情也比较有限。
直到2004年，也就是Google 推出 Gmail 的时候，AJAX开始被广泛使用，也就是用JavaScript执行异步网络请求。JS相关的前端技术开始大发展，比如著名的jQuery。
Dawn
2009年以后
2009年Nodejs发布，使得JS在服务器端也能使用，同时也促进了整体JS相关技术的发展。如npm的提出
也是在2009年 commonjs 作为JS模块系统被使用到Nodejs中
定义模块
// add.jsfunction add (a, b) { return a + b}module.exports = { add }使用模块
// app.jsconst { add } = require('./add')console.log(add(1, 2))// 3但是 CommonJS 在浏览器内并不适用。因为 require() 的返回是同步的，意味着有多个依赖的话会阻塞 JS脚本的执行。
方案1: 使用AMD，在 CommonJS 的基础上定义了 Asynchronous Module Definition (AMD) 规范(2011 年），使用了异步回调的语法来并行下载多个依赖项。
方案2: 使用Browserify，它会从入口 js 文件开始，把所有的 require() 调用的文件打包合并到一个文件，这样就解决了异步加载的问题。
从Browserify开始有JS打包的概念，Webpack成为集大成者，后来出现基于编译型语言的Swc、Esbuild，显著提升打包速度。近两年又新出现基于浏览器原生 ES 模块的Snowpack、Vite。
Timeline
Browserify
通过将依赖打包，可以在浏览器中使用Node.js 模块，也就是require(‘modules’)
基本使用，通过main.js的模块引用逻辑，依次将所有的代码合并成一个bundle
browserify main.js -o bundle.js
通过script标签在HTML中使用
<script src="./bundle.js"/>
存在的问题
1. 不支持把代码打包成多个文件2. 对其他非 js 文件的加载不够完善3. 只支持 commonJS 模块规范，不支持 AMD 和 ES6 模块规范
Webpack
一个用于现代 JavaScript 应用程序的静态模块打包工具
Bundle Everything: 一站式解决方案 Code Splitting: 解决打包后的体积问题、优化了前端性能 Hot Module Replacement (HMR)：极大的提升了开发体验和开发效率 Plugins: 丰富的生态
Rollup
基于ES modules的新一代JavaScript 模块打包器
ES modules: 直接使用es modules，不用babel的转化 Tree-shaking: 删除冗余代码，进一步缩小代码体积 适用于构建基于ES6模块开发的、相对简单的bundle包
Parcel
随着webpack的配置越来越复杂，开箱即用/零配置的Parcel应运而生
越是使用JS，就越会发现JS的能力 是有极限 的，除非超越JS
Swc
用 Rust 实现的一套 TypeScript/JavaScript compiler，性能较 babel/ts 快 20 倍
Esbuild
An extremely fast JavaScript bundler
使用Go实现的JS打包工具
Why is esbuild fast?
It's written in Go[1] and compiles to native code. Parallelism is used heavily. Everything in esbuild is written from scratch. Memory is used efficiently.
Esbuild-loader
在webpack中使用Esbuild处理JS/TS文件
Snowpack
Snowpack is a lightning-fast frontend build tool, designed to leverage JavaScript's native module system
超越打包的极限，不再打包业务代码，而是直接使用浏览器原生的 JavaScript Module[2] 能力，dev-server可以在50ms内启动
基本原理：
整体生态不够完善，基于webpack的复杂一点的项目基本跑不起来
Vite
Vite (法语意为 "快速的"，发音
/vit/) 是一种新型前端构建工具，能够显著提升前端开发体验
开发服务器基于浏览器原生 ES 模块，毫秒级别快速启动，快速热更新
使用 esbuild 来进行依赖预构建，使用Rollup来进行生产环境打包 Vue第一优先级支持，但是Vite 2.0 版本完全不依赖于任何框架，比如React也能用 Monorepo 支持
参考链接：
swc[3]
Rollup[4]
webpack[5]
Snowpack[6]
Home | Vite 官方中文文档[7]
Parcel 中文文档 | Parcel 中文网[8]
esbuild - An extremely fast JavaScript bundler[9]
引用链接
[1] Go: https://golang.org/[2] JavaScript Module: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules[3] swc: https://swc.rs/[4] Rollup: https://rollupjs.org/guide/en/[5] webpack: https://webpack.js.org/[6] Snowpack: https://www.snowpack.dev/[7] Home | Vite 官方中文文档: https://cn.vitejs.dev/[8] Parcel 中文文档 | Parcel 中文网: https://www.parceljs.cn/[9] esbuild - An extremely fast JavaScript bundler: https://esbuild.github.io/
