Vite 开发环境优化：用自定义插件跳过大型 JS 文件的 Source Map 内联

1. 问题背景

在使用 Vite 进行前端开发时，我们经常会遇到一个性能瓶颈：当项目中引入了一个体积较大的第三方 SDK（例如 5MB 的sdk.js）时，Vite 在开发服务器（Dev Server）下会对其进行处理，并内联生成 Source Map。

这个内联过程会将原本 5MB 的文件膨胀到 50MB 甚至更大。浏览器在加载这个巨大的文件时，会占用大量的网络带宽和解析时间，导致页面加载缓慢，严重拖慢开发效率。

2. 问题根源

Vite 在开发模式下，为了提供更好的调试体验，默认会为每个模块生成 Source Map。对于大型的、已经经过压缩或混淆的第三方库文件，这种内联 Source Map 的行为不仅没有必要，反而会带来巨大的性能开销。

我们真正需要的，是让 Vite 直接返回原始文件内容，跳过所有额外的处理步骤。

3. 解决方案：自定义 Vite 插件

为了解决这个问题，我们可以编写一个自定义的 Vite 插件。该插件的核心思路是：在 Vite 的开发服务器中间件中，拦截对特定大型 JS 文件的请求，直接读取并返回原始文件内容，从而绕过 Vite 默认的 Source Map 内联流程。

3.1 插件代码

// vite.config.jsimport{defineConfig}from'vite';importfsfrom'node:fs';importpathfrom'node:path';exportdefaultdefineConfig({plugins:[{name:'serve-raw-large-js',configureServer(server){server.middlewares.use((req,res,next)=>{// 只处理 .js 文件请求（可以根据需要调整匹配规则）if(req.url&&req.url.endsWith('.js')){// 获取文件的真实路径用于读取文件内容constfilePath=path.join(process.cwd(),'public',req.url);try{conststats=fs.statSync(filePath);constfileSizeMB=stats.size/(1024*1024);// 只对大于1M的文件处理if(fileSizeMB>=1){constcontent=fs.readFileSync(filePath,'utf-8');res.setHeader('Content-Type','application/javascript');res.setHeader('Cache-Control','no-cache');returnres.end(content);}else{// 文件小于 1MB，交给 Vite 默认处理}}catch(err){// 文件不存在或读取失败，交给下一个中间件处理}}next();});},},],});

3.2 代码解析

• name: 'serve-raw-large-js'：为插件命名，便于调试。
• configureServer(server)：这是 Vite 插件提供的钩子，用于配置开发服务器。我们通过它获取到server.middlewares，即 Express 风格的中间件栈。
• 中间件逻辑：
  1. 请求过滤：只拦截以.js结尾的请求。
  2. 文件定位：将请求的 URL 映射到public目录下的实际文件路径。
  3. 大小判断：使用fs.statSync获取文件大小。如果文件大于等于 1MB（阈值可自定义），则执行跳过逻辑。
  4. 直接返回：使用fs.readFileSync读取文件内容，设置正确的Content-Type头，并直接返回给浏览器。return res.end(content)会阻止请求继续传递到 Vite 的后续处理流程。
  5. 错误处理：如果文件不存在或读取失败，调用next()将请求交给下一个中间件处理，避免服务崩溃。

4. 使用效果

在开发环境下，当浏览器请求sdk.js时，该插件会直接返回原始的 5MB 文件，而不是经过 Vite 处理后的 50MB 文件。这带来了以下好处：

• 加载速度显著提升：文件体积缩小了 10 倍，网络传输和浏览器解析时间大幅减少。
• 开发体验改善：页面热更新和首次加载不再卡顿，开发效率得到提升。
• 资源占用降低：减少了 Vite 服务器处理大型文件的计算开销。

5. 注意事项与扩展

• 文件路径：本示例假设大型 JS 文件存放在public目录下。如果文件在其他位置，需要调整filePath的拼接逻辑。
• 匹配规则：当前规则是拦截所有.js请求。更精细的做法是只匹配特定的文件名或路径，例如if (req.url.includes('sdk.js'))。
• Source Map 缺失：跳过处理后，该文件将不再有 Source Map。对于第三方 SDK，这通常是可以接受的，因为我们很少需要调试其内部代码。
• 生产环境：此插件仅在开发模式下生效，不影响生产构建。

6. 总结

通过一个简单的 Vite 自定义插件，我们巧妙地绕过了开发服务器对大型 JS 文件的 Source Map 内联处理，解决了开发环境下的性能瓶颈。这种方法轻量、高效，是优化 Vite 开发体验的一个实用技巧。