标签: Vite

Vite开发服务器中，`server.middlewares.use`将中间件置于末尾，易被内置中间件（如静态资源、SPA fallback）优先拦截，导致API请求（如`/api/auto-icon`）或OPTIONS预检失败。**方案**：使用`server.middlewares.stack.unshift({route:'',handle})`抢占首位，确保CORS头响应及路径精确匹配，特别适用于Vite 7+ SSR场景。（148字符）

Vite启动时会预构建依赖，但按需引入某些包（如element-plus样式文件）可能触发Vite强制优化依赖并导致页面刷新。解决方案是在`vite.config.js`中配置`optimizeDeps.include`，手动包含这些依赖，避免Vite自动侦测错误，减少不必要的刷新。 另一种方案是尝试`optimizeDeps.holdUntilCrawlEnd`配置。

JavaScript模块化从CommonJS到ES Modules演进，核心价值在于隔离、依赖管理、复用和优化。CommonJS同步加载，AMD异步，UMD兼容。ES Modules静态分析，支持Tree Shaking。现代实践如Bundleless架构、模块联邦等。性能优化策略包括代码分割、预加载和持久化缓存。未来趋势包括Import Maps和Web Bundles。

`code-inspector-plugin` 是一款提升开发效率的工具，支持多种构建工具。它能通过点击页面DOM，自动打开IDE并定位到相应的源代码位置。

Webpack 默认不支持 Vite 的 `module?url` 语法，该语法用于获取模块的 URL。文章提出了两种解决方案：一是使用 `file-loader` 或 `asset/resource`；二是编写自定义 Webpack loader 处理特定请求，返回模块 URL。并提供了一个自定义 loader 的示例代码。