Web 前端框架

Web 前端框架（Web Frontend Framework）为浏览器端应用提供组件化模型、路由、状态管理、构建工具链等一整套约定与基础设施。本文按「底层库 → 上层框架 → 构建工具 → 国内方案」的脉络，梳理目前主流的几类技术栈，便于快速建立整体认识。

框架与库的边界

理解「框架（Framework）」和「库（Library）」的区别是选型的起点。核心差异在于控制反转（Inversion of Control,IoC）:

• 库:开发者主动调用，代码控制权在自己手里。例如 jQuery、Lodash。
• 框架:框架负责调度生命周期和渲染流程，开发者在框架规定的位置（如组件、路由、配置文件）填充业务代码。

据此，React 严格意义上是一个「用于构建用户界面的 JavaScript 库」,而 Next.js、ice.js 才是在它之上封装了路由、构建、SSR/SSG 等约定的「框架」。本文沿用社区习惯，把 React、Vue 这类 UI 基础库也泛称为「框架」。

React:现代前端生态的基石

React 由 Meta（原 Facebook）团队维护，采用声明式（declarative）视图与组件化（component-based）模型，核心思想是「UI = f(state)」。

React 的几个关键概念:

• JSX:在 JavaScript 中书写类 HTML 标签的语法扩展，编译后转为 React.createElement 调用。
• 虚拟 DOM（Virtual DOM）:用 JavaScript 对象描述 UI 树，通过 diff 算法最小化真实 DOM 操作。
• Hooks:以 useState、useEffect 等函数在函数组件中复用状态与副作用逻辑。
• Fiber 架构:支持可中断、可恢复的协调（reconciliation）过程，为并发渲染（Concurrent Rendering）提供基础。

React 本身只关心视图层，路由（React Router）、状态管理（Redux、Zustand）、构建（Vite、Webpack）等需要自行搭配，因此社区衍生出大量上层框架。

Vue.js:渐进式 JavaScript 框架

Vue.js 由尤雨溪（Evan You）发起并维护，自定位为「The Progressive JavaScript Framework」——渐进式框架，即可以从一个 <script> 标签引入，也可以演进为完整的单页应用（SPA）工程。

Vue 3 的主要特性:

• 单文件组件（Single-File Components, SFC）:以 .vue 为扩展名，将 <template>、<script setup>、<style scoped> 三段组织在一个文件中。
• Composition API:通过 ref、reactive、computed 等组合式 API 组织逻辑，替代 Vue 2 的 Options API，逻辑复用更灵活。
• 编译时优化:模板经过编译器静态提升（hoist static）、补丁标记（patch flag）等优化，运行时开销小。
• 官方生态:Vue Router（路由）、Pinia（状态管理，Vue 3 推荐）、Vite(构建工具，与 Vue 同团队)。

一个最小的 Vue 3 SFC 示例:

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<style scoped>
button { font-weight: bold; }
</style>

Next.js:全栈 React 框架

Next.js 由 Vercel 团队开发，官方标语是「The React Framework for the Web」,是目前最主流的 React 上层框架。截至撰写时已迭代到 Next.js 16。

Next.js 在 React 之上补齐了产品级应用所需的几乎所有能力:

• App Router:基于文件系统的路由，目录 app/ 即路由树，支持嵌套布局（nested layouts）、加载态、错误边界。
• React Server Components（RSC）:服务端组件默认不在客户端下发额外 JavaScript，显著减小 bundle 体积。
• 多种渲染策略:Static Site Generation（SSG）、Server-Side Rendering（SSR）、Incremental Static Regeneration（ISR）可按页面粒度选择。
• Server Actions:在组件中直接调用服务端函数，无需手写 API。
• Route Handlers:在 app/api/ 下用 Web 标准的 Request/Response 编写接口。
• 内置优化:图片、字体、脚本自动优化，关注 Core Web Vitals。
• Turbopack:基于 Rust 的增量打包器，从 Webpack 迁移，在大型项目中显著提升启动与热更新速度。

新建项目只需一行:

npx create-next-app@latest

Vite:新一代构建工具

严格说 Vite 是「构建工具」而非「框架」,但它已成为新框架默认的脚手架基座，生态里常常与上述框架并列。Vite 由 VoidZero Inc. 与 Vite 贡献者维护，官方定位是「The Build Tool for the Web」。

Vite 的核心特性:

• 原生 ESM 开发服务器:源码以原生 ES Module 按需加载，启动时间几乎与项目规模无关。
• 极速 HMR（Hot Module Replacement）:基于 ESM 的热更新，无论应用多大都能在保存瞬间生效。
• 依赖预打包:用 esbuild 把 CommonJS/UMD 依赖预编译为 ESM，加速冷启动。
• 生产构建:采用 Rolldown（Rust 实现的 Rollup 兼容打包器）做 tree-shaking、压缩与代码分块，输出经过优化的静态资源。
• 插件与 SSR:兼容 Rollup 插件接口，提供一等公民的 SSR 支持，Vue、SvelteKit、Nuxt、Remix、SolidStart 等框架均构建于其上。

最小启动流程:

npm create vite@latest      # 选择模板初始化项目
npx vite                    # 启动开发服务器
npm run build               # 生产构建

关于构建工具演进（esbuild、Rollup、Rolldown、Rspack、Turbopack、Farm 等）的更深入对比，见本站《Vite 学习》一文。

ice.js:基于 React 的渐进式应用框架

ice.js 是阿里巴巴 ice-lab 团队开源的 React 应用框架，GitHub 仓库 alibaba/ice,官网 ice.work,其自我定位即原文章所引:

🚀 ice.js: The Progressive App Framework Based On React(基于 React 的渐进式应用框架)

相比 Next.js 面向全球生态，ice.js 更贴近国内中后台与多端场景。其核心特性:

• 零配置开箱即用:内置 ES6+、TypeScript、Less、Sass、CSS Modules 等支持，无需手动调 Webpack/Vite。
• 约定式路由与状态管理:基于文件系统自动生成路由，内置状态管理与请求方案。
• 混合渲染:同一项目内可按页面分别选用 SSG 或 SSR。
• 插件系统:框架能力通过插件扩展，便于团队沉淀复用方案。
• 多端支持:支持 Web、小程序（miniapp）、Weex 等多端编译，配合 icestark 可实现微前端（micro-frontend）架构。

ice.js 用 TypeScript 编写，MIT 协议，采用 React + Vite/Webpack 的组合，适合国内复杂业务下的渐进式迁移。

选型参考

不同场景下的常见取向:

几个经验性原则：优先看团队既有技能与生态;SEO 与首屏要求高时优先考虑服务端渲染方案;中后台以组件库为锚反推框架;工具链优先 Vite，除非有历史包袱。

参考

• React 官方文档
• Vue.js 官方文档(中文版:cn.vuejs.org)
• Next.js 官网 / Next.js 文档
• Vite 官网 / Vite GitHub
• ice.js GitHub(alibaba/ice) / ice.work 官网
• 阮一峰 webpack-demos(经典 Webpack 入门示例)