2026年我如何从零搭一个能打的前端项目
别一上来就npm create vite
真实项目里，脚手架是最后一步。先想清楚：项目解决什么问题，面向谁，在什么设备上跑。
我们这次做内部运营后台，二十多个页面，含数据可视化、权限管理和AI功能模块。用户量不大但交互复杂，表格多、表单多、弹窗嵌套。
技术选型：
- React 18 + TypeScript：团队最熟，生态稳。组里两个应届生连Hooks都没完全吃透，上新技术栈等于埋雷。
- Vite：开发体验好，冷启动快。
- Zustand + TanStack Query：不搞Redux那套仪式感，服务端状态和客户端状态分开管，代码量少一半。
- Ant Design 5：内部后台首选，虽然定制主题有时想骂人，但整体省时间。
- pnpm + Turborepo：后面可能要拆包，先按monorepo架子搭好。
技术选型最忌讳“我想试试新东西”。你是项目负责人，每个选择都要能对团队负责。真想玩新东西，下班自己玩。
工程化配置：把无聊的事交给工具
ESLint、Prettier、Husky、lint-staged、commitlint……这次我让AI生成整套配置。把关键约束描述清楚（React 18 + TS，pnpm，strict模式，自动排序import），让它输出完整配置文件。结果基本能用，但有几个坑：
- ESLint 9的flat config跟老版本差别大，AI有时会串味，生成配置直接报错。解决办法：让它先确认
eslint和typescript-eslint的具体版本号再生成。 - Husky在pnpm环境下初始化有时卡住，需手动跑
pnpm exec husky init，AI给的命令少了exec。
以前要花大半天搞的配置，现在半小时搞定。剩下的时间写README.md，把环境要求、启动命令、目录结构、分支规范写清楚。这一步别省，新同事入职能少问八十个问题。
写代码环节：AI到底能帮多少？
有个认知要纠正：AI帮你写的是“代码片段”，不是“软件设计”。
比如做数据大屏，有实时刷新图表。如果让AI直接生成，它大概率把所有逻辑堆在useEffect里，数据轮询、图表更新、内存管理全混在一起。能跑，但经不起需求变更。
我的做法：先自己把组件结构设计好——数据层用TanStack Query的refetchInterval做轮询，图表组件用React.memo包一下防止不必要重渲染，数据转换逻辑抽成纯函数方便测试。然后在每个小模块里让AI补全实现细节。这样review时心里有底，出问题也知道去哪找。
const { data } = useQuery({
queryKey: ['dashboard-stats'],
queryFn: fetchStats,
refetchInterval: 5000,
});
const Chart = React.memo(({ data }: { data: Stats }) => {
return <LineChart data={transformStats(data)} />;
});
还有个小事：AI给了一段代码，用了Array.prototype.toSorted()——ES2023新方法，返回新数组不改变原数组，比sort()更符合React不可变数据理念。AI能帮你接触新语言特性，前提是你保持好奇心去验证，而不是直接复制粘贴。
用Google ADK搭了个内部工具
Google ADK（Agent Development Kit）是我最近在啃的框架。组里维护的项目多了，新同学入职要花大量时间看代码。我花两个周末搭了个基于RAG的代码检索Agent：前端是React聊天窗口，后端是ADK + 向量数据库，用Tree-sitter解析AST，把函数、类、接口拆出来做嵌入。
效果能用但没到惊艳。新人问“登录状态怎么判断的”，它能找到相关代码文件并给出解释，准确率约七成。剩下三成是“找到文件但理解错业务含义”的情况。方向是对的，等模型再进化一版，价值会很大。
建议先看ADK官方Quickstart，不要一上来搞复杂多Agent编排。先把单Agent跑通，再加工具，再加记忆。我一开始太贪心想一步到位，调试两天发现是工具描述写得太模糊，模型不知道调用哪个工具。
性能优化：别等上线了才想起来
开发到一半，我用Chrome DevTools的Performance面板，模拟4倍CPU降速，发现几个页面卡得明显。
最大问题不是代码烂，而是Ant Design的Table组件在数据量大时渲染太慢。我们的表格三十多列，两千行左右，每次筛选都卡。解决方案：
- 开启
virtual虚拟滚动，只渲染可视区域的行 - 不常用的列收进“更多”下拉，减少初始渲染列数
- 筛选条件变化时用
useDeferredValue做延迟响应，避免输入时频繁触发渲染
const deferredFilter = useDeferredValue(filter);
<Table
virtual
columns={visibleColumns}
dataSource={filteredData}
scroll={{ y: 600 }}
/>
调试技巧：Performance面板里重点关注“Rendering”和“Painting”时间占比。Rendering时间特别长，大概率是组件重渲染太频繁，去看React DevTools的Highlight Updates功能，能直观看到哪些组件在“疯狂闪烁”。
另外，用vite-bundle-visualizer分析打包体积，发现整个moment.js被打进去了，光这一个库就占700多KB。换成dayjs后体积降了80%。这种问题不分析根本发现不了，因为代码里可能就只用了moment格式化一个日期。
写到最后
项目从搭架子到基本成型，大概三周。最大的感受：现代化前端项目的门槛不在代码本身，而在于工程化的完整度和团队协作效率。脚手架谁都会跑，但能不能把ESLint规则配好、把CI流水线跑通、把文档写清楚、把性能问题扼杀在开发阶段，这才是区分“能用”和“好项目”的关键。
AI工具确实在改变前端开发方式。我用AI生成配置、补全代码、辅助调试，甚至用ADK搭了内部工具。但AI给的是加速度，方向还是得自己把握。就像开车，辅助驾驶再强，方向盘还是得握在自己手里。
面试如果被问“你如何从零构建一个前端项目”，我比以前更有底气。不是因为用了什么炫酷技术，而是因为我知道每一个决策背后的原因，以及踩过的每一个坑长什么样。
评论 0