JS打包简史

标签：模块 JavaScript js 简史 https JS 打包

暗黑阶段
黎明阶段
时间线
Browserify
Webpack
Rollup
Parcel
Swc
Esbuild
Why is esbuild fast ?
Esbuild-loader
Snowpack
Vite
引用链接
原文地址

了解打包的历史可以更好的知道事物发展的趋势

暗黑阶段

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

标签：模块,JavaScript,js,简史,https,JS,打包
From： https://www.cnblogs.com/hhddd-1024/p/16792734.html