為什么需要構(gòu)建工具？

• 處理其他類型文件使其能被瀏覽器正常加載 —— 許多其他類型的文件需要編譯處理為 ES6 模塊才能被瀏覽器正常加載（JSX、Vue、TS、CSS、Image 等）。
• 解決引用路徑的問(wèn)題 —— 許多第三方依賴包在通過(guò)第三方 URL 引用時(shí)，不僅過(guò)程煩瑣，而且往往難以進(jìn)行靈活的版本控制與更新，因此需要構(gòu)建工具來(lái)解決這類問(wèn)題。
• 為開(kāi)發(fā)提供輔助工具 —— 對(duì)于現(xiàn)實(shí)中的項(xiàng)目開(kāi)發(fā)而言，一些便利的輔助開(kāi)發(fā)技術(shù)，例如熱更新、sourceMap 等還是需要由構(gòu)建工具來(lái)提供。

什么是無(wú)包構(gòu)建

它的構(gòu)建方式是：

• 在構(gòu)建時(shí)只需處理模塊的編譯而無(wú)須打包，把模塊間的相互依賴關(guān)系完全交給瀏覽器來(lái)處理。
• 瀏覽器會(huì)加載入口模塊，分析依賴后，再通過(guò)網(wǎng)絡(luò)請(qǐng)求加載被依賴的模塊。

這種通過(guò)瀏覽器原生的模塊進(jìn)行解析的方式又稱為 Native-ESM（Native ES Module）。

//./src/index.html
...
<!-- 注意： type="module" -->
<script type="module" src="./modules/foo.js"></script>
...
//.src/modules/foo.js
import { bar } from './bar.js'
import { appendHTML } from './common.js'
...
import('https://cdn.jsdelivr.net/npm/lodash-es@4.17.15/slice.js').then((module) => {...})

基于瀏覽器的 JS 模塊加載功能

HTML 中的 Script 引用注意點(diǎn)：

• 入口模塊文件在頁(yè)面中引用時(shí)需要帶上 type="module" 屬性。
• 帶有 type="module" 屬性的 script在瀏覽器中通過(guò) defer 的方式異步執(zhí)行（異步下載，不阻塞 HTML，順次執(zhí)行），即使是行內(nèi)的 script 代碼也遵循這一原則（而普通的行內(nèi) script 代碼則忽略 defer 屬性）。
• 帶有 type="module" 屬性且?guī)в?async 屬性的 script，在瀏覽器中通過(guò) async 的方式異步執(zhí)行（異步下載，不阻塞 HTML，按該模塊和所依賴的模塊下載完成的先后順序執(zhí)行，無(wú)視 DOM 中的加載順序），即使是行內(nèi)的 script 代碼，也遵循這一原則（而普通的行內(nèi) script 代碼則忽略 async 屬性）。
• 即使多次加載相同模塊，也只會(huì)執(zhí)行一次。

模塊內(nèi)依賴的引用

• 只能使用 import ... from '...' 的 ES6 風(fēng)格的模塊導(dǎo)入方式，或者使用 import(...).then(...) 的 ES6 動(dòng)態(tài)導(dǎo)入方式，不支持其他模塊化規(guī)范的引用方式（例如 require、define 等）。
• 導(dǎo)入的模塊只支持使用相對(duì)路徑（'/xxx', './xxx', '../xxx'）和 URL 方式（'https://xxx', 'http://xxx'）進(jìn)行引用，不支持直接使用包名開(kāi)頭的方式（'xxxx', 'xxx/xxx'）。
• 只支持引用MIME Type為 text/javascript 方式的模塊，不支持其他類型文件的加載（例如 CSS 等）。

無(wú)包構(gòu)建工具的介紹：

Vite

Vite 是 Vue 框架的作者尤雨溪最新推出的基于 Native-ESM 的 Web 構(gòu)建工具。

在開(kāi)發(fā)環(huán)境下基于 Native-ESM 處理構(gòu)建過(guò)程，只編譯不打包，在生產(chǎn)環(huán)境下則基于 Rollup 打包。

Vite對(duì)導(dǎo)入模塊的解析

對(duì) HTML 文件的預(yù)處理

啟動(dòng) Vite 時(shí)，會(huì)通過(guò) serverPluginHtml.ts 注入 /vite/client 運(yùn)行時(shí)的依賴模塊，該模塊用于處理熱更新，以及提供更新 CSS 的方法 updateStyle。

對(duì)外部依賴包的解析

• resolver.ts 負(fù)責(zé)找到對(duì)應(yīng)在 node_modules 中的真實(shí)依賴包代碼（Vite 會(huì)在啟動(dòng)服務(wù)時(shí)對(duì)項(xiàng)目 package.json 中的 dependencies 做預(yù)處理讀取并存入緩存目錄 node_modules/.vite_opt_cache 中）。
• serverPluginModuleRewrite.ts 負(fù)責(zé)把源碼中的 bare modules 加上 /@module/ 前綴。
• serverPluginModuleResolve.ts 負(fù)責(zé)解析加上前綴后的模塊。

對(duì) Vue文件的解析

對(duì) Vue 文件的解析是通過(guò) serverPluginVue.ts 處理的，分離出 Vue 代碼中的 script/template/style 代碼片段，并分別轉(zhuǎn)換為 JS 模塊，然后將 template/style 模塊的 import寫到script 模塊代碼的頭部。

對(duì) CSS 文件的解析

對(duì) CSS 文件的解析是通過(guò) serverPluginCSS.ts 處理的，解析過(guò)程主要是將 CSS 文件的內(nèi)容轉(zhuǎn)換為下面的 JS 代碼模塊，其中的 updateStyle 由注入 HTML 中的 /vite/client 模塊提供

