建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥。
誒喲喂，SVG 怎么沒內(nèi)嵌？
最近啊，西瓜哥我用 vite 去給一個(gè)項(xiàng)目構(gòu)建（vite build）一個(gè)應(yīng)用。打包結(jié)果是一個(gè) html 和一些加了哈希的資源。
然后打包出來的文件一看，發(fā)現(xiàn)居然有好幾個(gè) 1 Kb 以下的 SVG 文件。
我搜了下源碼，這些 SVG 是這樣被使用的：
不對(duì)呀，理論上小于 4 Kb 的靜態(tài)資源，是會(huì)轉(zhuǎn)成 base64 編碼字符串，嵌入到其他資源中。
較小的資源體積小于 assetsInlineLimit 選項(xiàng)值 則會(huì)被內(nèi)聯(lián)為 base64 data URL。
build.assetsInlineLimit 默認(rèn)值為 4096 (4kb)。
我發(fā)現(xiàn)使用庫模式（打包成 index.es.js，使用該模式需要設(shè)置 build.lib 配置）時(shí)，是不會(huì)出現(xiàn) SVG 文件的。
如果你指定了 build.lib，那么 build.assetsInlineLimit 將被忽略，無論文件大小或是否為 Git LFS 占位符，資源都會(huì)被內(nèi)聯(lián)。
所以一開始我以為我的配置設(shè)置的有問題，因?yàn)閹炷Ｊ經(jīng)]問題了。
我折騰了大半天，檢查配置，查文檔，assetsInlineLimit 給你加到 999999，安裝其他版本的包，給引入的文件末尾加上 ?inline。各種嘗試，都沒用。
后來我用最新版的 vite 構(gòu)建了一個(gè)新的 Vue 項(xiàng)目。
發(fā)現(xiàn)它這個(gè)官方給的 demo 打包出來的文件 SVG 都沒做內(nèi)聯(lián)。
好家伙，我尋思 vite 本身就不支持 SVG 轉(zhuǎn) base64 編碼內(nèi)嵌。
設(shè)計(jì)如此，本就不支持 SVG 轉(zhuǎn) Base64
走，去翻翻 vite 的 issue，然后找到了一個(gè) 3 年前的 issue，編號(hào) 1204。
這個(gè) issue 標(biāo)記為 enhancement，即它是一個(gè)增強(qiáng)功能，并不是 bug。
此外可以看到有兩個(gè) PR 是要解決這個(gè) issue 的。
一個(gè) PR 被關(guān)閉了，一個(gè) PR 是打開著。我們?nèi)タ纯础?/p>
先看看被關(guān)閉的那個(gè)，PR 編號(hào)是 1716，是 vite 成員提的 PR。
他說他不贊成 SVG 轉(zhuǎn)成 Base64 嵌入到 HTML，SVG 是個(gè)文本類的特殊圖片格式，不是二進(jìn)制，沒必要再轉(zhuǎn)一層 Base64，導(dǎo)致體積變大。
因?yàn)?Base64 需要用 4 個(gè)字符表達(dá)原來文本的 3 個(gè)字節(jié)，會(huì)增大 33～36% 的體積。
即希望結(jié)果是：
而不是：
雖然不打算轉(zhuǎn) Base64，但還是可以轉(zhuǎn) utf8 格式的 Data URL 的，一樣可以實(shí)現(xiàn)內(nèi)嵌的效果，而且體積更小，于是提了這個(gè) PR。
這個(gè) PR 是有問題的，有些情況沒處理，比如轉(zhuǎn)義，去掉 svg fragments 等。
然而過了一個(gè)月，這個(gè) PR 還是沒進(jìn)展，說明 優(yōu)先級(jí)并不高。
此時(shí)一位路過的野生程序員說他來搭把手。
于是這個(gè) PR 關(guān)閉了，這位老哥創(chuàng)建了一個(gè)新的 PR。
這個(gè) PR 一直就掛在那
加油啊，路過的程序員老哥。你是我們?nèi)迦说南Ｍ ?/p>
看看 PR。
兩年前的 PR，至今仍是 Open 狀態(tài)。
哦豁，涼了。
發(fā)生甚么事了？我瞅瞅。
看下 PR 的內(nèi)容。引入了一個(gè) mini-svg-data-uri 第三方包，來做 SVG 轉(zhuǎn) DataUrl，改了一些判斷條件，因?yàn)楹推胀ㄙY源直接走轉(zhuǎn) base64 不同，SVG 是要直接用原來的文本內(nèi)容的。改了了幾個(gè)測試用例。
看著不少 review 和討論，看著應(yīng)該還行，有幾個(gè) vite 成員 approved 了。
最后時(shí)需要有人手動(dòng)測試是否處理好了 SVG Segment 的情況。此時(shí)提 PR 的老哥不見了。
SVG Segment 是 SVG 的一個(gè)比較特殊的用法，大概是這樣（來自 MDN）。
對(duì)于一個(gè) SVG，我們可以用 view 標(biāo)簽指定某種情況下特定的 viewBox 視口范圍。
然后在使用的時(shí)候通過 icon.svg#
效果：
回到 PR。
好久，后面有人幫著測試了，發(fā)現(xiàn)有問題。然后就，沒有然后了，此外還有因?yàn)殚L期沒合入出現(xiàn)的合并沖突。
湊合著用吧
啊這。
我 fork 了 vite 項(xiàng)目，把這位老哥的修改應(yīng)用到最新版本上，然后 build 了一下，并拿去構(gòu)建我的一個(gè) demo 項(xiàng)目，結(jié)果 SVG 成功變成了 Base64。
然后我運(yùn)行測試相關(guān)的命令，各種不對(duì)。
因?yàn)橛行┰瓉磙D(zhuǎn)換為正常 url 的，現(xiàn)在會(huì)轉(zhuǎn)成 base64，就匹配不上了。我還發(fā)現(xiàn) css url 的邏輯還有點(diǎn)問題，拿到了一個(gè)錯(cuò)誤的 none 值。
誒，感覺要提 PR 的話，要修正原來的測試用例，并補(bǔ)充一些新的測試用例，還要處理 css 的情況。行吧，以后再看看。
回到我一開始的需求，行，你不給我轉(zhuǎn) Base64 是吧？我通過 ?raw 直接拿到 SVG 文本內(nèi)容，給你動(dòng)態(tài)轉(zhuǎn)成 Base64。
import iconSvg from './image/someIcon.svg?raw'; // 這個(gè)會(huì)拿到 ""
const toSVGDataUrl = (str: string) => {
const base64 = btoa(str);
return `data:image/svg+xml;base64,${base64}`;
};
![]()
還行（又不是不能用）。
結(jié)尾
這次經(jīng)歷，我認(rèn)識(shí)到 一個(gè)大型的開源項(xiàng)目的維護(hù)者，對(duì)單元測試是非?？粗氐?，因?yàn)樗绊懼f萬的開發(fā)者，必須保證在絕大多數(shù)情況下能正確運(yùn)行。
突然想起之前 VSCode 我更新了最新版本，結(jié)果運(yùn)行一段時(shí)間就會(huì)報(bào)錯(cuò)需要重啟。
然后就是 vite 維護(hù)者 非常注重性能，畢竟是一個(gè)很重要的構(gòu)建工具。SVG 是可以 Base64 的，實(shí)現(xiàn)邏輯也很簡單，和其他圖形走一樣的邏輯。
但 SVG 可以直接用原本的文本數(shù)據(jù)，更小，有優(yōu)化空間。因?yàn)轶w積可以優(yōu)化，所以維護(hù)者就寧缺毋濫，寧可丟掉這個(gè)功能。
要是我，我可能就先圖省事，直接支持 Base64 了，然后有機(jī)會(huì)再優(yōu)化（通常不了了之）。
然后是優(yōu)先級(jí)，優(yōu)先級(jí)不高，維護(hù)者就是不會(huì)主動(dòng)去實(shí)現(xiàn)。
此時(shí)就需要社區(qū)的力量了，如果你很需要某個(gè)功能，就要積極提 PR，積極討論并主動(dòng)推進(jìn)，否則可能像這個(gè) PR 一樣，半途而廢。
新聞標(biāo)題：不是吧？強(qiáng)大的Vite居然不支持內(nèi)SVG轉(zhuǎn)Base64內(nèi)嵌？
轉(zhuǎn)載注明：http://www.5511xx.com/article/cocspje.html
