在前面的篇章中我們快速的帶過 Vite 和 SFC 檔案,
今天我們會介紹 Snippet 快速創建 SFC 模板和 Vite 底層如何打包以及 Rolldown 介紹使用。
既然都創建了專案,這邊我想提供一個我自己很常用的小技巧,
雖然可能很多人都知道了。
點擊齒輪 -> 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 的打包分為兩種。
一個是開發環境預打包,採用 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 倍速度差不多, 因此並不是純吹數據
那今天我們提到了如何透過 VSCode 的 snippets 一鍵建立 SFC,
提到了 Rolldown 這個未來將會取代 Esbuild 和 Rollup 在 Vite 中的地位
以實際的程式碼讓各位切身體會這個打包工具到底能多快,
而不是看看別人的數據就好。
為什麼我會這樣說,因為打包這件事會受到很多事情影響,
這些數據也只是在控制其他變數的情況下所得出的結論,不是絕對值。
那接下來我們就會正式進入 Vue 的基礎語法,
觀念類的東西就先到這裡,讓大家以實際練習 + 理論來快速發散收斂。
如果你喜歡這個系列或是想看我發瘋, 歡迎按下 訂閱
一起走完這三十天吧