Vanilla JS 与框架选择 - 字节笔记本

Vanilla JS 的短板就是 UI 组件生态。实际项目中，很多人采用：后端/CLI/简单页面用 Vanilla JS，复杂前端用 React，不是非此即彼。

UI 组件库现状

按框架分类

类型	依赖框架	不依赖框架
React 专用	Ant Design, shadcn, MUI	-
Vue 专用	Element Plus, Vuetify	-
框架无关	-	DaisyUI (纯 CSS), Shoelace, Radix Primitives

大多数流行 UI 库确实绑定了框架，这是 Vanilla JS 的现实劣势。

Vanilla JS 替代方案

1. 纯 CSS 框架 (最轻量)

html

<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet">
<button class="btn btn-primary">Button</button>

优点: 无 JS 依赖，体积小，学习成本低缺点: 功能有限，无交互逻辑

2. Web Components 组件库 (框架无关)

html

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2/dist/shoelace-autoloader.js"></script>
<sl-button variant="primary">Button</sl-button>
<sl-dialog label="Dialog">Content</sl-dialog>

优点: 框架无关，原生支持，可复用缺点: 生态不如框架组件库丰富

3. 单功能库

html

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

常用库:

SortableJS - 拖拽排序
Day.js - 日期处理
Lodash - 工具函数
Chart.js - 图表

npm 包使用方式

方式 1: CDN 直接引入 (无需构建)

javascript

// 很多包都有 UMD/ESM 版本
import dayjs from 'https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js';
import lodash from 'https://cdn.jsdelivr.net/npm/lodash-es@4/lodash.js';

适用场景: 简单页面、原型开发

方式 2: 轻量构建工具

bash

# esbuild / vite 可以打包 npm 包给 Vanilla JS 用
npm install esbuild
esbuild src.js --bundle --outfile=dist.js

适用场景: 需要使用 npm 生态但不想用框架

现实选择建议

项目类型	建议	理由
内部工具、个人项目	Vanilla JS + 纯 CSS 框架	够用，开发快
需要复杂表单、表格、弹窗	React	组件生态太强
追求极致性能/体积	Vanilla JS 或 Svelte	无框架开销

Vanilla JS 的痛点

如果你需要：

复杂的 DataTable
富文本编辑器
拖拽排序
日期选择器
多步骤向导

这些用 Vanilla JS 从零写很痛苦，而 React 生态里随便找。

实际项目策略

text

项目需求 → 复杂度判断

简单项目:
├── Vanilla JS + DaisyUI
├── 后端渲染页面
├── 内部工具
└── CLI 工具

复杂项目:
├── React/Vue + 组件库
├── 复杂表单
├── 数据仪表板
└── 富交互应用

结论

不是非此即彼：

后端/CLI/简单页面 → Vanilla JS
复杂前端 → React
根据需求选择，不要教条主义