iT邦幫忙

2025 iThome 鐵人賽

DAY 3
1
Vue.js

在 Vue 過氣前要學的三十件事系列 第 3

在 Vue 過氣前要學的第三件事 - Rolldown 上位後會對 Vite 產生什麼影響

  • 分享至 

  • xImage
  •  

前言

在前面的篇章中我們快速的帶過 Vite 和 SFC 檔案,
今天我們會介紹 Snippet 快速創建 SFC 模板和 Vite 底層如何打包以及 Rolldown 介紹使用。

Snippets

既然都創建了專案,這邊我想提供一個我自己很常用的小技巧,
雖然可能很多人都知道了。

點擊齒輪 -> Snippets -> New Global Snippets file

幫你的 snippet 取名後按 enter


這段只是例子跟講解而已,可以全部刪掉,並貼上以下這段再儲存。

{
 "Vue3 Component": {
 "prefix": "vue",
 "body": [

 "<script setup >",
 "  $2",
 "</script>",
 "",
 "<template>",
 "  $1",
 "</template>",
 "",
 "<style scoped>",
 "  $3",
 "</style>"
 ],
 "description": "快速建立 Vue 3 組件結構"
 }
}

接下來打開隨意一個 .vue 檔,輸入剛剛的你取的名稱,會出現這個提示詞。

確定是你要的 snippet 後按下 tab
https://ithelp.ithome.com.tw/upload/images/20250902/20172784Nfm3C4OW68.png
恭喜恭喜,你現在可以不用一個一個複製或是手打了~
也可以創建屬於你自己的模板。

那接下來會提到這一兩年話題性很高的 Rolldown 以及它和 Vite 的關係。

Vite 目前現在是如何打包的?

https://ithelp.ithome.com.tw/upload/images/20250902/20172784bCbRwodUaP.png
如上圖所示,直到目前為止 Vite 的打包分為兩種。
一個是開發環境預打包,採用 Esbuild
一個是生產環境構建打包,採用 Rollup

這就其實是一件蠻弔詭的事,明明都是處理 "打包" 卻要分成兩個套件去實作。

官方文件的說法—

儘管 Esbuild 更快,但 Rollup 靈活的 API 跟基礎架構,
讓 Rollup 在生產環境的打包取得更好的平衡。

尤雨溪 也在 ViteConf 2023 也提出一個解決方案: Rolldown

是一個基於 Rust 重寫,
又快又能兼容 Rollup、Esbuild 功能的打包工具。
https://ithelp.ithome.com.tw/upload/images/20250902/20172784QAQCV5IlWU.png
那由於本系列重點並不是打包,因此我們就點到為止。

畢竟未來當 Rolldown 正式上線後,各位也不用特別做什麼,它會被內置在 Vite 中
不過還是希望大家能感受這個速度差異。

因此接下來會帶到有使用 Rolldown 跟沒有使用的差異

使用

為了要快速產生一個足夠大的專案讓我們能看出打包速度差異,
底下有兩個腳本用以創建大量組建。

資料夾架構:

創建按鈕腳本:

// generateButton.js
import { existsSync, mkdirSync, writeFileSync } from "fs";
import { join, dirname } from "path";
import { fileURLToPath } from "url";

const __dirname = dirname(fileURLToPath(import.meta.url));

const componentsDir = join(__dirname, "src", "components");

if (!existsSync(componentsDir)) {
  mkdirSync(componentsDir, { recursive: true });
}

for (let i = 1; i <= 5000; i++) {
    const componentName = `Button${i}`;
    const filePath = join(componentsDir, `${componentName}.vue`);
    const content = `
        <template>
            <button class="button">${componentName}</button>
        </template>

        <script>
            export default {
              name: "${componentName}",
            };
        </script>
        <style scoped>
            .button {
              width: 100%;
              padding: 10px;
              font-size: 16px;
              text-align: center;
            }
        </style>
    `;
    writeFileSync(filePath, content.trim());
}
console.log("5000 button components generated successfully!");
$ node generateButtons.js

使用 node 命令來使用單一 JS 文件

