前端工程化：别再手动打包上传简历了！
上周五晚上十一点半，我正窝在沙发上刷 GitHub Trending，突然手机“叮”一声——产品 PM 发来消息：“兄弟，简历页面明天上线，能搞定吗？老板说要赶在春招前用上。”
我一口老血差点喷出来。这破项目还是个 Spring Boot 后端搭的架子，前端代码散落在 static/ 目录里，连个 package.json 都没有。上次部署？靠 FTP 上传压缩包，运维小哥差点把我拉黑。
作为一个 DBA 出身、后来转后端、但对数据库有执念（顺带也看不惯混乱的前端）的开发者，我实在忍不了了。前端工程化不是可选项，是生存必需品。尤其当你发现线上用户因为 JS 加载慢三秒就关掉页面时——那感觉比主从延迟还扎心。
一切始于一个烂摊子
这个“简历系统”项目，表面光鲜，实则一地鸡毛：
- HTML、CSS、JS 全部裸奔，没模块化
- 没构建工具，改一行 CSS 要手动刷新三个浏览器
- 资源没压缩，首屏加载 4.2MB（是的，你没看错）
- 部署靠人工拷贝，环境差异导致本地跑得好好的，线上白屏
更离谱的是，团队里居然有人说：“前端不就是写点页面嘛，搞那么复杂干嘛？” —— 这话要是让 Vite 的作者听到，怕是要连夜 fork 个项目嘲讽我们。
我心想：行，既然你们不动，那我这个远程办公、在家撸代码的“边缘人”就自己动手吧。反正我家猫都看不下去我天天加班了。
工具链：从零搭建，拒绝“玩具级”配置
第一步：选构建工具。Webpack？太重。Parcel？不够灵活。最后我选了 Vite —— 快得离谱，HMR 热更新秒级响应，开发体验直接拉满。关键是，它对 TypeScript、Vue/React 原生支持，省去一堆 loader 配置。
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'axios'],
ui: ['element-plus']
}
}
},
sourcemap: true,
minify: 'terser'
},
server: {
port: 3000,
open: true
}
})
注意那个 manualChunks —— 把第三方库拆出来，利用浏览器缓存，用户下次访问快如闪电。这招我在去年双11压测时学来的，当时首页加载从 5s 降到 1.2s，PM 请我喝了杯瑞幸（虽然只有中杯）。
接着是 代码规范。ESLint + Prettier + Husky，提交前自动格式化+检查。别笑，真有人把 console.log('debug') 提到生产环境，结果日志文件爆了磁盘，DBA 同事半夜打电话骂我：“你前端是不是想让我删库跑路？”
部署流程：自动化才是成年人的玩具
最开始，我手写了一个 deploy.sh 脚本：
npm run build
scp -r dist/* user@prod:/var/www/resume
ssh user@prod "systemctl reload nginx"
看起来挺酷？直到某次 IP 变了，脚本报错，我人在三亚度假，被迫开热点修 bug。那一刻我悟了：手动部署是技术债的温床。
于是转向 GitHub Actions。好处太多了：
- 代码推到
main分支自动构建+部署 - 每次部署生成 release tag，回滚只需点一下
- 测试、构建、部署流水线清晰可见，再也不用求运维大哥
# .github/workflows/deploy.yml
name: Deploy Resume Site
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install & Build
run: |
npm ci
npm run build
- name: Deploy to Server
uses: appleboy/scp-action@v0.1.7
with:
host: ${{ secrets.HOST }}
username: ${{ secrets.USERNAME }}
key: ${{ secrets.SSH_KEY }}
source: "dist/*"
target: "/var/www/resume"
- name: Reload Nginx
uses: appleboy/ssh-action@v0.1.9
with:
host: ${{ secrets.HOST }}
username: ${{ secrets.USERNAME }}
key: ${{ secrets.SSH_KEY }}
script: sudo systemctl reload nginx
现在，我改完代码，喝杯咖啡的功夫，新版本就上线了。PM 再也不敢半夜发消息了——因为 CI/CD 流水线比他还急。
性能与体验：前端不只是“画页面”
作为曾经天天和 SQL 执行计划打交道的人，我对“慢”极度敏感。所以工程化不能只解决开发效率，用户体验必须跟上。
关键优化点：
| 优化项 | 之前 | 之后 | 效果 |
|---|---|---|---|
| 首屏 JS 体积 | 2.1MB | 380KB | 加载时间 ↓65% |
| 资源压缩 | 无 | Brotli + Gzip | 带宽节省 40% |
| 图片懒加载 | ❌ | ✅ (Intersection Observer) | 首屏渲染 ↑ |
| 错误监控 | 无 | Sentry 集成 | Bug 定位 <5min |
特别提一句 Sentry。以前用户反馈“页面打不开”，我们只能猜。现在前端错误自动上报，连堆栈信息都有。上周有个同事写了 undefined.map()，Sentry 瞬间告警，我顺手修了，顺带在他 PR 里留了个评论：“兄弟，map 不是万能的，就像 Spring Boot 不能解决所有问题 😏”。
最后：工程化不是炫技，是责任
很多人觉得前端工程化是“过度设计”。但我想说：当你负责的页面每天有上千人访问，每一毫秒的延迟都可能让用户流失，这时候工程化就是底线。
而且，别忘了——你的简历页面也在这个项目里！如果连自己的作品集都跑得卡顿、部署靠手工，面试官看到会怎么想？“这人连基本的工程素养都没有？”
现在，这个简历系统不仅跑得飞快，还能一键部署、自动回滚、实时监控。最重要的是——我终于能在周末安心撸猫，不用再被“紧急上线”绑架了。
如果你还在手动打包、FTP 上传、祈祷别出 bug……
醒醒吧，2024 年了，GitHub 上随便找个 starter template 都比你现在的流程强。
前端工程化不是银弹，但它能让你从“切图仔”变成真正的工程师。而我，一个 DBA 出身的后端，居然在这条路上越走越远——只能说，技术人的执念，有时候真的不分前后端。
对了，我的简历页面现在开源了，欢迎来 GitHub 看看（顺便点个 Star？）。链接就不放了，毕竟……你得先学会用工程化部署它 😉。
评论 0