Vite 中的 3D 与 WebGL 工程化：Three.js、模型纹理压缩与渲染性能治理
在 Vite 项目里落地 3D 与 WebGL 的完整路径：Three.js 与 Babylon.js 的集成差异与按需导入、glTF 模型与 DRACO 压缩、KTX2 纹理与 Basis 转码、GLSL 着色器的导入与热更新、3D 场景的按需加载与首屏优化、WebGPU 与渲染后端兼容、GPU 内存管理与渲染性能度量、构建产物体积治理，以及高频陷阱与上线检查清单。
category
Vite
共 43 篇文章。
Vite 项目的 GraphQL 数据层：Apollo、urql、codegen 与缓存失效实战
在 Vite 项目中搭建 GraphQL 数据层的完整实践：Apollo Client、urql 与 TanStack Query 三条路线的选型对比、客户端初始化与环境变量配置、graphql-codegen 生成类型安全 hooks、开发期代理与 MSW Mock、查询与变更的封装与乐观更新、归一化缓存与失效策略、graphql-ws 订阅与实时数据，以及构建期 schema 校验、CI 门禁与高频陷阱清单。
Vite 项目部署平台适配实战：Vercel、Netlify、Cloudflare Pages 与自建方案
把 Vite 构建产物部署到不同平台的完整指南：静态托管平台的共性与差异、Vercel 与 Netlify 的配置约定、Cloudflare Pages 的边缘部署、对象存储加 CDN 的自建方案、自建 nginx 的缓存与回退、SPA 路由回退与 404 处理、环境变量注入与多环境构建、预览环境与灰度回滚，以及构建产物审计与高频陷阱。
Vite 桌面应用实战：Electron 与 Tauri 的工程化落地
用 Vite 构建 Electron 与 Tauri 桌面应用的完整路径：两套方案的取舍与体积对比、渲染进程与主进程的工程结构、开发期 Vite 服务器与主进程的联调、生产构建下 base 路径与 file 协议的处理、预加载脚本与 IPC 的类型安全、自动更新与代码签名打包、体积与启动性能优化、跨平台差异，以及调试与常见陷阱的排查清单。
Vite 与 MDX 内容驱动站点：@mdx-js/rollup 集成、插件链与内容管线
在 Vite 项目中用 MDX 搭建内容驱动站点：@mdx-js/rollup 的接入与 enforce pre 顺序、remark 与 rehype 插件链的编排、代码高亮与标题锚点生成、frontmatter 解析与类型化校验、内容目录扫描与路由自动生成、图片与静态资源处理、MDX 组件的按需注册与作用域隔离、构建性能与缓存策略，以及常见陷阱与落地清单。
Vite 项目的 SSG 与预渲染：vike、路由预渲染与静态分发
在 Vite 项目里落地 SSG 与预渲染：SPA 空 HTML 的 SEO 短板、CSR/SSR/SSG/ISR 的渲染谱系、vike 与 vite-plugin-ssr 的静态模式、路由预渲染脚本、构建期数据获取与注入、动态 meta 与 JSON-LD、sitemap 与 robots 生成、静态产出的 CDN 分发、增量重建与高频陷阱清单。
Vite 项目的 Web Vitals 与性能监控：指标采集、构建期埋点与 RUM 上报
在 Vite 项目里落地真实用户性能监控：LCP、INP、CLS 三个核心指标的含义与采集方式、web-vitals 库与 PerformanceObserver 的用法、构建期注入上报脚本与版本标记、RUM 的采样与批量上报、指标归因到具体资源、Lighthouse CI 与性能预算、产物体积与指标的关联，以及重复上报与采样偏差等高频陷阱。
从 Webpack 迁移到 Vite：配置映射、loader 与插件对应与常见坑
Webpack 项目迁移到 Vite 的完整对照手册：打包器与原生 ESM 开发服务器的心智模型差异、entry/output/mode 的配置映射、loader 到 Vite 内建能力的对应、DefinePlugin 与 HtmlWebpackPlugin 的替代方案、resolve 别名迁移、process.env 到 import.meta.env 的改写、devServer 到 server 与 proxy 的映射，以及渐进迁移与常见坑排查。
Vite 国际化与多语言构建：按语言分包、懒加载与回退策略
在 Vite 项目中落地国际化的完整方案：文案、格式与路由三层拆分、JSON 命名空间与键设计、运行时按语言懒加载与回退链、基于动态导入的 locale 分包、Intl 与 ICU 的复数与格式化、URL 语言前缀与切换、构建期内联默认语言与预加载，以及回退缺失与首屏闪烁等高频陷阱。
Vite CSS 处理架构：CSS Modules、PostCSS、Tailwind 与提取策略
系统拆解 Vite 的 CSS 处理架构：内置 CSS 管线与各后缀的处理差异、CSS Modules 的作用域与命名约定、PostCSS 与自动前缀的配置顺序、Tailwind CSS 的集成方式、Sass/Less 预处理器与全局变量注入、样式提取与代码分割策略、优先级与作用域隔离，以及生产优化与常见陷阱排查。
Vite PWA 与离线缓存实战：vite-plugin-pwa、Workbox 与更新策略
从零搭建 Vite PWA 的完整路径：manifest 与 Service Worker 的构成、vite-plugin-pwa 的最小配置、Workbox 预缓存与运行时缓存策略、prompt 与 autoUpdate 更新模式、离线回退与导航预加载、构建产物 hash 配合、DevTools 调试验证，以及白屏与缓存不更新等高频陷阱的排查。
Vite 构建器演进与 Rolldown 迁移：从 Rollup 到 Rust 打包器
系统梳理 Vite 构建器的演进路线：为什么 Rollup 成为瓶颈、Rolldown 与 Rollup 的兼容关系、Oxc 工具链的解析与压缩能力、rolldown-vite 的试用与切换步骤、插件兼容性评估、构建性能与产物体积对比，以及迁移过程中的常见陷阱与回滚方案。
包体分析与性能监控：Bundle Analyzer、性能预算与门禁
系统讲解 Vite 项目的包体分析与性能监控体系：包体分析的价值（知道包为什么大）、Bundle Analyzer 可视化产物、构建报告与产物统计、性能预算与 CI 门禁（设阈值防回退）、运行时性能监控（Web Vitals/错误/性能数据）、加载性能优化闭环（分析→优化→验证）、长尾模块与按需加载、慢构建的定位、以及性能治理流程（从临时优化到制度化），帮助建立可持续的性能管理体系。
组件库开发指南：Vite 库模式、发布 npm 与按需加载
系统讲解用 Vite 开发组件库的完整流程：为什么独立构建组件库、库模式构建配置（lib 模式/formats/external）、组件与样式方案（CSS 方案/主题/样式隔离）、类型声明与 dts、按需加载与 sideEffects（子路径导出）、发布 npm 流程（打包/版本/发布）、版本管理与变更日志、与 Monorepo 的整合、以及组件库的调试与文档，帮助从零搭建一套可发布、可按需、可维护的组件库。
React 应用架构模式：目录结构、状态管理与性能优化
系统讲解用 Vite 构建的 React 应用的架构模式：React 应用的三层架构（UI/状态/数据）、目录结构与模块边界（Feature-based 组织）、状态管理选型（本地/全局/服务端状态）、路由与代码分割（懒加载与性能）、数据获取与缓存（请求/缓存/竞态）、SSR/CSR 与混合渲染、组件设计模式（组合/受控/Hook 抽取）、性能优化清单（渲染/包体/加载）、以及与 Vite 工程化的结合（环境/构建/部署），帮助搭建可扩展、可维护、高性能的 React 应用。
Rollup 构建管线深入：插件钩子、产物结构与 manifest
深入 Vite 生产构建背后的 Rollup 管线：从入口到产物的完整链路、Rollup 插件钩子体系（resolveId/load/transform/模块图钩子/输出钩子）、解析与加载阶段、转换阶段、打包与代码生成阶段、产物结构（chunk/asset/entry 的关系）、manifest 与运行时注入、浏览器目标与降级策略、以及构建诊断（debug 与日志）的实践，帮助你理解构建产物如何产生并排查构建问题。
Tree-shaking 深入：摇树原理、副作用边界与产物瘦身
深入 Vite/Rollup 的 Tree-shaking 机制：摇树的原理（按使用标记 + 删除未用导出）、为什么必须 ESM（静态可分析）、副作用标记 sideEffects 的作用与配置、package.json 的 exports/module 字段、摇树的边界（动态导入/运行时/条件导入）、常见摇树失败与排查、库作者的摇树优化、与代码分割的配合、以及验证摇树效果的产物分析方法，帮助你写出「能摇动」的代码并诊断摇不掉的包体。
Vite 导入图与模块图内部：依赖追踪、解析与图结构
深入 Vite 的导入图（Import Graph）与模块图内部：导入图是什么（从入口到所有依赖的映射）、模块节点的结构与 id、解析流程（从裸导入到文件路径）、依赖追踪（静态分析 import 语句）、模块图与转换流水线的协作、动态导入与图的惰性扩展、模块图与 HMR 边界的关系、图的内存与性能优化、以及调试模块图的工具与实践，帮助你理解 Vite 为什么「按需加载、秒级启动」，并诊断依赖相关的问题。
Vite 开发代理与后端集成：server.proxy、路径重写与 Mock
系统覆盖 Vite Dev Server 与后端的协作工程：为什么前端开发需要代理、server.proxy 的完整配置（target/changeOrigin/rewrite）、API 路径重写与转发规则、HTTPS 与 WebSocket（wss）代理、本地 Mock 方案（中间件/vite-plugin-mock）与真实后端切换、多环境配置（dev/staging/prod 的 proxy 差异）、前后端分离联调工作流（契约先行/环境矩阵），以及代理故障排查，帮助团队把「前后端联调」从手工拼接口地址变成标准化的开发基建。
Vite 客户端运行时性能：加载策略、缓存与核心 Web 指标
系统覆盖 Vite 构建产物的运行时性能优化：构建期与运行期的分工、代码分割与路由级动态导入的加载策略、预加载（preload/prefetch）与资源优先级、静态资源的缓存策略（hash 文件名/长缓存/协商缓存）、LCP 与 INP 等核心 Web 指标的优化路径、产物体积与压缩（gzip/brotli/去重）、性能预算的建立与 CI 门禁、以及 RUM 测量与监控闭环，帮助开发者把「构建产物快」转化为「用户感知快」。