打包

目前前端世界主流的前 3 名模塊打包器仍然是Webpack、Rollup和Esbuild。

Webpack

本質(zhì)上，Webpack 是一個(gè)用于現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具。當(dāng) Webpack 處理應(yīng)用程序時(shí)，它會(huì)在內(nèi)部從一個(gè)或多個(gè)入口點(diǎn)構(gòu)建一個(gè)依賴圖(dependency graph)，然后將你項(xiàng)目中所需的每一個(gè)模塊組合成一個(gè)或多個(gè) bundles，它們均為靜態(tài)資源，用于展示你的內(nèi)容。

(資料圖片僅供參考)

使用如下命令來(lái)安裝：webpacknpm install webpack -g

安裝完后，可以輸入webpack -v命令查看是否安裝成功。

文檔：https://webpack.docschina.org/concepts/

Esbuild

Esbuild 是一個(gè)用 Go 編寫(xiě)的模塊打包工具。因?yàn)樗罅坷昧?Go 中并行的特性，所以 Esbuild 非?？?。

Esbuild 內(nèi)部的算法經(jīng)過(guò)精心設(shè)計(jì)，在可能的情況下它將飽和使用所有可用的 CPU 內(nèi)核Esbuild 中的所有功能在開(kāi)始編寫(xiě)時(shí)就充分考慮了性能

文檔：https://esbuild.github.io/

Rollup

Rollup 是一個(gè) JavaScript 模塊打包工具，可以將多個(gè)小的代碼片段編譯為完整的庫(kù)和應(yīng)用。與傳統(tǒng)的 CommonJS 和 AMD 這一類非標(biāo)準(zhǔn)化的解決方案不同，Rollup 使用的是ES6版本 Javascript 中的模塊標(biāo)準(zhǔn)。

與 Webpack 相比快速且輕量級(jí)支持 Tree Shaking

文檔：https://www.rollupjs.com/

Parcel

Parcel 是一個(gè)眾所周知的零配置 Web 應(yīng)用程序打包器。

默認(rèn)啟用 Tree Shaking使用 Rust 編寫(xiě)的 Javascript 編譯器，以利用并行性并提高性能支持原生 ES Moduls 和 CommonJS 兩種模塊標(biāo)準(zhǔn)自動(dòng)代碼拆分

文檔：https://parceljs.org/docs/

Turbopack

Turbopack建立在 Turbo 之上：Turbo 是一種用于Rust的開(kāi)源增量記憶框架。Turbo 可以緩存程序中任何函數(shù)的結(jié)果。當(dāng)程序被執(zhí)行多次時(shí)，函數(shù)不會(huì)重新運(yùn)行，除非它們的輸入發(fā)生變化。

這種方法使 Turbopack 在計(jì)算增量更新方面非常快。這也優(yōu)化了 Turbopack 使得開(kāi)發(fā)過(guò)程中增量更新非常快，確保 dev server 能夠快速響應(yīng)代碼變更。

Turbopack 還使用請(qǐng)求級(jí)編譯方法來(lái)只編譯請(qǐng)求的代碼。如果瀏覽器請(qǐng)求某些 CSS，則只會(huì)編譯該 CSS，而不編譯引用的 images。采用請(qǐng)求級(jí)編譯有助于減少請(qǐng)求數(shù)量并能夠快速編譯它們。

目前，Turbopack 比現(xiàn)有打包工具快 10 倍～700 倍。但它目前只可以在 Next.js v13 中使用。未來(lái)計(jì)劃發(fā)布獨(dú)立的 CLI、插件 API，并支持 Svelte 和 Vue 等其他框架。

文檔：https://turbo.build/pack/docs

Nobundle：Vitejs

Vite 通過(guò)在一開(kāi)始將應(yīng)用中的模塊區(qū)分為依賴和源碼兩類，改進(jìn)了開(kāi)發(fā)服務(wù)的啟動(dòng)時(shí)間。

