前端圈的过度设计正在毁掉你

最近看到个事儿,挺唏嘘的。

让几个 8 年经验的资深前端手写个原生 JS 弹窗,结果你猜怎么着?
手抖。

写不出来。

不是他们菜,是肌肉记忆被篡改了。

脑子里全是 npm install,全是 import Modal from 'antd',全是那些比裹脚布还长的 Redux 样板代码。

一旦拔掉网线,删掉 node_modules,这一身武功当场废了一半。

这哪怕不是全部,也绝对是咱这行现在的通病。


数据的残酷真相与熵增命运

我看过 HTTP Archive 的一个数据,特别吓人:过去 10 年,移动端页面的 JS 体积暴涨了 328%。

这意味着啥?

意味着你刚买的 iPhone 16 Pro,打开个网页还是会发烫。

意味着首屏加载慢得像蜗牛。

更逗的是,这种复杂度根本不是业务带来的。
是软件熵增及其背后的那点小心思。

大家都知道,代码行数每增加 10%,缺陷率就指数级上升。因为人脑的认知带宽就那么点儿,层级一多,神仙也晕。

所以,我们现在是在用指数级的代码,去解决线性的业务问题。

这买卖,亏大了。


所谓"价值",往往是被制造出来的困难

说句得罪人的大实话。

当我们在那捣鼓 Next.js、GraphQL、Micro-Frontends 这些高大上的词儿时,心里真的全是为了业务好?

拉倒吧。

隐隐约约的,谁心里还没点小九九:

"这架构整上去,年底 PPT 好看啊。"

"这流程弄复杂点,显得技术含量高,跳槽能多要 50% 薪水。"

这就是传说中的 RDD (Resume Driven Development,简历驱动开发)。

也不全怪兄弟们,KPI 就在那摆着。
主管只看你"引入了什么新技术",不看你"省了多少服务器成本"。

这种考核机制下,谁简单谁吃亏。

为了证明自己牛 X,我们硬是把简单的逻辑搞成了九曲十八弯。

你看这种代码,熟不熟悉:

typescript 复制代码
// 🔴 RDD 风格:仅仅是为了切换一个开关
// 你需要创建 action.ts, reducer.ts, types.ts, store.ts...
// 还要写一堆 interface...
dispatch({ type: 'TOGGLE_MODAL', payload: { id: 'promo', visible: true } });

// 🟢 正常人风格:
const [isOpen, setIsOpen] = useState(false);

这就是在用公司的钱,给自己镀金。

甚至可以说,这就是职业失职。


800MB 的 Hello World

7 年前,写网页多简单啊。

建个 .html,写点标签,双击打开,齐活。

html 复制代码
<!-- 2018: 简单纯粹 -->
<div id="app">Hello</div>
<script>
  document.getElementById('app').innerText = 'World';
</script>

现在呢?

好家伙。

配环境、填 tsconfig 的坑、修 eslint 的红线、等 npm install 下载半个互联网。

等你终于能写第一行代码了,灵感早凉透了。

看看咱那 node_modules,有时候真像个垃圾场。

为了用个 isNumber 引入整个 lodash。

为了画个圆角按钮,引入 2MB 的 UI 库。

这就好比下楼买包烟,你非得穿一套防爆服。

路人看你觉得挺专业,其实心里在想:这人是不是傻。


工具没错,错的是场景

我不是说 Next.js 不好。

你要是做 Amazon 那种级别的电商,要极致 SEO,那它是神器。

你要是有 1000 个前端维护一个后台,那微前端也是刚需。

你要是做企业级网关,Axios 的拦截器也是必须的。

但问题是,你团队几个人?
你日活几个?

就三五个人,服务公司内部几十个运营,你非要整套核弹发射系统?
瑞士军刀能解决的事,别上重武器。

关于封装这事儿,我也想吐槽两句。

封装是为了隐藏复杂度,不是为了隐藏逻辑。

现在很多项目,过度封装到了"不可理喻"的程度:

javascript 复制代码
// 🔴 过度封装:
// 所有的请求必须走这个黑盒,美其名曰"统一管理"
// 结果想加个 Header 都得改源码
import request from '@/utils/request'; 

// 🟢 适度抽象:
// 简单点,说话的方式简单点
const simpleFetch = (url, opts) => fetch(url, { ...defaultOpts, ...opts });

炸蚊子用核弹。

蚊子没死,先把自己炸飞了。💥


撕掉伪装,回归本质

别卷那些虚头巴脑的工具了。

AI 时代,写这种模板代码 Copilot 比你快一百倍。

真正的护城河是啥?

是你一眼能看透业务本质,然后选个最"抠门"、最"省事"的方案把事儿平了的能力。

是你敢在所有人都喊着上 Redux 的时候,淡定地说一句:"这就一个页面,Context 够了。"

是你敢在大家都推崇 SSR 的时候,说:"静态托管就行,省钱。"

我们得稍微停一停了。

重新审视下代码库,里面有多少是为了技术而技术?

是不是忘了其实软件工程就一句话:Keep It Simple, Stupid (KISS)。

技术是螺旋上升的。

繁复之后,必是极简。

甚至不需要知道是哪一年。
只需要知道:技术是用来解决问题的,不是拿来炫技的。


最后想问大伙一句:

你的团队里有没有那种"为了用新技术而用新技术"的神操作?

或者,你有没有过那种"用最笨的办法搞定最难的问题"的爽快经历?
评论区聊聊,让大家避避坑,也打打气。

相关推荐
鬼手点金6 小时前
nanoGPT/nanochat 能做出 DeepSeek/Qwen 这样的大模型吗?
服务器·前端·javascript·bug·openclaw
蛋蛋的就会顺顺的7 小时前
hot100 p0——栈,贪心算法,动态规划
java·前端·javascript·算法·leetcode·力扣
程序员Sunday7 小时前
TypeScript 的 any、unknown、never 有什么区别?
前端·面试·typescript
朱涛的自习室7 小时前
70 美金的 Beyond Compare,我让 Gemini 4 和 DeepSeek 造个开源免费版(Day 2)
android·前端·人工智能
码艺-Alimjan8 小时前
Tauri 源码备份 · 打包 & 解压 总结,源码收集之路
前端·javascript·vue.js
小马不起床8 小时前
零基础玩转 FastAPI_11:前端后台管理页面
前端·状态模式·fastapi
子非鱼a9 小时前
【文件上传】一个普普通通的edu16
前端
美狐美颜SDK开放平台9 小时前
直播APP如何实现美白滤镜功能?视频美颜SDK技术开发方案详解
前端·数据库·人工智能·音视频·美颜sdk·直播美颜sdk·视频美颜sdk
pride.li10 小时前
第03章 Python 教程-基础语法:注释与变量
服务器·前端·后端·python·算法·计算机视觉
屏什么录10 小时前
电脑如何录屏幕视频和声音?从工具到代码,7 种方案帮你彻底搞定
前端·音视频开发