我们的技术栈——毫无保留
这就是驱动本站运行的真实基础设施。每一项选择都有理由,每一个工具都经过验证。我们为所有客户采用同样的技术标准。
前端框架
生态成熟,并发渲染带来流畅过渡。
编译期安全,重构更安心,代码自带文档。
开发时 HMR 即时生效。自 v8 起,由 rolldown 打包、oxc 压缩——esbuild 已移出依赖树。
声明式 API,路由按需加载,兼容 Suspense。
样式与设计系统
零运行时,自动清除冗余,令牌保障视觉一致。
直接复制进代码仓库——不依赖脆弱的组件库,代码 100% 可控。
- Radix UI(在新标签页打开)无障碍基础组件
开箱即有正确的 ARIA、键盘导航与焦点锁定。
声明式 API,遵循 prefers-reduced-motion,GPU 合成。
支持 Tree-shaking,风格统一,持续维护 1500 多个图标。
性能
- 预渲染——无头 Chromiumv149.0服务端输出完整 HTML
网站的所有路由——服务页面、本地页面以及作品集中的 37 个案例——都在构建时于无头 Chromium 中渲染。此前服务器对所有页面返回同一个空的 index.html:不执行 JavaScript 的爬虫只能看到首页的元数据。
- web-vitalsv6.1RUM 监控
在真实用户端测量 LCP、INP、CLS,并发送至 GA4。
- WOFF2 variable fonts字体
Outfit + Plus Jakarta Sans 自托管,拉丁字符子集,font-display: optional。
- 手动拆分代码块Code splitting
第三方依赖单独打包(react、motion、radix、pdf)→ 长期缓存效果最佳。
SEO 与结构化数据
- @dr.pogodin/react-helmetv3.2按路由设置元信息
每个页面拥有独立的 title、description 与 Open Graph。
- Schema.org JSON-LD结构化数据
Organization, LocalBusiness, Service, FAQPage, HowTo, BreadcrumbList, Article.
- llms.txtGEO 优化
专供 ChatGPT、Claude、Perplexity、Gemini 索引的文件。
- Sitemap XML可抓取性
构建时根据 App.tsx 中声明的路由生成——不可能落后于网站本身。
后端与数据
托管 Postgres、Auth、Storage、Edge Functions——开源。
- Brevo(在新标签页打开)联系表单
接收联系表单的消息,经由 Vercel serverless 函数转发。
- Resend(在新标签页打开)事务性邮件
通过 Supabase 函数发送配置器生成的 PDF 报价。API 端不做 IP 过滤。
- Zodv4.4运行时校验
客户端与服务端共享的类型化 schema,错误提示为法语。
基础设施与 CI/CD
- Vercel(在新标签页打开)Edge 托管
git push 即部署,全球 CDN,HTTP/3,预览分支。
- IONOS(在新标签页打开)域名注册商与 DNS
kayzen-lyon.com 与 .fr 域名、DNS 区域及邮箱。
- GitHub版本管理
代码审查与完整历史——公开更新日志正是由它生成。
- Service WorkerOffline-first
有策略地缓存静态资源,并提供 /offline.html 备用页。
- Vitestv4.1单元测试
共用 Vite 配置,因此与生产环境使用相同的别名和相同的处理流程。
- Playwrightv1.62E2E 测试
关键流程在 Chromium(桌面端)和 Pixel 7 移动端配置下重放。
安全与合规
- Content-Security-Policy防 XSS
script-src 不含 'unsafe-inline':每个内联脚本都凭其 SHA-256 哈希获准执行,并在构建时校验。
- HSTS preload防降级
max-age 2 年,includeSubDomains,已加入 Chrome preload 列表。
- Permissions-Policy最小权限
摄像头、麦克风、USB、地理定位默认禁用。
- GDPR by design隐私
Consent Mode v2,默认拒绝,GA4 仅在明确同意后加载(不使用 GTM),数据处理方逐一列明。
内部工具
- ESLintv10.8代码检查
严格规则,检查 Hooks,不通过则阻断 CI。
- rollup-plugin-visualizerv7.0打包分析
以图形方式检查代码块,发现体积过大的导入。
- PostCSSv8.5CSS 构建
Autoprefixer,兼容现代浏览器(目标 es2020+)。
- npm包管理器
以 package-lock.json 为准,Vercel 部署时安装的也正是它。