了解打包的历史可以更好的知道事物发展的趋势
暗黑阶段
2009以前
在2009年之前的前端历史里，基本是不存在打包这个说法的。最开始的网页基本是纯静态的HTML或者服务端输出，js能做的事情也比较有限。
直到2004年，也就是Google 推出 Gmail 的时候，AJAX开始被广泛使用，也就是用JavaScript执行异步网络请求。JS相关的前端技术开始大发展，比如著名的jQuery。
黎明阶段
2009年以后
2009年Nodejs发布，使得JS在服务器端也能使用，同时也促进了整体JS相关技术的发展。如npm的提出也是在2009年 commonjs 作为JS模块系统被使用到Nodejs中
// 定义模块 add.js
function add (a, b) {
return a + b;
}
module.exports = {
add
}
// 使用模块 app.js
const { add } = require('./add');
console.log(add(1, 2));
但是 CommonJS 在浏览器内并不适用。因为 require() 的返回是同步的，意味着有多个依赖的话会阻塞 JS脚本的执行。
解决方案1: 使用AMD，在 CommonJS 的基础上定义了 Asynchronous Module Definition (AMD) 规范(2011 年），使用了异步回调的语法来并行下载多个依赖项。
解决方案2: 使用Browserify，它会从入口 js 文件开始，把所有的 require() 调用的文件打包合并到一个文件，这样就解决了异步加载的问题。
从Browserify开始有JS打包的概念，Webpack成为集大成者，后来出现基于编译型语言的Swc、Esbuild，显著提升打包速度。近两年又新出现基于浏览器原生 ES 模块的Snowpack、Vite。
时间线
Browserify
通过将依赖打包，可以使浏览器运行NodeJS编写的前端js代码，也就是require(‘modules’)
browserify main.js -o bundle.js
通过script标签在HTML中使用
<script src="./bundle.js"/>
存在的问题
-
不支持把代码打包成多个文件
-
对其他非 js 文件的加载不够完善
-
只支持 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/
原文地址
https://baijiahao.baidu.com/s?id=1717025204678506713
原文地址：http://www.cnblogs.com/hhddd-1024/p/16792734.html
