🔧 阿川の電商水電行
本以為能簡化一切的框架，卻讓我的程式碼庫變成惡夢
內容提要：在使用 React 開發四年、構建了 20 多個生產應用之後，我決定轉向 Svelte，並且再也沒有回頭。
嚴重崩潰的瞬間
上個月，我花了六個小時調試一個「簡單」的表單元件——問題出在 useState 無法立即更新。這是 React 的老毛病，就連資深開發者都容易踩坑。
那一刻我突然意識到：我花在對抗 React 上的時間，比實際開發功能還要多。
數據不會說謊
來看一組我從 React 切換到 Svelte 後的專案對比：
打包體積：
React + Redux：847kb
Svelte：23kb
建構時間：
React：45 秒
Svelte：3 秒
程式碼行數：
React：2847 行
Svelte：892 行（實現相同功能）
打包體積減少了 97%，建構速度快了 15 倍。
開發體驗的革命
React 版本：
const [count, setCount] = useState(0);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
fetchData()
.then(data => {
setCount(data.count);
setLoading(false);
})
.catch(err => {
setError(err.message);
setLoading(false);
});
}, []);Svelte 版本：
<script>
let count = 0;
let promise = fetchData();
</script>
{#await promise}
加載中...
{:then data}
{count = data.count}
{:catch error}
{error.message}
{/await}Svelte 不僅程式碼更簡潔，而且更易讀。
React 的問題出在哪？
-
虛擬 DOM 的謊言
都說虛擬DOM能讓React更快，其實不然。它反而增加了開銷。Svelte 直接編譯為操作原生 DOM 的 JavaScript，運行時性能提升 3 倍。 -
生態圈的陷阱
React 生態龐大但碎片化。狀態管理？Redux、Zustand、Context 等幾十種選擇。樣式方案？CSS-in-JS、CSS Modules、Styled Components... 選擇太多反而無從下手。 -
無止境的學習曲線
Hooks、Context、Suspense、Concurrent Mode、Server Components... React 不斷疊加新概念。用了四年 React，我每週還在遇到新問題。
真希望早知道的事
默認高性能
// React：處處需要手動優化
const MemoizedComponent = React.memo(({ data }) => {
const expensiveValue = useMemo(() => processData(data), [data]);
return <div>{expensiveValue}</div>;
});
// Svelte：默認高效
<script>
export let data;
$: expensiveValue = processData(data);
</script>
<div>{expensiveValue}</div>內置動畫效果
<script>
import { fade, slide } from 'svelte/transition';
let visible = true;
</script>
{#if visible}
<div transition:fade>
<p transition:slide>零配置的順滑動畫</p>
</div>
{/if}在 React 中實現同樣的效果，可能需要引入 200kb 的動畫庫。
轉換現實考量
「但是生態兼容怎麼辦？」
問得好。這是我的發現：
- 元件庫：SvelteKit UI、Carbon Components Svelte
- 狀態管理：內置 Store（輕量且強大）
- 路由：SvelteKit（比 Next.js 更優秀）
- 測試：Vitest 完美兼容
- TypeScript：一等公民支持
實際效果
切換至 Svelte 後：
✅ 部署速度提升 3 倍
✅ 打包體積減少 95%
✅ 開發時間減少 40%
✅ Bug 反饋減少 60%
✅ 團隊滿意度大幅提升
一個令人不安的真相
React 正在成為 2024 年的 jQuery：對於大多數應用場景過於複雜，依靠慣性和大廠支持維持生命。
而 Svelte 只是簡潔地工作。
不需要絞盡腦汁，不需要深陷性能優化的漩渦，沒有依賴地獄。
寫出來的程式碼，就是你想要的樣子。
接下來怎麼做？
我不是說 React 一無是處。對於擁有大型 React 程式碼庫的團隊，轉換可能並不現實。
但對於新專案？每次我都選 Svelte。
開發界正在慢慢覺醒：
- GitHub 新儀表板：使用 Svelte 構建
- Apple 開發者文檔：基於 SvelteKit
- 紐約時報：正在轉向 Svelte
親自嘗試
不必聽信我的一面之詞。用週末時間嘗試用 Svelte 構建些東西：
npm create svelte@latest my-app
cd my-app
npm install
npm run dev我保證你也會經歷和我一樣的「震撼時刻」。
你怎麼看？繼續堅守 React 還是嘗試新選擇？歡迎在評論區分享你的觀點 👇
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