依賴大多為在開(kāi)發(fā)時(shí)不會(huì)變動(dòng)的純 JavaScript。一些較大的依賴（例如有上百個(gè)模塊的組件庫(kù)）處理的代價(jià)也很高。依賴也通常會(huì)存在多種模塊化格式（例如 ESM 或者 CommonJS）。Vite 將會(huì)使用 esbuild (https://esbuild.github.io/) 預(yù)構(gòu)建依賴(https://cn.vitejs.dev/guide/dep-pre-bundling.html)。源碼通常包含一些并非直接是 JavaScript 的文件，需要轉(zhuǎn)換（例如 JSX，CSS 或者 Vue/Svelte 組件），時(shí)常會(huì)被編輯。同時(shí)并不是所有的源碼都需要同時(shí)被加載（例如基于路由拆分的代碼模塊）。Vite 以 原生 ESM (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) 方式提供源碼。這實(shí)際上是讓瀏覽器接管了打包程序的部分工作：Vite 只需要在瀏覽器請(qǐng)求源碼時(shí)進(jìn)行轉(zhuǎn)換并按需提供源碼。根據(jù)情景動(dòng)態(tài)導(dǎo)入代碼，即只在當(dāng)前屏幕上實(shí)際使用時(shí)才會(huì)被處理。

對(duì)于生產(chǎn)環(huán)境，Vitejs 使用 Rollup 進(jìn)行打包。

文檔：https://vitejs.cn/

編譯工具

編譯工具（Compiler）可以理解為將一種語(yǔ)言編寫(xiě)的源代碼轉(zhuǎn)換為另一種語(yǔ)言的過(guò)程。在前端開(kāi)發(fā)過(guò)程中，我們經(jīng)常遇到如下兩類編譯場(chǎng)景：

將 TS 轉(zhuǎn)換為 JS；將新版本 JS 語(yǔ)法轉(zhuǎn)換為低版本瀏覽器支持的語(yǔ)法；

當(dāng)前前端界的編譯工具，如下四個(gè)占據(jù)了大部分市場(chǎng)：

名稱	描述	Star	底層語(yǔ)言
Babel (https://babeljs.io/)	JS 編譯器，用于將新版本 JS 語(yǔ)法轉(zhuǎn)換為向后兼容的 JS 語(yǔ)法。也可以通過(guò)插件(https://babeljs.io/docs/en/babel-plugin-transform-typescript)支持 TS 語(yǔ)法編譯，但不支持類型檢查。	41.8K	JS
TSC (https://www.typescriptlang.org/)	TS 官方編譯器，用于將 TS 編譯成 JS。同時(shí)也支持舊版本語(yǔ)法轉(zhuǎn)換，但不能自動(dòng) polyfill。	87.5K	TS
SWC (https://swc.rs/)	新一代 JS 編譯器，特點(diǎn)是速度非?？?，宣稱單核下比 Bable 快 20 倍。支持 TS 編譯，但不會(huì)做類型檢查。	25.5K	Rust
esbuild (https://esbuild.github.io/)	一款超級(jí)快且融合編譯&打包的工具，宣稱比現(xiàn)在生態(tài)（說(shuō)的就是你：webpack + babel）快10-100倍。支持 JS/TS，編譯 TS 不會(huì)做類型檢查。	34.3K	Go

Babel

最早開(kāi)始出現(xiàn)JS編譯工具之一，也是目前使用最多的 JS 編譯工具。隨著 Babel 的出現(xiàn)，前端開(kāi)發(fā)者可以直接編寫(xiě)現(xiàn)代 JS 代碼，同時(shí)又不失去對(duì)舊瀏覽器的支持。

簡(jiǎn)單來(lái)說(shuō)，Babel 是一個(gè)工具鏈，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。Babel 可以做如下事情：

語(yǔ)法轉(zhuǎn)換，比如 const、let、?.、箭頭函數(shù)等最新 ES API 和 ES 實(shí)例/靜態(tài)方法的 Polyfill，如 Promise、Array.prototype.includes等。這部分主要通過(guò)第三方庫(kù)來(lái) polyfill，如 core-js (https://github.com/zloirock/core-js)源碼轉(zhuǎn)換（codemods）

Babel 官方提供一個(gè) 在線編譯網(wǎng)站(https://babeljs.io/repl)，大家可以使用它便捷的體驗(yàn) Babel 的編譯效果。

Babel 構(gòu)建在插件之上，默認(rèn)情況下，Babel 不做任何處理，需要借助插件來(lái)完成語(yǔ)法的解析、轉(zhuǎn)換、輸出。

TSC

TSC（TypeScript Compiler） 是 TS 語(yǔ)言官方的編譯器，最初 TS 語(yǔ)言只能使用 TSC 進(jìn)行編譯，隨著 Babel 等工具也相繼支持編譯 TS，你可能有疑問(wèn)，他們之間有什么區(qū)別嗎？答案是有的， 相對(duì)于 Babel，TSC 有如下 優(yōu)勢(shì)：

可以進(jìn)行類型檢查；可以識(shí)別所有的類型并生成 .d.ts 類型文件；

原因在于 Babel 是單個(gè)文件編譯的，不會(huì)解析其他文件的信息，而 TSC 的類型檢查需要拿到整個(gè)工程的類型信息，需要做類型的引入、多文件 namespace 的合并等。而 Babel 編譯 TS 只是去掉類型聲明，保留原有 JS 功能。

通過(guò)配置 target也可以讓 TSC 編譯出低版本瀏覽器支持的代碼，但存在一些 缺點(diǎn)：

對(duì)一些新語(yǔ)法缺乏支持，如提案階段的語(yǔ)法；對(duì)于ESAPI和 ES 實(shí)例/靜態(tài)方法無(wú)法解析，需要單獨(dú)添加polyfill；

綜上，現(xiàn)在的前端 TS 項(xiàng)目一般還是會(huì)使用 Babel 做編譯，使用 TSC 做類型檢查。

Babel for transpiling, TSC for types ：

(https://www.typescriptlang.org/docs/handbook/babel-with-typescript.html#handbook-content)

SWC

一款基于 Rust 語(yǔ)言開(kāi)發(fā)的編譯工具，它相對(duì)于 Babel 的優(yōu)勢(shì)就是編譯速度非?？?/strong>，在它的官網(wǎng)上，寫(xiě)著如下一句話。

SWC is 20x faster thanBabelon a single thread and 70x fasteron four cores.

SWC 的成功得益于 Rust 語(yǔ)言，這是一門(mén)高效、性能更好且內(nèi)存安全的語(yǔ)言。隨著 SWC 的崛起，很快它就被 Next.js 采用，進(jìn)而取代 Babel 作為 JS 編譯工具。

優(yōu)缺點(diǎn)：

SWC 最大的優(yōu)勢(shì)就是編譯速度快，另外在可擴(kuò)展性、WASM 支持、社區(qū)和生態(tài)系統(tǒng)方面也是做的非常不錯(cuò)的。

但是，如果從 Babel 切換到 SWC，也有一些問(wèn)題需要考量：

相對(duì)于Babel，SWC的編譯支持上有一些區(qū)別，參考 官方列表 (https://swc.rs/docs/migrating-from-babel) 可能會(huì)導(dǎo)致代碼的瀏覽器支持度降低SWC 也有插件系統(tǒng)，但仍是實(shí)驗(yàn)性的，且開(kāi)發(fā)插件要學(xué)習(xí) Rust 和 WebAssembly，上手門(mén)檻明顯很高

SWC并不滿足只是一個(gè)編譯工具，未來(lái)或?qū)⒅С秩缦履芰?/strong>：

編譯工具，替代 Babel打包器，替代 Webpack，目前正在建設(shè)中：swcpack (https://swc.rs/docs/usage/bundling)類型檢查器，替代 TSC壓縮器，替代 Terser

esbuild

esbuild 更多是作為打包工具被大眾熟知，我們?cè)?strong>打包工具章節(jié)也做了介紹。

其實(shí) esbuild 也是支持編譯能力的，且速度要比 Babel 快很多，但是它不兼容低版本瀏覽器，產(chǎn)物無(wú)法降級(jí)到 ES6 以下。esbuild 也原生支持編譯 TS 語(yǔ)言，同樣不支持類型檢查，遺憾的是官方也沒(méi)有計(jì)劃去做這件事。

優(yōu)化技術(shù)

1、LightHouse

通過(guò)LightHouse獲取頁(yè)面FCP (First Contentful Paint)和Speed Index指標(biāo)，首屏加載FCP要盡量減少白頁(yè)，Speed Index越快越好（最多4s內(nèi)）2、Frame Rate

通過(guò)Frame Rate 工具檢測(cè)頁(yè)面FPS，遇到輪播圖動(dòng)畫(huà)等頁(yè)面交互時(shí)應(yīng)該盡量保證fps流暢，防止用戶觀看時(shí)出現(xiàn)卡頓閃爍等視覺(jué)體驗(yàn)3、NetWork

通過(guò)瀑布圖NetWork，直觀的看到接口的響應(yīng)速度，盡量縮短響應(yīng)的速度，同時(shí)也能看到一個(gè)頁(yè)面的接口請(qǐng)求數(shù)，減少同時(shí)并發(fā)的請(qǐng)求，把不重要的請(qǐng)求往后排序，來(lái)提升性能4、Performance

通過(guò)Performance監(jiān)聽(tīng)主線程性能，盡量減少DOM加載時(shí)間

參考：https://blog.csdn.net/m0_68324632/article/details/127487822

5、Tree Shaking

搖樹(shù)優(yōu)化Tree Shaking是Webpack里非常重要的優(yōu)化措施，它的優(yōu)化效果在Webpack 5中又得到了進(jìn)一步的提升。Tree Shaking可以幫我們檢測(cè)模塊中沒(méi)有使用到的代碼塊，并在Webpack打包時(shí)將沒(méi)有用到的代碼塊移除掉，減小打包后的資源體積大小。它的名字也非常形象，通過(guò)搖晃樹(shù)把樹(shù)上干枯無(wú)用的葉子搖掉。

參考：https://zhuanlan.zhihu.com/p/467104092

關(guān)鍵詞：