import { updateStyle } from "/vite/client"
const css = "..."
updateStyle(""..."", css) // id, cssContent
export default css

Vite 中的其他輔助功能

• 多框架：除了在默認(rèn)的 Vue 中使用外，還支持在 React 和 Preact 項(xiàng)目中使用。
• 熱更新（HMR） ：默認(rèn)提供的 3 種框架的腳手架模板中都內(nèi)置了 HMR 功能，同時(shí)也提供了 HMR 的 API 供第三方插件或項(xiàng)目代碼使用。
• 自定義配置文件：支持使用自定義配置文件來(lái)細(xì)化構(gòu)建配置，配置項(xiàng)功能參考 config.ts。
• HTTPS 與 HTTP/2：支持使用 --https 啟動(dòng)參數(shù)來(lái)開(kāi)啟使用 HTTPS 和 HTTP/2 協(xié)議的開(kāi)發(fā)服務(wù)器。
• 服務(wù)代理：在自定義配置中支持配置代理，將部分請(qǐng)求代理到第三方服務(wù)。
• 模式與環(huán)境變量：支持通過(guò) mode 來(lái)指定構(gòu)建模式為 development 或 production。相應(yīng)模式下自動(dòng)讀取 dotenv 類型的環(huán)境變量配置文件（例如 .env.production.local）。
• 生產(chǎn)環(huán)境打包：生產(chǎn)環(huán)境使用 Rollup 進(jìn)行打包，支持傳入自定義配置，配置項(xiàng)功能參考 build/index.ts。

Vite 的使用限制

• 面向支持 ES6 的現(xiàn)代瀏覽器，在生產(chǎn)環(huán)境下，編譯目標(biāo)參數(shù) esBuildTarget 的默認(rèn)值為 es2019，最低支持版本為 es2015（因?yàn)閮?nèi)部會(huì)使用 esbuild 處理編譯壓縮，用來(lái)獲得最快的構(gòu)建速度）。
• 對(duì) Vue 框架的支持目前僅限于最新的 Vue 3 版本，不兼容更低版本。

Snowpack

• 從整體功能來(lái)說(shuō)和上述 Vite工具提供的功能大致相同。
• Snowpack 在生產(chǎn)環(huán)境下默認(rèn)使用無(wú)包構(gòu)建而非打包模式。

與 Vite 相同的功能點(diǎn)

兩者都支持各種代碼轉(zhuǎn)換加載器、熱更新、環(huán)境變量（需要安裝 dotenv 插件）、服務(wù)代理、HTTPS 與 HTTP/2 等。

與 Vite 的差異點(diǎn)

• 相同的功能，實(shí)現(xiàn)細(xì)節(jié)不同： 例如對(duì) Bare Module 的處理，除了轉(zhuǎn)換后前綴名稱不同外（Vite 使用 /@module/ 前綴，而 Snowpack 使用 /web_modules/ 前綴)
• 工具穩(wěn)定性
• 插件體系： 除了版本差異外，Snowpack 提供了較完善的插件體系，支持用戶和社區(qū)發(fā)布自定義插件。
• 打包工具：在生產(chǎn)環(huán)境下，Vite 使用 Rollup 作為打包工具，而 Snowpack 則需要引入插件來(lái)實(shí)現(xiàn)打包功能，官方支持的打包插件有 @snowpack/plugin-webpack 和 @snowpack/plugin-parcel，暫未提供 Rollup 對(duì)應(yīng)的插件。
• 特殊優(yōu)化：Vite 中內(nèi)置了對(duì) Vue 的大量構(gòu)建優(yōu)化，因此對(duì) Vue 項(xiàng)目而言，選擇 Vite 通?？梢垣@得更好的開(kāi)發(fā)體驗(yàn)。

無(wú)包構(gòu)建 VS 打包構(gòu)建

無(wú)包構(gòu)建的優(yōu)點(diǎn)

• 初次構(gòu)建啟動(dòng)快： 無(wú)包構(gòu)建流程中，模塊依賴分析與編譯都是在瀏覽器渲染頁(yè)面時(shí)異步處理的
• 按需編譯：在瀏覽器渲染時(shí)，根據(jù)入口模塊分析加載所需模塊，編譯過(guò)程按需處理，因此相比之下處理內(nèi)容更少，速度也會(huì)更快。
• 增量構(gòu)建速度快：rebuild 過(guò)程中，只需處理編譯單個(gè)模塊。

無(wú)包構(gòu)建的缺點(diǎn)

• 瀏覽器網(wǎng)絡(luò)請(qǐng)求數(shù)量劇增： 無(wú)包構(gòu)建最主要面對(duì)的問(wèn)題是，它的運(yùn)行模式?jīng)Q定了在一般項(xiàng)目里，渲染頁(yè)面所需發(fā)起的請(qǐng)求數(shù)遠(yuǎn)比打包構(gòu)建要多得多，使得打開(kāi)頁(yè)面會(huì)產(chǎn)生瀑布式的大量網(wǎng)絡(luò)請(qǐng)求，將對(duì)頁(yè)面的渲染造成延遲。這也是 Vite 在開(kāi)發(fā)環(huán)境下才使用無(wú)包構(gòu)建，在生產(chǎn)環(huán)境下則仍舊使用打包構(gòu)建的原因吧。
• 瀏覽器的兼容性：

以上就是no-bundle 構(gòu)建原理淺析的詳細(xì)內(nèi)容，更多關(guān)于no-bundle 構(gòu)建原理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論