Built with love in Lyon

我们的技术栈——毫无保留

这就是驱动本站运行的真实基础设施。每一项选择都有理由,每一个工具都经过验证。我们为所有客户采用同样的技术标准。

35 个工具 8 个类别 Lighthouse SEO 100 · perf 87

前端框架

样式与设计系统

性能

  • 预渲染——无头 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 中声明的路由生成——不可能落后于网站本身。

后端与数据

基础设施与 CI/CD

  • 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 部署时安装的也正是它。

这是一个持续更新的页面

每逢重大升级,我们都会更新这份清单。完整的迭代历史请查看我们的公开更新日志,令牌与组件请查看我们的设计系统。

聊聊您的基础设施