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

17th鐵人賽 vue vue3 vuejs vue3 composition api

Yanya

2025-09-03 00:21:41

245 瀏覽

分享至

前言

在前面的篇章中我們快速的帶過 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

恭喜恭喜，你現在可以不用一個一個複製或是手打了~
也可以創建屬於你自己的模板。

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

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

如上圖所示，直到目前為止 Vite 的打包分為兩種。
一個是開發環境預打包，採用 Esbuild
一個是生產環境構建打包，採用 Rollup

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

據官方文件的說法—

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

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

是一個基於 Rust 重寫，
又快又能兼容 Rollup、Esbuild 功能的打包工具。

那由於本系列重點並不是打包，因此我們就點到為止。

畢竟未來當 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 倍速度差不多, 因此並不是純吹數據