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

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

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

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

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

這種通過瀏覽器原生的模塊進(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 引用注意點：

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

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

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

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

Vite

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

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

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

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

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

對外部依賴包的解析

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

對 Vue文件的解析

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

對 CSS 文件的解析

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

Vite 的使用限制

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

Snowpack

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

與 Vite 相同的功能點

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

與 Vite 的差異點

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

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

無包構(gòu)建的優(yōu)點

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

無包構(gòu)建的缺點

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

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

最新評論