🛠️ 官网主页技术栈
静态站点生成 (SSG)
SSG 在构建时生成 HTML 文件，部署到 CDN，实现极速加载。
| 框架 | 特点 | 适用场景 |
|---|---|---|
| Next.js | React 生态、SSG/SSR/ISR 全支持 | 企业官网、产品官网 |
| Nuxt.js | Vue 生态、配置简单 | 快速开发、中小型官网 |
| Astro | 零 JS 输出、支持多框架组件 | 内容型官网、博客 |
| Gatsby | GraphQL 数据层、插件丰富 | 数据驱动型官网 |
| Hugo | Go 编写、构建速度极快 | 纯内容型网站 |
CSS 方案对比
| 方案 | 优势 | 劣势 |
|---|---|---|
| Tailwind CSS | 原子化、开发效率高、设计一致 | HTML 类名冗长 |
| CSS Modules | 局部作用域、无命名冲突 | 无法跨组件复用 |
| Styled Components | CSS-in-JS、动态样式 | 运行时开销 |
| Sass/Less | 变量、混入、嵌套 | 需要编译 |
动画库选择
| 动画库 | 特点 | 体积 |
|---|---|---|
| GSAP | 功能最强大、时间轴、兼容性好 | ~35KB |
| Framer Motion | React 专用、声明式 API、手势支持 | ~30KB |
| Three.js | 3D 渲染、WebGL 封装 | ~600KB |
| Lottie | AE 动画导出、JSON 格式 | ~50KB |
| Anime.js | 轻量、简洁 API | ~15KB |
部署平台
| 平台 | 特点 | 免费额度 |
|---|---|---|
| Vercel | Next.js 出品、全球 CDN、自动 HTTPS | 100GB 带宽/月 |
| Netlify | 表单处理、函数、分割测试 | 100GB 带宽/月 |
| Cloudflare Pages | 无限带宽、边缘函数 | 无限带宽 |
| AWS Amplify | AWS 生态、全栈部署 | 15GB 带宽/月 |
2026 年推荐技术栈
🚀 快速上线栈
Astro + Tailwind CSS + Vercel
🏢 企业官网栈
Next.js + Framer Motion + Vercel + Sanity CMS
🎨 创意互动栈
React Three Fiber + GSAP + Blender