# 從 Vite Plugin 出發的編譯器大冒險 - Alex Liu {%hackmd @JSDC-tw/B1loEcwJZl %} ###### tags: `JSDC2025` Slido：https://app.sli.do/event/9jUifygirqgo7uTYF4WEvq > 開始做筆記 vite 2020年推出的打包工具 webpack 儲存後要喝個咖啡 等打包時間 推薦看龍哥的vite 原始碼解讀 vite 本質是一個dev server 對於瀏覽器而言 看不懂typescript 所以vite 處理了 typescript ，首先 vite 來啟動了 node的 server 找到路徑後 轉譯完 再回傳 以處理css 為例 解析模組 然後載入模組 而則會添加style 的tag 然後添加css 上去 至於vite 如何處理vue 、 react 先解析完整的路徑 解析實際路徑 然後取得原始程式碼的字串 之後使用transform 一個vite plugin ok 大致上流程就是解析路徑、Load 和transfer SVG loader (SVG component) 將SVG檔案作為vue 元件 載入 vite-svg-loader 就可以直接將svg 當元件使用了 react 的畫室叫做 svg-r 最佳化 graphQL schema 加上\0可以讓vite 不用處理 > 聊天區 --- {%hackmd @JSDC-tw/jsdc2025_sponsor %}