聊聊最近對(duì)前端構(gòu)建工具的一些理解
大廠技術(shù) 高級(jí)前端 Node進(jìn)階
點(diǎn)擊上方 程序員成長(zhǎng)指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群
作者：0o華仔o0
https://juejin.cn/post/7121279495494959111
前言
最近有幸在前端團(tuán)隊(duì)里面做了一次關(guān)于 webpack 的技術(shù)分享。在分享的準(zhǔn)備過(guò)程中，為了能讓大家更好的理解 webpack，特意對(duì)市面上以前和現(xiàn)在流行的構(gòu)建工具做了一個(gè)梳理總結(jié)。在整理和分享的過(guò)程中，獲益匪淺，對(duì)前端構(gòu)建工具有了新的認(rèn)識(shí)。在這里，將自己的一些思考總結(jié)寫(xiě)出來(lái)，希望也能給到對(duì)構(gòu)建工具同樣感興趣的同學(xué)一點(diǎn)幫助。
本文的目錄結(jié)構(gòu)如下:
構(gòu)建工具的前世今生[1] js 模塊化的發(fā)展史和構(gòu)建工具的變化[2] 結(jié)束語(yǔ)[3]
構(gòu)建工具的前世今生
談到構(gòu)建工具，大家首先想到的肯定就是 Webpack 以及現(xiàn)在最??的 Vite。Webpack，功能強(qiáng)大，生態(tài)豐富，從面世到今天，一直是很受大家歡迎；Vite 采用 unbundle 構(gòu)建模式，帶來(lái)了極致的開(kāi)發(fā)體驗(yàn)，給開(kāi)發(fā)人員以新的選擇。
在這兩個(gè)構(gòu)建工具之外，還有其他的構(gòu)建工具，如和 Webpack、Vite 類(lèi)似的 Rollup、Parcel、Esbuild，自動(dòng)化構(gòu)建工具 grunt、gulp，以及更加久遠(yuǎn)的 YUI Tool。
這些工具的存在，構(gòu)成了前端構(gòu)建工具的發(fā)展史。
YUI Tool + Ant
YUI tool 是 07 年左右出現(xiàn)的一個(gè)構(gòu)建工具，功能比較簡(jiǎn)單，用于壓縮混淆 css 和 js 代碼，需要配合 java 的 Ant 使用。
當(dāng)時(shí) web 應(yīng)用開(kāi)發(fā)主要采用 JSP，還不像現(xiàn)在這樣前后端分離，通常是由 java 開(kāi)發(fā)人員來(lái)編寫(xiě) js、css 代碼，前端代碼都是和后端 java 代碼放在一起的。因此前端代碼的壓縮混淆也就基于 java 實(shí)現(xiàn)了。
Grunt / Gulp
Grunt / Gulp 都是運(yùn)行在 node 環(huán)境上的自動(dòng)化工具。
在開(kāi)發(fā)過(guò)程中，我們可以將一些常見(jiàn)操作如解析 html、es6 代碼轉(zhuǎn)換為 es5、less / sass 代碼轉(zhuǎn)換為 css 代碼、代碼檢查、代碼壓縮、代碼混淆配置成一系列任務(wù)，然后通過(guò) Grunt / Gulp 自動(dòng)執(zhí)行這些任務(wù)。
Grunt 和 Gulp 的不同點(diǎn)：
使用
Grunt的過(guò)程中，會(huì)產(chǎn)生一些中間態(tài)的臨時(shí)文件。一些任務(wù)生成臨時(shí)文件，其它任務(wù)可能會(huì)基于臨時(shí)文件再做處理并生成最終的構(gòu)建后文件，導(dǎo)致出現(xiàn)多次I/O。Gulp有文件流的概念，通過(guò)管道將多個(gè)任務(wù)和操作連接起來(lái)，不會(huì)產(chǎn)生臨時(shí)文件，減少了I/O操作，流程更清晰，更純粹，大大加快了構(gòu)建的速度。
Webpack / Rollup / Parcel
Webpack、Rollup、Parcel 統(tǒng)稱(chēng)為靜態(tài)模塊打包器。
這一類(lèi)構(gòu)建工具，通常需要指定入口 - entry，然后以 entry 為起點(diǎn)，通過(guò)分析整個(gè)項(xiàng)目?jī)?nèi)各個(gè)源文件之間的依賴(lài)關(guān)系，構(gòu)建一個(gè)模塊依賴(lài)圖 - module graph，然后再將 module graph 分離為三種類(lèi)型的 bundle: entry 所在的 initial bundle、lazy load 需要的 async bundle 和自定義分離規(guī)則的 custome bundle。
這幾個(gè)構(gòu)建工具各有優(yōu)勢(shì):
Webpack大而全，配置靈活，生態(tài)豐富，是構(gòu)建工具的首選。Parcel號(hào)稱(chēng)零配置，使用簡(jiǎn)單，適合不太需要定制化構(gòu)建的項(xiàng)目使用。Rollup推崇ESM標(biāo)準(zhǔn)開(kāi)發(fā)，打包出來(lái)的代碼干凈，適用于組件庫(kù)開(kāi)發(fā)。
Vite / Esbuild
新一代構(gòu)建工具。
esbuild, 基于 go 語(yǔ)言實(shí)現(xiàn)，代碼直接編譯成機(jī)器碼(不用像 js 那樣先解析為字節(jié)碼，再編譯為機(jī)器碼)，構(gòu)建速度比 webpack 更快。
vite, 開(kāi)發(fā)模式下借助瀏覽器對(duì) ESM 的支持，采用 nobundle 的方式進(jìn)行構(gòu)建，能提供極致的開(kāi)發(fā)體驗(yàn)；生產(chǎn)模式下則基于 rollup 進(jìn)行構(gòu)建。
js 模塊化的發(fā)展史和構(gòu)建工具的變化
javascript 語(yǔ)言設(shè)計(jì)之初，只是作為一個(gè)簡(jiǎn)單的腳本語(yǔ)言用來(lái)豐富網(wǎng)站的功能，并不像 java、c++ 那樣有 module 的概念，發(fā)展到現(xiàn)在的模樣，也經(jīng)歷了相當(dāng)長(zhǎng)的時(shí)間。
這段時(shí)間，可以簡(jiǎn)單歸納為：
青銅時(shí)代- no module；白銀時(shí)代- cjs、amd、cmd、umd、esm 相繼出現(xiàn)；黃金時(shí)代- 組件模塊化；
不同的時(shí)代，構(gòu)建工具也不同。
青銅時(shí)代
由于沒(méi)有 module 的概念, javascript 無(wú)法在語(yǔ)言層面實(shí)現(xiàn)模塊之間的相互隔離、相互依賴(lài)，只能由開(kāi)發(fā)人員手動(dòng)處理。
相應(yīng)的，早期的 web 開(kāi)發(fā)也比較簡(jiǎn)單甚至簡(jiǎn)陋:
通過(guò) 對(duì)象、iife(或者閉包)的方式實(shí)現(xiàn)模塊隔離；通過(guò)手動(dòng)確定 script的加載順序確定模塊之間的依賴(lài)關(guān)系。jsp開(kāi)發(fā)模式，沒(méi)有專(zhuān)門(mén)的前端，html、js、css代碼通常也由后端開(kāi)發(fā)人員編寫(xiě)。
為了節(jié)省帶寬和保密，通常需要對(duì)前端代碼做壓縮混淆處理。這個(gè)時(shí)候，構(gòu)建工具為 YUI Tool + Ant。
白銀時(shí)代
chrome v8 引擎 和 node 的橫空出世，給前端帶來(lái)了無(wú)限的可能。
同時(shí)，javascript 的模塊化標(biāo)準(zhǔn)也有了新的發(fā)展:
commonjs規(guī)范，適用于node環(huán)境開(kāi)發(fā)。amd、cmd規(guī)范，適用于瀏覽器環(huán)境。umd，兼容amd、commonjs，代碼可以同時(shí)運(yùn)行在瀏覽器和node環(huán)境。ESM，即ES6 module(這個(gè)時(shí)候還不是很成熟)；
同時(shí)還出現(xiàn)了 less、sass、 es6、 jslint、 eslint、typescript 等新的東西， 前端角色也開(kāi)始承擔(dān)越來(lái)越重要的作用，慢慢的獨(dú)立出來(lái)。
有了 node 提供的平臺(tái)，大量的工具開(kāi)始涌現(xiàn):
requirejs提供的r.js插件，可以分析 amd 模塊依賴(lài)關(guān)系、合并壓縮 js、優(yōu)化 css；less/sass插件，可以將less/sass代碼轉(zhuǎn)化為css代碼；babel，可以將es6轉(zhuǎn)化為es5；typescript，將ts編譯為js；jslint/eslint，代碼檢查；...
這個(gè)時(shí)候，我們可以將上面的的這些操作配置成一個(gè)個(gè)任務(wù)，然后通過(guò) Grunt / Gulp 自動(dòng)執(zhí)行任務(wù)。
黃金時(shí)代
基于 Angular、Vue、React 三大框架和 Webpack 的使用，組件模塊化成為前端開(kāi)發(fā)的主流模式。同時(shí) ESM 規(guī)范也原來(lái)越成熟，被更多的瀏覽器支持。
以 React 和 Webpack 為例，通常我們會(huì)將一個(gè)應(yīng)用涉及到的所有的功能拆分為一個(gè)個(gè)組件，如路由組件、頁(yè)面組件、表單組件、表格組件等，一個(gè)組件對(duì)應(yīng)一個(gè)源文件，然后通過(guò) Webpack 將這些源文件打包。在開(kāi)發(fā)過(guò)程中，還會(huì)通過(guò) Webpack 開(kāi)啟一個(gè) local server，實(shí)時(shí)查看代碼的運(yùn)行效果。
Webpack 是一個(gè)靜態(tài)模塊打包器，它會(huì)以 entry 指定的入口文件為起點(diǎn)，分析整個(gè)項(xiàng)目?jī)?nèi)各個(gè)源文件之間的依賴(lài)關(guān)系，構(gòu)建一個(gè)模塊依賴(lài)圖 - module graph，然后將 module graph 分離為多個(gè) bundle。在構(gòu)建 module graph 的過(guò)程中，會(huì)使用 loader 處理源文件，將它們轉(zhuǎn)化為瀏覽器可以是識(shí)別的 js、css、image、音視頻等。
隨著時(shí)間的發(fā)展， Webpack 的功能越來(lái)越來(lái)強(qiáng)大，也迎來(lái)諸多對(duì)手。
Webpack1
|
|
Rollup 出現(xiàn)(推崇 ESM 規(guī)范，可以實(shí)現(xiàn) tree shaking, 打包出來(lái)的代碼更干凈)
|
|
Webpack2(也實(shí)現(xiàn)了 tree shaking, 但是配置還是太繁瑣了)
|
|
Parcel (號(hào)稱(chēng) 0 配置)
|
|
Webpack4(通過(guò) mode 確定 development 和 production 模式，各個(gè)模式有自己的默認(rèn)配置)
|
|
Webpack5(持久化緩存、module federation)
Esbuild(采用 go 語(yǔ)言開(kāi)發(fā)，比 Webpack 更快)
Vite(推崇 ESM 規(guī)范，開(kāi)發(fā)模式采用 nobundle，更好的開(kāi)發(fā)體驗(yàn))
復(fù)制代碼豐富的構(gòu)建工具，形成了百花綻放的局面，可用于不同的情形，給開(kāi)發(fā)人員帶來(lái)了越來(lái)越多的選擇。
結(jié)束語(yǔ)
目前來(lái)看，構(gòu)建工具在整個(gè)前端體系中占據(jù)的位置是越來(lái)越重要。只會(huì) Webpack 甚至不懂構(gòu)建工具已經(jīng)無(wú)法滿(mǎn)足日常開(kāi)發(fā)。這就需要我們時(shí)時(shí)學(xué)習(xí)，緊跟時(shí)代的腳步，了解最新的技術(shù)，不斷前進(jìn)。
盡管前路坎坷,依然相信未來(lái)可期，加油 ???? ！
Node 社群
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話(huà)（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
如果你覺(jué)得這篇內(nèi)容對(duì)你有幫助，我想請(qǐng)你幫我2個(gè)小忙：
點(diǎn)贊和在看就是最大的支持