iT邦幫忙

鐵人檔案

2024 iThome 鐵人賽
回列表
Modern Web

Rust 的戰國時代:探索網頁前端工具的前世今生 系列

本系列期待能由淺入深剖析各種 bundler、build tool 如 Webpack、Vite (Rollup/Rolldown)、esbuild、Rspack、Turbopack 等工具的特性與優缺點,並通過實際弄髒手做實驗的方式來理解它們的運作原理與實戰技巧

鐵人鍊成 | 共 30 篇文章 | 23 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11:用實驗來理解 Vite 的 dependency pre-bundling 是什麼 (2)

(Photo by Jr Korpa) 此為 Vite dependency pre-bundling 的下集,如果還沒看過上集可以點這裡 實驗 3. 載...

2024-09-25 ‧ 由 codefarmer 分享
DAY 12

Day 12:來試著追一下 Vite 原始碼 (1) - 從 npm run dev 到 createServer

(Photo by Jr Korpa) 前言 昨天實際體驗到了為什麼 Vite 在啟 dev server 時需要做 pre-bundling 的原因,關於怎...

2024-09-26 ‧ 由 codefarmer 分享
DAY 13

Day 13:來試著追一下 Vite 原始碼 (2) - Chokidar、pre-bundling 初探

前言 昨天追到 createServer 中的 Chokidar 這段,今天來繼續往下看,看能學到什麼新東西! Vite 怎麼做到監聽檔案異動變化 在 cre...

2024-09-27 ‧ 由 codefarmer 分享
DAY 14

Day 14:來試著追一下 Vite 原始碼 (3) - pre-bundling 怎麼做套件分析

前言 昨天追到 pre-bundling 的入口 createDepsOptimizer 裡的 init 有三個關鍵函式,今天繼續來往下追,在開始前先複習一下...

2024-09-28 ‧ 由 codefarmer 分享
DAY 15

Day 15:來做個實驗 - 壓測 Vite 的效能瓶頸

前言 看了幾天的 pre-bundling 原始碼,在進到最後打包階段程式碼前,我想先實驗一下前幾天研究時突然好奇的一個問題:「如果一個拿 Vite 當 bu...

2024-09-29 ‧ 由 codefarmer 分享
DAY 16

Day 16:來試著追一下 Vite 原始碼 (4) - pre-bundling 最終章

前言 先補充一個昨天的實驗的結果,後來重複測了幾遍後,發現影響冷啟動時間可能跟有沒有整個刪除 node_modules 有關。當有完整刪除後,就能穩定在第一次...

2024-09-30 ‧ 由 codefarmer 分享
DAY 17

Day 17:esbuild 是什麼?code splitting 是什麼?來做個實驗玩玩看

前言 昨天在 Vite 原始碼分析的最後看到了 esbuild 的設定們,今天這篇就利用這個機會來了解一下 esbuild 並實際動手玩玩看這個工具。 esb...

2024-10-01 ‧ 由 codefarmer 分享
DAY 18

Day 18:Vite 系列總整理

前言 這整個系列文轉眼間也要進入下半場,在 Day 9 到現在的 Day 18 不小心用了有一些多的篇幅在研究 Vite,其實原本還有 HMR、Module...

2024-10-02 ‧ 由 codefarmer 分享
DAY 19

Day 19:網頁開發者該怎麼學 Rust?來試試越級打怪

文章已同步發表於個人部落格,也可以前往觀賞好讀版。 前言 這系列命名為探索網頁前端工具的前世今生,在歷經前面的「JS 模組化歷史」、「Webpack 誕生」...

2024-10-03 ‧ 由 codefarmer 分享
DAY 20

Day 20:來實驗看看 Next.js、Remix 專案遷移到 Rspack 可行嗎?

文章已同步發表於個人部落格,也可以前往觀賞好讀版。 前言 剛好前陣子有位讀者詢問「有在 Next.js 中將 bundler 成功替換成 Rspack,但不...

2024-10-04 ‧ 由 codefarmer 分享