You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

使用vite-plugin-top-level-await后Vite构建产物缺失SourceMapURL注释的原因咨询

vite-plugin-top-level-await后Vite构建产物缺失SourceMapURL注释的原因咨询

最近碰到一个挺奇怪的问题,想请教下各位开发者:

我在Vite配置中引入vite-plugin-top-level-await插件后,执行vite build生成的JS产物末尾完全没有自动添加//# sourceMappingURL=xxx.js.map注释;但只要把这个插件移除,构建出来的JS文件末尾就会正常出现类似//# sourceMappingURL=index-Cqqbffuz.js.map的注释,SourceMap也能正常关联。

我的配置与代码情况

1. Vite完整配置文件

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "node:path";
import svgr from "vite-plugin-svgr";
import topLevelAwait from "vite-plugin-top-level-await";
import commonjs from "@rollup/plugin-commonjs";

export default defineConfig({
  define: {
    "process.env": JSON.stringify({
      NODE_ENV: "production",
    }),
  },
  plugins: [
    commonjs(),
    react(),
    svgr({
      svgrOptions: {},
      include: "**/*.svg?react",
    }),
    topLevelAwait(),
  ],
  optimizeDeps:{ exclude: [] },
  build: {
    commonjsOptions: { include: [] },
    outDir: "build",
    sourcemap: true,
    rollupOptions: {},
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap")
    },
  },
});

2. 入口文件src/index.tsx

import * as React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <div/>
  </React.StrictMode>
);

reportWebVitals();

3. 核心依赖版本

{
  "vite": "7.1.3",
  "vite-plugin-top-level-await": "^1.6.0",
  "@vitejs/plugin-react": "^4.7.0"
}

我的疑问与尝试

我已经确认build.sourcemap设置为true,且移除topLevelAwait插件后SourceMapURL完全正常生成,说明基础配置没有问题。我也尝试过调整插件在plugins数组中的顺序(比如把topLevelAwait()放在最后),但问题依然存在。

想请教下:为什么启用这个插件会导致SourceMapURL注释消失?有没有办法在保留顶层await支持的同时,让SourceMapURL正常生成?或者有没有排查这个问题的具体方向?感谢各位的帮助!

火山引擎 最新活动