<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Vite on PlumePHP</title><link>https://plumephp.com/categories/vite/</link><description>Recent content in Vite on PlumePHP</description><generator>Hugo</generator><language>zh-CN</language><lastBuildDate>Sat, 03 Oct 2026 15:00:00 +0800</lastBuildDate><atom:link href="https://plumephp.com/categories/vite/index.xml" rel="self" type="application/rss+xml"/><item><title>Vite 中的 3D 与 WebGL 工程化：Three.js、模型纹理压缩与渲染性能治理</title><link>https://plumephp.com/vite-3d-webgl-integration/</link><pubDate>Sat, 03 Oct 2026 15:00:00 +0800</pubDate><guid>https://plumephp.com/vite-3d-webgl-integration/</guid><description>在 Vite 项目里落地 3D 与 WebGL 的完整路径：Three.js 与 Babylon.js 的集成差异与按需导入、glTF 模型与 DRACO 压缩、KTX2 纹理与 Basis 转码、GLSL 着色器的导入与热更新、3D 场景的按需加载与首屏优化、WebGPU 与渲染后端兼容、GPU 内存管理与渲染性能度量、构建产物体积治理，以及高频陷阱与上线检查清单。</description></item><item><title>Vite 项目的 GraphQL 数据层：Apollo、urql、codegen 与缓存失效实战</title><link>https://plumephp.com/vite-graphql-data-layer/</link><pubDate>Sat, 03 Oct 2026 14:00:00 +0800</pubDate><guid>https://plumephp.com/vite-graphql-data-layer/</guid><description>在 Vite 项目中搭建 GraphQL 数据层的完整实践：Apollo Client、urql 与 TanStack Query 三条路线的选型对比、客户端初始化与环境变量配置、graphql-codegen 生成类型安全 hooks、开发期代理与 MSW Mock、查询与变更的封装与乐观更新、归一化缓存与失效策略、graphql-ws 订阅与实时数据，以及构建期 schema 校验、CI 门禁与高频陷阱清单。</description></item><item><title>Vite 项目部署平台适配实战：Vercel、Netlify、Cloudflare Pages 与自建方案</title><link>https://plumephp.com/vite-deployment-platforms/</link><pubDate>Sat, 03 Oct 2026 13:00:00 +0800</pubDate><guid>https://plumephp.com/vite-deployment-platforms/</guid><description>把 Vite 构建产物部署到不同平台的完整指南：静态托管平台的共性与差异、Vercel 与 Netlify 的配置约定、Cloudflare Pages 的边缘部署、对象存储加 CDN 的自建方案、自建 nginx 的缓存与回退、SPA 路由回退与 404 处理、环境变量注入与多环境构建、预览环境与灰度回滚，以及构建产物审计与高频陷阱。</description></item><item><title>Vite 桌面应用实战：Electron 与 Tauri 的工程化落地</title><link>https://plumephp.com/vite-desktop-electron-tauri/</link><pubDate>Sat, 03 Oct 2026 12:00:00 +0800</pubDate><guid>https://plumephp.com/vite-desktop-electron-tauri/</guid><description>用 Vite 构建 Electron 与 Tauri 桌面应用的完整路径：两套方案的取舍与体积对比、渲染进程与主进程的工程结构、开发期 Vite 服务器与主进程的联调、生产构建下 base 路径与 file 协议的处理、预加载脚本与 IPC 的类型安全、自动更新与代码签名打包、体积与启动性能优化、跨平台差异，以及调试与常见陷阱的排查清单。</description></item><item><title>Vite 与 MDX 内容驱动站点：@mdx-js/rollup 集成、插件链与内容管线</title><link>https://plumephp.com/vite-mdx-content-pipeline/</link><pubDate>Sat, 03 Oct 2026 11:00:00 +0800</pubDate><guid>https://plumephp.com/vite-mdx-content-pipeline/</guid><description>在 Vite 项目中用 MDX 搭建内容驱动站点：@mdx-js/rollup 的接入与 enforce pre 顺序、remark 与 rehype 插件链的编排、代码高亮与标题锚点生成、frontmatter 解析与类型化校验、内容目录扫描与路由自动生成、图片与静态资源处理、MDX 组件的按需注册与作用域隔离、构建性能与缓存策略，以及常见陷阱与落地清单。</description></item><item><title>Vite 项目的 SSG 与预渲染：vike、路由预渲染与静态分发</title><link>https://plumephp.com/vite-ssg-prerendering/</link><pubDate>Sat, 03 Oct 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-ssg-prerendering/</guid><description>在 Vite 项目里落地 SSG 与预渲染：SPA 空 HTML 的 SEO 短板、CSR/SSR/SSG/ISR 的渲染谱系、vike 与 vite-plugin-ssr 的静态模式、路由预渲染脚本、构建期数据获取与注入、动态 meta 与 JSON-LD、sitemap 与 robots 生成、静态产出的 CDN 分发、增量重建与高频陷阱清单。</description></item><item><title>Vite 项目的 Web Vitals 与性能监控：指标采集、构建期埋点与 RUM 上报</title><link>https://plumephp.com/vite-web-vitals-monitoring/</link><pubDate>Fri, 02 Oct 2026 15:00:00 +0800</pubDate><guid>https://plumephp.com/vite-web-vitals-monitoring/</guid><description>在 Vite 项目里落地真实用户性能监控：LCP、INP、CLS 三个核心指标的含义与采集方式、web-vitals 库与 PerformanceObserver 的用法、构建期注入上报脚本与版本标记、RUM 的采样与批量上报、指标归因到具体资源、Lighthouse CI 与性能预算、产物体积与指标的关联，以及重复上报与采样偏差等高频陷阱。</description></item><item><title>从 Webpack 迁移到 Vite：配置映射、loader 与插件对应与常见坑</title><link>https://plumephp.com/vite-webpack-migration/</link><pubDate>Fri, 02 Oct 2026 14:00:00 +0800</pubDate><guid>https://plumephp.com/vite-webpack-migration/</guid><description>Webpack 项目迁移到 Vite 的完整对照手册：打包器与原生 ESM 开发服务器的心智模型差异、entry/output/mode 的配置映射、loader 到 Vite 内建能力的对应、DefinePlugin 与 HtmlWebpackPlugin 的替代方案、resolve 别名迁移、process.env 到 import.meta.env 的改写、devServer 到 server 与 proxy 的映射，以及渐进迁移与常见坑排查。</description></item><item><title>Vite 国际化与多语言构建：按语言分包、懒加载与回退策略</title><link>https://plumephp.com/vite-internationalization-i18n/</link><pubDate>Fri, 02 Oct 2026 13:00:00 +0800</pubDate><guid>https://plumephp.com/vite-internationalization-i18n/</guid><description>在 Vite 项目中落地国际化的完整方案：文案、格式与路由三层拆分、JSON 命名空间与键设计、运行时按语言懒加载与回退链、基于动态导入的 locale 分包、Intl 与 ICU 的复数与格式化、URL 语言前缀与切换、构建期内联默认语言与预加载，以及回退缺失与首屏闪烁等高频陷阱。</description></item><item><title>Vite CSS 处理架构：CSS Modules、PostCSS、Tailwind 与提取策略</title><link>https://plumephp.com/vite-css-architecture/</link><pubDate>Fri, 02 Oct 2026 12:00:00 +0800</pubDate><guid>https://plumephp.com/vite-css-architecture/</guid><description>系统拆解 Vite 的 CSS 处理架构：内置 CSS 管线与各后缀的处理差异、CSS Modules 的作用域与命名约定、PostCSS 与自动前缀的配置顺序、Tailwind CSS 的集成方式、Sass/Less 预处理器与全局变量注入、样式提取与代码分割策略、优先级与作用域隔离，以及生产优化与常见陷阱排查。</description></item><item><title>Vite PWA 与离线缓存实战：vite-plugin-pwa、Workbox 与更新策略</title><link>https://plumephp.com/vite-pwa-offline-caching/</link><pubDate>Fri, 02 Oct 2026 11:00:00 +0800</pubDate><guid>https://plumephp.com/vite-pwa-offline-caching/</guid><description>从零搭建 Vite PWA 的完整路径：manifest 与 Service Worker 的构成、vite-plugin-pwa 的最小配置、Workbox 预缓存与运行时缓存策略、prompt 与 autoUpdate 更新模式、离线回退与导航预加载、构建产物 hash 配合、DevTools 调试验证，以及白屏与缓存不更新等高频陷阱的排查。</description></item><item><title>Vite 构建器演进与 Rolldown 迁移：从 Rollup 到 Rust 打包器</title><link>https://plumephp.com/vite-rolldown-migration/</link><pubDate>Fri, 02 Oct 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-rolldown-migration/</guid><description>系统梳理 Vite 构建器的演进路线：为什么 Rollup 成为瓶颈、Rolldown 与 Rollup 的兼容关系、Oxc 工具链的解析与压缩能力、rolldown-vite 的试用与切换步骤、插件兼容性评估、构建性能与产物体积对比，以及迁移过程中的常见陷阱与回滚方案。</description></item><item><title>包体分析与性能监控：Bundle Analyzer、性能预算与门禁</title><link>https://plumephp.com/vite-bundle-analysis-performance/</link><pubDate>Tue, 29 Sep 2026 15:00:00 +0800</pubDate><guid>https://plumephp.com/vite-bundle-analysis-performance/</guid><description>系统讲解 Vite 项目的包体分析与性能监控体系：包体分析的价值（知道包为什么大）、Bundle Analyzer 可视化产物、构建报告与产物统计、性能预算与 CI 门禁（设阈值防回退）、运行时性能监控（Web Vitals/错误/性能数据）、加载性能优化闭环（分析→优化→验证）、长尾模块与按需加载、慢构建的定位、以及性能治理流程（从临时优化到制度化），帮助建立可持续的性能管理体系。</description></item><item><title>组件库开发指南：Vite 库模式、发布 npm 与按需加载</title><link>https://plumephp.com/vite-component-library-guide/</link><pubDate>Tue, 29 Sep 2026 14:00:00 +0800</pubDate><guid>https://plumephp.com/vite-component-library-guide/</guid><description>系统讲解用 Vite 开发组件库的完整流程：为什么独立构建组件库、库模式构建配置（lib 模式/formats/external）、组件与样式方案（CSS 方案/主题/样式隔离）、类型声明与 dts、按需加载与 sideEffects（子路径导出）、发布 npm 流程（打包/版本/发布）、版本管理与变更日志、与 Monorepo 的整合、以及组件库的调试与文档，帮助从零搭建一套可发布、可按需、可维护的组件库。</description></item><item><title>React 应用架构模式：目录结构、状态管理与性能优化</title><link>https://plumephp.com/vite-react-architecture-patterns/</link><pubDate>Tue, 29 Sep 2026 13:00:00 +0800</pubDate><guid>https://plumephp.com/vite-react-architecture-patterns/</guid><description>系统讲解用 Vite 构建的 React 应用的架构模式：React 应用的三层架构（UI/状态/数据）、目录结构与模块边界（Feature-based 组织）、状态管理选型（本地/全局/服务端状态）、路由与代码分割（懒加载与性能）、数据获取与缓存（请求/缓存/竞态）、SSR/CSR 与混合渲染、组件设计模式（组合/受控/Hook 抽取）、性能优化清单（渲染/包体/加载）、以及与 Vite 工程化的结合（环境/构建/部署），帮助搭建可扩展、可维护、高性能的 React 应用。</description></item><item><title>Rollup 构建管线深入：插件钩子、产物结构与 manifest</title><link>https://plumephp.com/vite-rollup-build-pipeline/</link><pubDate>Tue, 29 Sep 2026 12:00:00 +0800</pubDate><guid>https://plumephp.com/vite-rollup-build-pipeline/</guid><description>深入 Vite 生产构建背后的 Rollup 管线：从入口到产物的完整链路、Rollup 插件钩子体系（resolveId/load/transform/模块图钩子/输出钩子）、解析与加载阶段、转换阶段、打包与代码生成阶段、产物结构（chunk/asset/entry 的关系）、manifest 与运行时注入、浏览器目标与降级策略、以及构建诊断（debug 与日志）的实践，帮助你理解构建产物如何产生并排查构建问题。</description></item><item><title>Tree-shaking 深入：摇树原理、副作用边界与产物瘦身</title><link>https://plumephp.com/vite-tree-shaking-deep-dive/</link><pubDate>Tue, 29 Sep 2026 11:00:00 +0800</pubDate><guid>https://plumephp.com/vite-tree-shaking-deep-dive/</guid><description>深入 Vite/Rollup 的 Tree-shaking 机制：摇树的原理（按使用标记 + 删除未用导出）、为什么必须 ESM（静态可分析）、副作用标记 sideEffects 的作用与配置、package.json 的 exports/module 字段、摇树的边界（动态导入/运行时/条件导入）、常见摇树失败与排查、库作者的摇树优化、与代码分割的配合、以及验证摇树效果的产物分析方法，帮助你写出「能摇动」的代码并诊断摇不掉的包体。</description></item><item><title>Vite 导入图与模块图内部：依赖追踪、解析与图结构</title><link>https://plumephp.com/vite-import-graph-internals/</link><pubDate>Tue, 29 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-import-graph-internals/</guid><description>深入 Vite 的导入图（Import Graph）与模块图内部：导入图是什么（从入口到所有依赖的映射）、模块节点的结构与 id、解析流程（从裸导入到文件路径）、依赖追踪（静态分析 import 语句）、模块图与转换流水线的协作、动态导入与图的惰性扩展、模块图与 HMR 边界的关系、图的内存与性能优化、以及调试模块图的工具与实践，帮助你理解 Vite 为什么「按需加载、秒级启动」，并诊断依赖相关的问题。</description></item><item><title>Vite 开发代理与后端集成：server.proxy、路径重写与 Mock</title><link>https://plumephp.com/vite-dev-server-proxy-backend-integration/</link><pubDate>Mon, 28 Sep 2026 15:00:00 +0800</pubDate><guid>https://plumephp.com/vite-dev-server-proxy-backend-integration/</guid><description>系统覆盖 Vite Dev Server 与后端的协作工程：为什么前端开发需要代理、server.proxy 的完整配置（target/changeOrigin/rewrite）、API 路径重写与转发规则、HTTPS 与 WebSocket（wss）代理、本地 Mock 方案（中间件/vite-plugin-mock）与真实后端切换、多环境配置（dev/staging/prod 的 proxy 差异）、前后端分离联调工作流（契约先行/环境矩阵），以及代理故障排查，帮助团队把「前后端联调」从手工拼接口地址变成标准化的开发基建。</description></item><item><title>Vite 客户端运行时性能：加载策略、缓存与核心 Web 指标</title><link>https://plumephp.com/vite-runtime-performance-optimization/</link><pubDate>Mon, 28 Sep 2026 14:00:00 +0800</pubDate><guid>https://plumephp.com/vite-runtime-performance-optimization/</guid><description>系统覆盖 Vite 构建产物的运行时性能优化：构建期与运行期的分工、代码分割与路由级动态导入的加载策略、预加载（preload/prefetch）与资源优先级、静态资源的缓存策略（hash 文件名/长缓存/协商缓存）、LCP 与 INP 等核心 Web 指标的优化路径、产物体积与压缩（gzip/brotli/去重）、性能预算的建立与 CI 门禁、以及 RUM 测量与监控闭环，帮助开发者把「构建产物快」转化为「用户感知快」。</description></item><item><title>Vite 容器化与 Docker 构建：多阶段构建、层缓存与镜像优化</title><link>https://plumephp.com/vite-containerized-docker-builds/</link><pubDate>Mon, 28 Sep 2026 13:00:00 +0800</pubDate><guid>https://plumephp.com/vite-containerized-docker-builds/</guid><description>系统覆盖 Vite 前端项目的容器化工程实践：Docker 多阶段构建的架构（构建阶段 + 运行阶段）、依赖层缓存策略（pnpm-lock 优先/缓存挂载/分层技巧）、前端产物的静态服务镜像（nginx/静态服务器）、SPA 路由与 nginx 配置、CI 中的 Docker 构建缓存复用（BuildKit/远程缓存）、镜像体积优化与安全加固、以及多环境镜像矩阵，帮助前端团队把「npm run build + 服务器」升级为「可复用、可缓存、可审计」的容器化交付。</description></item><item><title>Vite 前端安全加固：CSP、依赖供应链与构建产物安全</title><link>https://plumephp.com/vite-security-csp-hardening/</link><pubDate>Mon, 28 Sep 2026 12:00:00 +0800</pubDate><guid>https://plumephp.com/vite-security-csp-hardening/</guid><description>系统覆盖基于 Vite 的前端应用安全加固实践：CSP（内容安全策略）的指令体系与 nonce/hash 机制、Vite 项目如何正确配置 CSP（script-src/style-src 与开发/生产差异）、依赖供应链安全（锁定版本/lockfile/漏洞扫描/审计）、构建产物的安全风险（source map 泄漏/API key 泄漏/注入）、XSS 与注入面在构建层的缓解，以及合规与安全基线的建立，帮助前端团队把安全从「上线后修补」前置到「构建与依赖层」。</description></item><item><title>Source Map 深入：生成原理、调试体验与错误监控</title><link>https://plumephp.com/vite-sourcemap-deep-dive/</link><pubDate>Mon, 28 Sep 2026 11:00:00 +0800</pubDate><guid>https://plumephp.com/vite-sourcemap-deep-dive/</guid><description>系统覆盖 Source Map 的底层原理与工程实践：source map 的作用与结构（sources/mappings/names）、VLQ 编码与 mappings 的生成机制、Vite 中 sourcemap 的配置与类型（inline/external/hidden）、浏览器 DevTools 的源码映射与调试体验、sourcemap 上传到错误监控平台（Sentry 等）的实践、生产环境的 sourcemap 安全与策略、以及还原映射与加载性能的权衡，帮助开发者把「调试体验」与「线上可观测性」都做好。</description></item><item><title>Vite CI/CD 构建优化：缓存策略、并行构建、产物交付与自动化部署</title><link>https://plumephp.com/vite-ci-cd-optimization/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-ci-cd-optimization/</guid><description>Vite 项目的 CI/CD 最佳实践：GitHub Actions 流水线、依赖缓存与 Vite 构建缓存、并行 Job 与分片、构建产物交付（哈希/上传）、Vercel/Netlify/GitHub Pages 自动化部署、构建失败排查。</description></item><item><title>Vite HMR 深入：热更新机制、模块边界与自定义 HMR</title><link>https://plumephp.com/vite-hmr-internals/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-hmr-internals/</guid><description>深入 Vite 热更新（HMR）原理：HMR 是什么、模块图与依赖链、accept 边界、自定义 HMR API（import.meta.hot）、插件实现 HMR、常见 HMR 失效与性能优化。</description></item><item><title>Vite 中的 Web Worker 与 WASM：并行计算、模块 Worker 与加载优化</title><link>https://plumephp.com/vite-worker-wasm/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-worker-wasm/</guid><description>在 Vite 中用好 Worker 与 WASM：Worker 的 Vite 原生加载（?worker/new URL）、模块 Worker 与代码分割、Worker 池与通信设计、WASM 在 Vite 的加载方式（?url/instantiate/async）、WASM 与 Worker 的组合、性能权衡（线程/内存/传输），以及真实场景（图片处理/加密/数据编解码）。</description></item><item><title>Vite 依赖预构建：optimizeDeps 原理、缓存失效与 Monorepo 实战</title><link>https://plumephp.com/vite-dependency-pre-bundling/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-dependency-pre-bundling/</guid><description>深入 Vite 依赖预构建机制：为什么需要预构建（ESM 兼容 + 性能）、esbuild 扫描与打包、optimizeDeps 配置、缓存失效与 .vite 目录、Monorepo 与链接包处理、按需预构建。</description></item><item><title>Vite 开发服务器内部架构：中间件管线、模块图与按需编译</title><link>https://plumephp.com/vite-dev-server-internals/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-dev-server-internals/</guid><description>系统覆盖 Vite Dev Server 的内部工作原理：开发服务器的整体架构与双引擎分工、Connect 中间件管线（静态服务/转换/代理）、模块图与依赖解析（import 扫描/改写 ESM）、源码转换管道（esbuild 转译/插件 transform）、浏览器原生 ESM 的按需编译模型、WebSocket 与 HMR 消息机制、依赖预构建的整合方式，以及启动优化与常见问题排查，帮助开发者从「用 Vite」进阶到「理解 Vite 的 Dev Server 为什么这么快」。</description></item><item><title>Vite 开发调试与故障排查：devtools、调试工具链与常见问题定位</title><link>https://plumephp.com/vite-devtools-debugging/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-devtools-debugging/</guid><description>Vite 项目的调试工具箱：dev server 调试（vite --debug/--host/端口）、构建调试（--debug/-d、产物分析）、浏览器 devtools 与 sourcemap、依赖问题排查（预构建/hmr/路径）、性能定位（慢模块/启动耗时）、日志与可视化分析、以及常见报错（404/别名/依赖解析/内存）的系统排查法。</description></item><item><title>Vite 微前端集成：Module Federation、qiankun 与 import maps</title><link>https://plumephp.com/vite-micro-frontend/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-micro-frontend/</guid><description>基于 Vite 的微前端落地全解：微前端的核心诉求（独立交付/技术异构/自治）、三种方案对比（Module Federation、qiankun、import maps + 原生 ESM）、Vite + Module Federation 配置实战、qiankun 与 Vite 的兼容处理、样式与路由隔离、共享依赖与版本冲突、以及微前端的构建与部署策略。</description></item><item><title>Vite 构建缓存与持久化缓存策略：依赖预构建、Rollup 缓存与 CI 加速</title><link>https://plumephp.com/vite-build-cache/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-build-cache/</guid><description>Vite 构建缓存全解：缓存的三层结构（依赖预构建/.vite、esbuild、Rollup）、本地开发缓存 vs 生产构建缓存的差异、缓存失效与命中判定（package.json、lockfile、配置）、CI 里的持久化缓存配置、增量构建与 Turbopack 对比，以及缓存安全与坑。</description></item><item><title>Vite 框架集成：React、Vue、Svelte、Solid 与官方插件生态</title><link>https://plumephp.com/vite-framework-integration/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-framework-integration/</guid><description>系统覆盖 Vite 与主流前端框架的集成：@vitejs/plugin-vue、plugin-react、Svelte/Solid 插件、框架预设（create-vite 模板）、JSX 转换、框架 HMR、选择框架插件的要点。</description></item><item><title>Vite 测试实战：Vitest 单元测试、组件测试与 E2E 测试</title><link>https://plumephp.com/vite-vitest-testing/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-vitest-testing/</guid><description>系统覆盖 Vite 生态的测试方案：Vitest 单元测试（断言/参数化/快照）、组件测试（Vue/React Testing Library）、E2E 测试（Playwright）、Mock 与覆盖率、CI 集成，以及 Vite 插件兼容性。</description></item><item><title>Vite 浏览器兼容与 Legacy 构建：build.target、Polyfill 与兼容插件</title><link>https://plumephp.com/vite-compatibility-legacy/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-compatibility-legacy/</guid><description>Vite 的浏览器兼容策略全解：build.target 与 esbuild 转译目标、现代 vs 遗留浏览器双构建（@vitejs/plugin-legacy）、polyfill 的按需加载（Polyfill.io/core-js）、browserslist 配置、动态 import 与语法降级、以及兼容性测试与决策。</description></item><item><title>Vite 环境变量与生产构建最佳实践：import.meta.env、构建模式与产物优化</title><link>https://plumephp.com/vite-env-production-best-practices/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-env-production-best-practices/</guid><description>Vite 生产构建最佳实践：import.meta.env 环境变量体系（.env 文件/模式/替换）、构建模式与 base 路径、Sourcemap 策略、产物优化（压缩/代码分割/动态导入）、CDN 与 gzip、部署配置。</description></item><item><title>Vite 静态资源与媒体资产处理：图片、字体、SVG 与 Worker</title><link>https://plumephp.com/vite-asset-processing/</link><pubDate>Mon, 28 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-asset-processing/</guid><description>Vite 项目的静态资源处理全解：assetsInlineLimit 内联策略、图片优化（publicDir 与 import）、字体加载与子集化、SVG 最佳实践（组件化 vs 文件）、import.meta.url 与 Worker 加载、资源哈希与缓存，以及常见资源问题的排查。</description></item><item><title>Vite SSR 与服务端渲染实战：从模块图到全栈框架生态</title><link>https://plumephp.com/vite-ssr-frameworks/</link><pubDate>Sun, 27 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-ssr-frameworks/</guid><description>系统讲解 Vite 的 SSR 能力：SSR 与传统 SPA 的差异、Vite SSR 架构与模块图、服务端渲染流程（entry-server/entry-client）、数据预取与流式渲染、开发期 SSR 的 HMR、以及基于 Vite 的全栈框架生态（Nuxt/Astro/SolidStart/SvelteKit）。</description></item><item><title>Vite 与 Monorepo 多应用架构：pnpm workspace、共享包与构建隔离</title><link>https://plumephp.com/vite-monorepo-architecture/</link><pubDate>Sun, 27 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-monorepo-architecture/</guid><description>系统讲解在 Monorepo 架构中使用 Vite 的最佳实践：pnpm workspace 搭建、共享包（UI 库/工具包）开发与发布、依赖预构建与 resolve.dedupe、多应用构建隔离与缓存、以及典型的 Monorepo Vite 项目结构。</description></item><item><title>Vite 专题：从脚手架到生产优化的现代前端构建工程化</title><link>https://plumephp.com/posts/vite/</link><pubDate>Sun, 27 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/posts/vite/</guid><description>Vite 是当下最流行的前端构建工具，基于原生 ESM 与 esbuild/Rollup 双引擎，重新定义了开发体验与生产构建性能。本专题从工程化视角系统覆盖 Vite 全链路：项目脚手架与工程化起步（create-vite 模板、目录结构与工程规范）、配置文件与多环境变量管理（defineConfig 深度解析、resolve/server/build 配置、import.meta.env）、插件开发实战（插件钩子、transform、虚拟模块与 Rollup 生态联动）、构建优化与代码分割（chunk 拆分策略、Tree Shaking、gzip/brotli 压缩、预构建优化）、Monorepo 多应用架构（pnpm workspace、共享包、依赖预构建、构建隔离）、Vite SSR 与服务端渲染（SSR 架构、模块图与 HMR、全栈框架生态），并扩展测试实战（Vitest 单元/组件/E2E）、HMR 深入、依赖预构建（optimizeDeps 与缓存失效）、环境变量与生产构建最佳实践、框架集成（React/Vue/Svelte/Solid）以及 CI/CD 构建优化，进一步覆盖静态资源与媒体资产处理、微前端集成、构建缓存与持久化缓存策略、浏览器兼容与 Legacy 构建、Web Worker 与 WASM 并行计算、开发调试与故障排查工具链，并深入开发服务器内部架构（Connect 中间件、模块图与按需编译）、Source Map 生成原理（VLQ/mappings、inline/external/hidden）、CSP 与前端安全加固（内容安全策略、依赖供应链、构建产物安全）、容器化与 Docker 构建（多阶段构建、层缓存、nginx 部署）、客户端运行时性能优化（代码分割、preload、核心 Web 指标）以及开发代理与后端集成（server.proxy、路径重写、Mock 与联调工作流），再扩展导入图与模块图内部（依赖追踪/解析/模块节点/HMR 边界）、Tree-shaking 深入（摇树原理/副作用标记/exports 入口）、Rollup 构建管线（插件钩子/产物结构/manifest）、React 应用架构模式（三层架构/状态管理/路由分割/SSR）、组件库开发指南（lib 模式/dts 生成/npm 发布/按需加载）、包体分析与性能监控（Bundle Analyzer/性能预算/CI 门禁/Web Vitals），帮助开发者构建高性能、可维护、可扩展的现代前端工程，并进一步覆盖 SSG 与预渲染（vike/路由预渲染）、MDX 内容驱动站点、Electron/Tauri 桌面应用、部署平台适配（Vercel/Netlify/Cloudflare Pages/自建 nginx）、GraphQL 数据层（Apollo/urql/codegen）与 3D/WebGL 工程化（Three.js/glTF/KTX2）。</description></item><item><title>Vite 插件开发实战：钩子体系、transform 与虚拟模块</title><link>https://plumephp.com/vite-plugin-development/</link><pubDate>Sun, 27 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-plugin-development/</guid><description>从零编写 Vite 插件：理解 Vite 插件与 Rollup 插件的钩子体系、开发期专属钩子（configureServer）、transform 与 load 实现源码转换、虚拟模块的实现原理、插件应用顺序，以及三个完整的实战插件示例。</description></item><item><title>Vite 构建优化与代码分割：从 chunk 策略到加载性能基线</title><link>https://plumephp.com/vite-build-optimization/</link><pubDate>Sun, 27 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-build-optimization/</guid><description>系统拆解 Vite 生产构建优化：构建流程与 esbuild/Rollup 分工、Tree Shaking 原理与 sideEffects、manualChunks 代码分割策略、资源内联与预加载、gzip/brotli 压缩对比、性能基线指标，以及常见构建问题的排查。</description></item><item><title>Vite 配置详解与多环境变量管理：defineConfig 全参数实战</title><link>https://plumephp.com/vite-config-guide/</link><pubDate>Sun, 27 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-config-guide/</guid><description>系统拆解 Vite 配置体系：defineConfig 与配置优先级、resolve/server/build 三大核心配置块、import.meta.env 环境变量机制、.env 文件多环境管理（development/production/staging）、以及配置类型推导与常见陷阱。</description></item><item><title>Vite 项目脚手架与工程化起步：从 create-vite 到可维护的前端工程</title><link>https://plumephp.com/vite-scaffold-engineering/</link><pubDate>Sun, 27 Sep 2026 10:00:00 +0800</pubDate><guid>https://plumephp.com/vite-scaffold-engineering/</guid><description>以 create-vite 为起点，从零搭建一个工程化完备的 Vite 项目：模板选择与目录结构、依赖管理与脚本设计、ESLint + Prettier + Husky + lint-staged 代码质量工具链、路径别名与基础配置，以及从模板到可维护工程的演进路径。</description></item></channel></rss>