Q:esbuild 在 Vite 开发环境中的主要作用是什么？
A:1. 依赖预构建（将 CommonJS/UMD 依赖转为 ESM）。 2. 快速转换 TypeScript/JSX。
Q:如何优化 CSS 以加速加载？
A:压缩（Minification）以减小体积，合并（Bundling）以减少 HTTP 请求次数，使用工具（如 Autoprefixer）处理浏览器兼容性。
Q:Vite 开发服务器的核心工作方式是什么？
A:利用浏览器原生 ES Modules (Native ESM) 支持，按需提供和转换模块，不进行完整的应用打包，从而实现极速 HMR。
Q:什么是原生 ES Modules (Native ESM)？
A:浏览器本身支持通过 import 和 export 语法加载 JavaScript 模块，无需构建工具预先打包成单一文件。
Q:Vite 生产构建的目标是什么？
A:生成高度优化（如 Tree-shaking、代码分割）、体积小、兼容性好的静态资源包，适合部署。
Q:使用不同构建工具（esbuild/Rollup）可能导致什么问题？
A:开发环境和生产环境之间可能存在细微的行为不一致，尽管 Vite 尽力抹平差异。
Q:Vite 如何找到并应用 PostCSS 配置，即使我们没有在 vite.config.js 中设置？
A:通过“约定优于配置”的原则，Vite 自动查找项目根目录下名为 postcss.config.js (或 .cjs 等变体) 的标准 PostCSS 配置文件。
Q:如果项目中没有找到 postcss.config.js 文件，Vite 会怎么做？
A:Vite 会使用其内置的一套基础 PostCSS 配置。
Q:什么是 PostCSS？
A:一个使用 JavaScript 插件 (plugins) 来转换 CSS 代码的平台或工具。它本身不规定特定语法，而是提供一个处理 CSS 的框架。
Q:PostCSS 的核心工作流程是怎样的？
A:1. 解析 (Parse) CSS 代码为抽象语法树 (AST)。 2. 转换 (Transform) AST（通过运行各种插件）。 3. 生成 (Stringify) 最终的 CSS 代码字符串。
Q:什么是抽象语法树 (Abstract Syntax Tree - AST)？
A:代码的一种结构化表示，将代码分解成具有层级关系的节点对象，方便程序进行分析和修改。
Q:PostCSS 插件是在哪个阶段介入工作的？
A:在 CSS 被解析成 AST 之后，通过遍历和修改 AST 来实现转换。
Q:PostCSS 与 Sass/Less 的主要区别是什么？
A:PostCSS 是一个插件平台，更侧重于对标准 CSS 或接近标准的 CSS 进行模块化转换；Sass/Less 是定义了特定语法的 CSS 超集语言（预处理器）。
Q:PostCSS 被发明出来，最初主要是为了解决什么痛点问题？
A:自动化处理 CSS 供应商前缀 (Vendor Prefixes)。
Q:什么是 CSS 供应商前缀 (Vendor Prefix)？
A:浏览器厂商在实验性地支持某个 CSS 功能时，在属性或值前面添加的特定标识（如 -webkit-, -moz-, -ms-, -o-），用于区分标准实现。
Q:哪个 PostCSS 插件是专门用来自动添加供应商前缀的？
A:autoprefixer。
Q:autoprefixer 如何知道该添加哪些前缀？
A:它结合了两个信息源：1. caniuse-lite 数据库提供的浏览器兼容性数据。 2. 项目中 browserslist 配置指定的目标浏览器范围。
Q:PostCSS 强制开发者使用新的、非标准的 CSS 语法吗？
A:不。PostCSS 核心是处理标准 CSS 的平台。虽然 某些插件 可能引入自定义语法（如 tailwindcss）或支持未来语法（如 postcss-preset-env），但这是模块化和可选的。
Q:什么时候应该使用 postcss.config.js？
A:当你的项目 package.json 中没有设置 "type": "module"，或者明确设置为 "type": "commonjs" 时，因为 .js 文件默认被当作 CommonJS 模块处理。
Q:什么时候应该使用 postcss.config.cjs？
A:当你的项目 package.json 中设置了 "type": "module" 时，使用 .cjs 扩展名可以强制该配置文件以 CommonJS 模块方式加载，因为 PostCSS 配置加载器通常期望 CommonJS 格式。
Q:什么是 CommonJS (CJS)？
A:Node.js 传统的模块系统，使用 require() 导入和 module.exports 或 exports 导出。
Q:什么是 ES Modules (ESM)？
A:JavaScript 官方标准模块系统，使用 import 导入和 export 导出。
Q:.cjs 文件扩展名的作用是什么？
A:无论 package.json 中的 type 字段如何设置，都强制 Node.js 将该文件作为 CommonJS 模块处理。
Q:Vite 处理 Sass/SCSS 需要在 vite.config.js 中配置 loader 吗？
A:不需要。
Q:为什么 Vite 处理 Sass/SCSS 不需要配置 loader？
A:Vite 遵循“约定优于配置”：它能根据文件扩展名（如 .scss）自动检测，并查找项目中是否安装了对应的预处理器依赖（如 sass）。如果找到依赖，Vite 会自动使用它来处理该文件。
Q:Webpack 中常说的 CSS Loader (如 sass-loader) 是什么？
A:Webpack 配置中的一个模块，用于告诉 Webpack 如何处理特定类型的文件（例如，sass-loader 告诉 Webpack 使用 sass 编译器来处理 .scss 文件）。Vite 内置了这种处理逻辑。