順利的話 components 底下會出現所有按鈕元件

引入所有按鈕腳本

// generateButtonImports.js
import { writeFileSync } from "fs";

const start = 1;
const end = 5000;

// 產生 import 區塊
let importStr = "";
for (let i = start; i <= end; i++) {
  importStr += `import Button${i} from "./Button${i}.vue";\n`;
}

// 產生 template 區塊(靜態 5000 個按鈕)
let buttonsStr = "";
for (let i = start; i <= end; i++) {
  buttonsStr += `    <Button${i} class="button-item" />\n`;
}

// script 區塊
const scriptBlock = `<script setup>
import { ref } from "vue";
${importStr}
defineProps({
  msg: String,
});
const count = ref(0);
</script>
`;

// template 和 style 區塊
const templateAndStyle = `
<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <div class="button-grid">
${buttonsStr}  </div>
</template>

<style scoped>
.button-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.button-item {
  width: 100%;
}
</style>
`;

writeFileSync("HelloWorld.vue", scriptBlock + templateAndStyle);

console.log("已產生靜態 5000 個按鈕的 HelloWorld.vue");
$ node generateButtonImports.js

這邊一樣用 node 執行引入按鈕的腳本

這邊的話就要把所有元件都靜態引入, 確定不會被 *tree-shaking 掉

tree-shaking
透過靜態分析後留下有被使用到的程式碼,用來優化 bundle size。

那下一步我們就來先打包一次

$ npm run build
$ npm run build
> rolldown_test@0.0.0 build
> vite build

# 這邊是使用原生 vite
vite v7.0.5 building for production...
✓ 10016 modules transformed.
dist/index.html                     0.46 kB │ gzip:
 0.29 kB
dist/assets/index-BGUyBEOK.css    130.64 kB │ gzip:
29.68 kB
dist/assets/index-DKQsOfr3.js   1,087.98 kB │ gzip: 183.04 kB

✓ built in 13.95s // 總打包時間

再來我們安裝 rolldown-vite

$ npm i rolldown-vite

使用 Rolldown-vite 再次打包, 一樣是使用 npm run build

$ npm run build
> rolldown_test@0.0.0 build
> vite build

# 這邊可以看到是使用 rolldown-vite
rolldown-vite v6.3.21 building for production...
✓ 10016 modules transformed.
dist/index.html                     0.46 kB │ gzip:
 0.29 kB
dist/assets/index-Ddacfz70.css    130.94 kB │ gzip:
29.82 kB
dist/assets/index-C49u6Kxh.js   1,107.88 kB │ gzip: 181.18 kB

✓ built in 5.56s

確實跟 VueConf 2025 中所提到的 3~4 倍速度差不多, 因此並不是純吹數據

結語

那今天我們提到了如何透過 VSCode 的 snippets 一鍵建立  SFC,
提到了 Rolldown 這個未來將會取代 Esbuild 和 Rollup 在 Vite 中的地位
以實際的程式碼讓各位切身體會這個打包工具到底能多快,
而不是看看別人的數據就好。

為什麼我會這樣說,因為打包這件事會受到很多事情影響,
這些數據也只是在控制其他變數的情況下所得出的結論,不是絕對值。

那接下來我們就會正式進入 Vue 的基礎語法,
觀念類的東西就先到這裡,讓大家以實際練習 + 理論來快速發散收斂。

如果你喜歡這個系列或是想看我發瘋, 歡迎按下 訂閱 一起走完這三十天吧

一些小練習

  1. Snippets 可以用來做什麼?
  2. Vite 背後透過什麼工具來打包, 為什麼?
  3. 為什麼要改成 Rolldown, 優點是什麼?
    https://ithelp.ithome.com.tw/upload/images/20250903/20172784h4ooTo12KM.png

資料來源

  1. ViteConf 2023
  2. Rolldown
  3. Vite Doc

上一篇
在 Vue 過氣前要學的第二件事 - Vue 到底是什麼
下一篇
在 Vue 過氣前要學的第四件事 - 2025 了還要用 .value ?
系列文
在 Vue 過氣前要學的三十件事6
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言