Vite

Vite的定义与核心目标

请解释Vite是什么，并对比传统构建工具（如Webpack）的性能瓶颈，说明Vite的设计目标是如何解决开发环境启动慢、热更新延迟等问题的？

Vite工作原理与快速开发实现

Vite如何基于浏览器原生ES Modules实现按需加载？请描述其开发环境下的请求处理流程，如何避免传统打包工具的全量编译？

Vite模块预构建机制

Vite的预构建（Pre-Bundling）如何优化第三方依赖加载？请说明将node_modules依赖转换为ESM格式的意义，以及如何减少HTTP请求数量？

Vite热模块替换机制对比

Vite的HMR实现与Webpack有何本质区别？请从原生ESM支持、模块更新粒度、无编译环节等角度分析其优势？

Vite的Tree Shaking与Rollup集成

Vite如何借助Rollup实现Tree Shaking？请解释其静态分析过程及如何确保未使用代码在生产构建中被剔除？

Vite性能优势核心原因

为什么Vite在开发环境下比Webpack更快？请从ESM原生加载、预构建、HMR机制等角度说明其核心优势？

Vite项目创建与模板支持

如何通过npm create vite@latest命令创建新项目？Vite支持的框架模板（Vue/React等）有哪些？请说明多模板选择的实际应用场景？

vite.config.js的作用与配置

vite.config.js文件在Vite项目中的核心作用是什么？请举例说明如何自定义构建输出目录、代理规则或别名（alias）等配置？

build与server配置项详解

Vite的build和server配置项有哪些常见用法？例如如何配置生产构建的代码压缩、开发服务器的端口号或HTTPS支持？

Vite环境变量配置方法

如何在Vite中通过.env文件定义环境变量？请说明不同模式（开发/生产）下.env文件的优先级及如何通过import.meta.env访问变量？

Vite对CSS预处理器的支持

如何在Vite项目中集成Sass/Stylus/Less？是否需要额外安装依赖？请提供配置示例并说明预处理器编译流程？

Vite静态资源处理策略

如何配置Vite以支持图片、字体等静态资源的加载？请说明通过import引入或public目录引用的区别及适用场景？

Vite的Gzip与代码分割配置

如何在Vite中启用Gzip压缩和代码分割（Code Splitting）？请结合vite-plugin-compression插件和Rollup配置说明优化方案？

Vite多页应用与懒加载实现

如何配置Vite支持多页应用（MPA）及组件懒加载？请说明多入口设置和动态import()语法的具体实现方式？

Vite插件机制与常见Hook

请解释Vite的插件机制如何与Rollup插件系统兼容？列举Vite特有的Hook（如config、transform）及其在开发/构建流程中的作用？

自定义Vite插件开发与执行顺序

如何编写一个自定义Vite插件？如何通过enforce属性控制插件的执行顺序？请提供插件基本结构示例并说明优先级规则？

扩展Rollup配置的实践

如何在Vite中修改或扩展Rollup的配置？例如通过build.rollupOptions调整输出格式或添加Rollup插件？

实用Vite插件举例

列举3个常用的Vite插件（如@vitejs/plugin-legacy、vite-plugin-pwa），并说明它们如何解决兼容性、PWA支持等具体问题？

Vite对Vue/React的深度支持

Vite如何通过内置模板和工具链支持Vue 3的单文件组件（SFC）和React的Fast Refresh特性？请说明框架优化的核心实现？

Vite服务端渲染（SSR）实现

如何在Vite中实现服务端渲染（SSR）？请结合vite-plugin-ssr或Nuxt 3的集成方案说明SSR的构建流程与配置要点？

Vite的TypeScript处理机制

Vite如何处理TypeScript项目？与Webpack相比，其依赖esbuild编译的优势是什么？是否需要额外配置ts-loader？

Vite集成WebAssembly

如何在Vite中直接导入和使用WebAssembly（Wasm）模块？请说明通过init函数加载.wasm文件的实现步骤？

Vite调试独立文件的方法

如何在不重新构建整个项目的情况下调试Vite项目中的单个文件？请描述开发服务器的实时更新机制如何支持局部修改？

Vite启动与构建性能优化

如何优化Vite项目的启动时间和生产构建性能？请说明预构建依赖、缓存策略及减少插件数量的具体实践？

Vite构建性能分析工具

如何使用vite-bundle-analyzer等插件分析Vite项目的构建性能？请描述可视化包体积分析的配置步骤？

Vite持久化缓存机制

Vite的持久化缓存（如.vite目录）如何提升二次构建速度？如何通过--force参数手动触发缓存失效？

Vite包体积优化策略

列举3种减小Vite项目生产包体积的方法（如Tree Shaking、代码分割、按需加载），并说明其实现原理？

Vite生产环境优化配置

如何配置Vite以优化生产环境构建？例如设置base路径适配CDN、启用代码压缩（build.minify）等？

Vite与Webpack/Rollup对比

请从开发体验、构建速度、插件生态、适用场景（如SPA开发与库打包）等方面对比Vite、Webpack和Rollup的优缺点，并说明各自的核心适用场景？

Vite对CommonJS模块的支持

Vite是否支持CommonJS模块？如何处理项目中依赖的CommonJS第三方库？请说明预构建阶段如何自动转换CJS到ESM格式？

Vite插件生态与Rollup兼容性

Vite的插件生态现状如何？如何通过rollupOptions兼容Rollup插件？请举例说明Vite专属插件与通用Rollup插件的使用差异？

Vite开发服务器HTTPS配置

如何配置Vite开发服务器以支持HTTPS？请通过server.https选项说明如何加载SSL证书（如key和cert文件路径）？

Vite全局常量定义方法

如何在Vite中注入全局常量（如__VERSION__）？请使用define配置项说明如何替换代码中的占位符变量？

Vite的base配置项作用

Vite的base配置项在项目部署时起到什么作用？请举例说明如何通过它适配CDN资源路径或子目录部署场景（如/sub-path/）？

Vite开发与生产构建差异

Vite的开发版本和生产构建版本有何本质区别？例如开发模式基于原生ESM加载，而生产构建如何通过Rollup实现代码优化？

Vite按需加载实现方案

如何通过动态import()语法在Vite中实现按需加载？请结合代码分割（Code Splitting）说明如何避免一次性加载所有模块？

Vite自定义路由解析扩展

如何在Vite中扩展自定义的路由解析逻辑？例如通过插件拦截请求或修改Rollup配置实现动态路由重定向？