跳槽前夜，我重新梳理了前端工程化全流程
上周五晚上十点半，深圳的夏天闷得像蒸笼，我盯着 MacBook Pro 上那堆红得发紫的 Git 提交记录，突然意识到：再不系统整理下我们这套前端工程化流程，跳槽面试的时候怕是要被问懵。
坐标深圳南山，我在一家腾讯系背景的中型公司做前端两年多了。平时主力开发全靠 Mac，Windows 只用来测兼容性——说白了就是“装个 IE11 看看页面是不是直接裂开”。最近在纠结要不要跳槽，一方面觉得技术栈有点固化，另一方面又担心新东家工程体系更混乱。于是趁着项目迭代间隙，把我们从开发到部署的整条链路捋了一遍，顺便写点东西，权当面试复盘。
为啥工程化这玩意儿总被产品经理忽略？
去年双11前，我们接了个“区块链+电商”的噱头项目（别笑，真有）。后端用 Spring Boot 搞了个轻量级联盟链接口，前端要展示交易动画、实时数据流和复杂的交互反馈——对，就是那种用户转账时金币哗啦啦飞的动效。需求评审会上，产品拍胸脯说：“就两周，MVP 先上线！”
结果呢？本地跑得好好的 React 应用，一上测试环境，动画卡成 PPT，打包体积飙到 4MB，CI/CD 流水线还老是超时。运维大哥直接在群里@我：“你这前端包比后端 jar 还大，合理吗？”
那一刻我真想砸电脑。
但冷静下来一想，问题不在代码本身，而在于工程化没闭环：开发爽了，构建慢了；本地快了，线上崩了。于是痛定思痛，决定从工具链到部署，全部标准化。
工具链：不是越新越好，而是越稳越香
我们团队早期用 Create React App（CRA），简单粗暴。但随着项目复杂度上升，CRA 的黑盒配置成了瓶颈。比如想自定义 Webpack 的 SplitChunks 策略优化首屏加载？改 eject？那等于自断退路。
后来切换到 Vite + TypeScript + ESLint + Prettier 的组合，体验直接起飞：
- Vite 的 HMR 冷启动 < 300ms，改个动画参数秒生效；
- ESLint + Prettier 统一代码风格，PR 里再也不用争论“缩进用空格还是 Tab”这种哲学问题；
- TypeScript 强类型约束，配合 React Hook，连产品经理临时改字段名都不怕（虽然他还是会半夜钉钉轰炸）。
关键配置片段如下（.eslintrc.js）：
module.exports = {
extends: [
'react-app',
'plugin:@typescript-eslint/recommended',
'prettier' // 必须放最后，覆盖其他规则
],
rules: {
'@typescript-eslint/no-explicit-any': 'off', // 别杠，legacy 代码太多
'react-hooks/exhaustive-deps': 'warn' // 实在不行就 warn，别卡死
}
};
小技巧：在 VS Code 里装
ESLint和Prettier插件，保存自动格式化，团队协作效率翻倍。
构建优化：让 4MB 变成 800KB
回到那个“区块链动画”项目。分析打包体积发现，three.js 和 lottie-web 吃掉了大半江山。怎么办？
1. 动态导入 + 懒加载
const TransactionAnimation = lazy(() =>
import('./TransactionAnimation').then(module => ({
default: module.TransactionAnimation
}))
);
// 在需要展示的地方
<Suspense fallback={<Spinner />}>
<TransactionAnimation />
</Suspense>
2. 资源压缩与 Tree Shaking
确保 Webpack/Vite 开启生产模式压缩，并移除未使用代码。特别注意：第三方库是否支持 ES Module？像 lodash 这种，必须按需引入：
// ❌ 别这么干
import _ from 'lodash';
// ✅ 正确姿势
import debounce from 'lodash/debounce';
3. CDN 托管公共依赖
把 React、ReactDOM 等基础库抽出来走 CDN，通过 html-webpack-plugin 注入：
<!-- index.html -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
配合 externals 配置，主包体积立减 150KB。
最终效果：
| 阶段 | 包体积 | 首屏加载（4G） |
|---|---|---|
| 初始版本 | 4.2 MB | 5.8s |
| 优化后 | 820 KB | 1.3s |
用户不再吐槽“转圈转到怀疑人生”，产品也终于敢在周报里写“体验升级”了。
部署流程：告别手动 FTP 上传
以前上线靠 Jenkins 脚本 + 运维手动触发，出问题就甩锅：“前端没打 tag！”、“Nginx 配置错了！”。
现在我们搞了一套 GitLab CI + Docker + Nginx 自动化流水线：
git push到main分支；- CI 自动运行 lint、test、build；
- 构建 Docker 镜像并推送到私有仓库；
- 触发 Kubernetes（或简单点，用 Docker Compose）滚动更新。
.gitlab-ci.yml 关键片段：
stages:
- build
- deploy
build_frontend:
stage: build
script:
- npm ci
- npm run build
- docker build -t my-frontend:$CI_COMMIT_SHORT_SHA .
- docker push my-registry/my-frontend:$CI_COMMIT_SHORT_SHA
deploy_staging:
stage: deploy
script:
- ssh deploy@staging-server "docker pull my-registry/my-frontend:$CI_COMMIT_SHORT_SHA && docker-compose up -d"
only:
- main
好处？上线不再提心吊胆。上周三凌晨修复一个紧急 bug，从提交到全量发布，只用了 7 分钟。测试同学甚至没来得及发“已验证”消息，线上就已经好了。
前端和 Spring Boot 怎么愉快合作？
虽然我是前端，但不得不夸一句：后端用 Spring Boot 真的省心。RESTful API 文档用 Swagger 自动生成，跨域问题一行 @CrossOrigin 解决（当然生产环境会配 Nginx）。
更妙的是，前后端可以共享一套 Type 定义！我们用 openapi-generator 根据 Swagger JSON 自动生成 TS 接口：
npx openapi-generator-cli generate \
-i http://backend/swagger/v3/api-docs \
-g typescript-axios \
-o src/api/generated
从此告别手写 interface，字段变更自动同步。前端调用时还能享受完整的类型提示：
const { data } = await api.getTransactionList({ userId });
// data 类型自动推导，不怕拼错字段
区块链？别慌，前端只管展示
说到区块链，其实对我们前端来说，本质就是个带复杂状态的数据源。不管是 Ethereum、Hyperledger 还是私有链，前端只需要：
- 通过 WebSocket 或轮询监听链上事件；
- 用 React 状态管理（我们用 Zustand）驱动 UI 更新；
- 动画部分交给 CSS 或 Canvas，别指望 Web3.js 帮你做动效。
举个例子，监听交易确认：
useEffect(() => {
const ws = new WebSocket('wss://blockchain-api/tx');
ws.onmessage = (event) => {
const tx = JSON.parse(event.data);
setConfirmedTx(tx); // Zustand action
triggerAnimation(); // 触发动画
};
return () => ws.close();
}, []);
所以别被“区块链”吓到，前端的核心能力始终是：把数据变成用户能理解的交互。
写在跳槽前
折腾完这一套，我反而不那么焦虑了。工程化不是炫技，而是让团队在高压下依然能稳定交付。无论是留在当前公司推进 DevOps，还是去新东家从零搭建体系，这些经验都够我吹一阵子了。
当然，如果你也在深圳，正考虑跳槽，不妨聊聊？说不定下一家就是你的 Dream Company。
最后送大家一句真理：前端工程化的终点，不是完美的配置文件，而是让每个成员都能专注创造，而不是疲于救火。
（完）
注：文中所有技术方案均已在生产环境验证，无虚构。动画卡顿问题已解决，产品经理已请我喝奶茶。
评论 0