从零开始构建一个现代化前端项目：一个曾经抗拒AI的码农的真香之路
去年双11前夜，我正瘫在成都某共享办公空间的电竞椅上，盯着 VSCode 里密密麻麻的 webpack 配置，心里默念：“这届产品经理是不是又在拿我的职业生涯开玩笑？”
事情是这样的：公司临时要推一个新运营活动页面，要求三天上线，支持 SSR、PWA、按需加载、暗黑模式，还要兼容 IE11（对，你没看错）。而我手头的旧项目还是 Vue 2 + webpack 4 的“古董”，连 package.json 里的依赖都快变成考古文物了。
作为一个曾经坚定认为“AI 写代码就是糊弄鬼”的老派程序员，我一度觉得这种需求根本就是反人类。但现实很骨感——简历上写着“精通现代前端架构”，结果连 Vite 都没跑过，跳槽面试被问到微前端直接哑火。那一刻，我意识到：代码人生不能只靠情怀续命，得跟上时代节奏。
于是，我咬咬牙，决定从零搭一套真正“现代化”的前端项目。不为别的，就为了下次 HR 问“你做过什么技术基建”时，我能挺直腰板说：“我从零搭过。”
别再用 create-react-app 交差了
说实话，刚接触 Vite 的时候我是抗拒的。总觉得它太“轻”，像泡面一样缺乏营养。但当我用它初始化一个新项目，300ms 内启动 dev server 的那一刻，我真的愣住了——这速度，比我泡茶还快。
npm create vite@latest my-modern-app -- --template react-ts
几行命令下去，一个带 TypeScript、React 18、ESLint、Prettier 的骨架就出来了。对比以前手动配 webpack 的痛苦，简直是从石器时代穿越到了赛博朋克。
不过，光有骨架不够。真正的现代化项目，得考虑产品落地的全链路：开发体验、构建性能、线上监控、SEO、甚至运营同学能不能自己改文案。
架构设计：不只是写组件
我在成都这边工作，节奏舒服，但不代表可以躺平。我们团队有个不成文的规定：任何新项目必须通过“三问测试”：
- 运营同学能不能在不打扰开发的情况下改首页 banner？
- 测试能不能一键部署 staging 环境？
- 用户首屏加载超过 2 秒，算谁的？
所以，这次我从第一天就引入了几个关键能力：
1. 动态配置中心（给运营留活路）
运营最烦找开发改文案。于是我在 public/config.json 里放了个动态配置：
{
"homepage": {
"bannerText": "双11狂欢，全场5折！",
"countdownEnd": "2023-11-11T23:59:59+08:00"
}
}
前端启动时 fetch 这个文件，无需重新构建就能更新内容。虽然简单，但运营小姐姐再也不用在群里 @ 我三次了。
2. 按环境自动切换 API 基地址
// src/utils/api.ts
const BASE_URL = import.meta.env.PROD
? 'https://api.product.com'
: 'https://staging-api.product.com';
配合 Vite 的 .env 文件，本地开发自动走测试接口，打包时自动切生产。运维再也不用半夜打电话问我“为什么线上调的是测试接口”。
3. 路由级代码分割 + 预加载
用户不会一上来就点“个人中心”，那干嘛把整个后台代码都塞给他？
const ProfilePage = lazy(() => import('./pages/Profile'));
<Route
path="/profile"
element={
<Suspense fallback={<Spinner />}>
<ProfilePage />
</Suspense>
}
/>
配合 <link rel="prefetch">，在首页 hover 导航栏时就偷偷加载后续页面。实测首屏 JS 体积从 1.2MB 降到 380KB，Lighthouse 分数从 52 直接飙到 89。
性能优化：别让用户体验为你的懒惰买单
说到性能，我就想起上周五晚上加班的惨剧：测试反馈 iOS Safari 上页面白屏 5 秒。查了半天，发现是用了 Intl.RelativeTimeFormat 这种新 API，Safari 14 以下直接报错。
教训深刻：现代化 ≠ 放弃兼容性。
于是我做了几件事：
- 用
core-js+regenerator-runtime补全 polyfill，但只针对低版本浏览器动态加载 - 图片全部换成
<picture>+ WebP 格式，fallback 到 JPEG - 关键 CSS 内联，非关键样式异步加载
- 所有第三方脚本（比如埋点、客服）全部 lazy load
还顺手加了个 performance.measure() 监控首屏渲染时间，数据上报到内部监控平台。现在产品开会第一句不再是“我觉得慢”，而是“数据显示 LCP 是 1.8s，目标 1.2s”。
工具链：我的 VSCode 插件全家桶
作为插件狂魔，我的 VSCode 装了快 50 个插件。但这次我精简了，只保留核心几款：
| 插件 | 用途 | 真香指数 |
|---|---|---|
| Prettier | 代码格式化 | ⭐⭐⭐⭐⭐ |
| ESLint | 实时 lint | ⭐⭐⭐⭐ |
| GitLens | 查看代码是谁写的（方便甩锅） | ⭐⭐⭐⭐ |
| REST Client | 不用开 Postman | ⭐⭐⭐ |
| Error Lens | 把错误直接显示在代码行上 | ⭐⭐⭐⭐⭐ |
特别推荐 Error Lens —— 以前 TS 报错要拉到 terminal 看半天，现在直接在代码行下方高亮显示，省下我每天至少 10 分钟的生命。
简历亮点怎么写？
别笑，这很重要。很多程序员技术不错，但简历写得像流水账。这次项目结束后，我这样总结：
主导从 0 到 1 搭建现代化前端架构，基于 Vite + React 18 + TypeScript，实现：
- 首屏加载时间优化 68%，Lighthouse 性能分 ≥85
- 支持动态配置，运营自助修改率达 90%
- 完整 CI/CD 流程，支持自动部署 staging/production
- 兼容 Chrome/Firefox/Safari 及 iOS/Android 主流机型
你看，产品效果、运营效率、技术指标全都有了。面试官一听就知道你不是只会写 useState 的 CRUD boy。
最后一点真心话
曾经我也觉得“用 AI 生成代码”是偷懒，直到我发现 Copilot 能帮我快速生成符合团队规范的 ESLint 配置，或者自动生成测试用例的 mock 数据。现在我不再抵触，而是把它当做一个高效的 pair programmer —— 它负责搬砖，我负责 architecture 和 code review。
代码人生的本质，不是死磕每一行代码，而是用更聪明的方式交付更高价值的产品。工具在变，但工程师的核心能力永远是：理解问题、权衡取舍、持续交付。
所以，别纠结要不要用新工具。如果你还在手动配 webpack，或者简历上三年都是“Vue 项目开发”，也许该像我一样，从零搭一次真正现代化的前端项目。
毕竟，在成都这座慢城里，我们码农也得偶尔快起来——为了更好的生活，也为了下一次跳槽时，能笑着说出那句：“这个，我熟。”
评论 0