第一个坑，VS Code配了太多插件，启动就卡5秒。第二个坑，用了不太成熟的ORM，查询慢到怀疑人生，当时我就在想，这特么是2024年的技术？第三个坑，部署时选了冷门CI/CD工具，文档跟谜语一样，看了三遍没看懂。
先来看后端开发。我选了Node.js + Express + Prisma + Docker这套组合。为什么？我选Node.js是因为它处理API请求快，虽然单线程，但I/O密集任务表现不错。Express是轻量框架，适合快速搭REST API。Prisma作为ORM，最大的优点是类型安全——在代码里写 user.email，IDE能自动补全，不像Sequelize那样全靠猜字段名。
Prisma真的好用，但配置坑多。我第一次用Prisma时，没注意连接池配置。默认是连接数上限10，结果并发请求一多，数据库直接报错“too many connections”。我当时就懵了，查了半天才找到解决方案——在 schema.prisma 的 datasource 块里加连接池参数：
“`prisma
generator client {
provider = “prisma-client-js”
}
datasource db {
provider = “postgresql”
url = env(“DATABASE_URL”)
connectionLimit = 20
}
“`
这个设计真的反人类：官方文档里对 connectionLimit 只字不提，我翻GitHub issues才找到。所以别信默认配置，生产环境必须手动优化。
另一个坑是Docker镜像体积。一开始我直接 FROM node:16，镜像1.2GB，部署在云服务器上拉取就要5分钟。后来改成 FROM node:20-alpine，体积降到150MB，部署速度从5分钟缩到30秒。Dockerfile核心部分如下：
“`dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci –only=production
COPY –from=builder /app/dist ./dist
EXPOSE 3000
CMD [“node”, “dist/server.js”]
“`
对了，还有个细节——一开始我搞错了，把 npm ci 写成了 npm install，结果镜像里塞了一堆devDependencies，体积又大了起来。后来发现，npm ci --only=production 只装生产依赖，这才是正道。
顺手说下，我觉得Prisma比Sequelize好用，但配置坑多。如果你刚接触ORM，建议先看Prisma的官方文档，别像我一样直接跳进坑里。
现在切换到前端：React + Vite + Tailwind CSS + Axios。
Vite比Webpack快在哪？冷启动从Webpack的2-3秒降到Vite的0.3秒，热更新也几乎无感。我上周三在咖啡厅调试时，老板突然跑过来看进度，我当场改了个样式，0.2秒就刷新了，他一脸惊讶。
Tailwind CSS的utility-first设计，写样式就像搭积木，不用再纠结类名命名。一开始我觉得这玩意儿很别扭，后来用顺手了，真香。
来个具体例子：写一个用户列表组件，用Tailwind CSS+Axios：
“`jsx
import { useState, useEffect } from ‘react’;
import axios from ‘axios’;
export default function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// 使用axios拦截器处理错误，而不是在每个请求里写try-catch
axios.get(‘/api/users’)
.then(res => {
setUsers(res.data);
setLoading(false);
})
.catch(err => {
setError(‘加载失败，请刷新重试’);
setLoading(false);
});
}, []);
if (loading) return
;
if (error) return
;
return (
{user.name}
{user.email}
))}
);
}
“`
为什么用 grid 而不是 flex？因为用户列表是二维结构，grid 天然支持响应式断点，flex 需要手动计算宽度。Tailwind的 gap-4 直接搞定间距，不用写 margin。
另一个坑：Vite默认用ES Module，但有些旧库（比如jQuery插件）不支持。解决方案是在 vite.config.js 里加：
“`js
export default {
optimizeDeps: {
include: [‘jquery’]
}
}
“`
还有，全栈开发时，前后端分离开发是常态，但联调很痛苦。我推荐用 Mock Service Worker (MSW) 在浏览器里模拟API。配置如下：
“`js
// src/mocks/handlers.js
import { rest } from ‘msw’;
export const handlers = [
rest.get(‘/api/users’, (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json([{ id: 1, name: ‘Alice’ }])
);
}),
];
“`
这工具真的好用。我一开始用Mock.js，后来发现MSW更贴近真实场景，还能在浏览器里直接调试，省了不少时间。
好了，今天就先写这么多。这些工具组合是我踩了无数坑之后总结出来的，希望能帮到你。如果有更好的推荐，欢迎在评论区骂我——反正我已经被骂习惯了。