使用Vite时动态懒加载MDX文件在生产环境失效

问题根源 #

Vite生产构建依赖静态代码分析，当动态导入路径使用纯变量（如${language}）时，Vite无法识别需要打包的具体文件，导致MDX文件被排除在构建产物之外；开发环境因为是实时编译，所以能正常运行，但会触发路径分析警告。

解决方案 #

不需要配置MDX插件的baseUrl，核心是让Vite能静态识别所有可能的MDX文件，推荐使用Vite内置的import.meta.glob来预收集所有语言对应的MDX模块，再按需加载：

1. 修改React组件的导入逻辑 #

import { lazy, Suspense } from 'react'
import { language } from 'currentLanguage'

// 用glob语法匹配所有语言目录下的content.mdx
const contentModules = import.meta.glob('../assets/markdown/website/*/content.mdx')

// 根据当前语言动态加载对应模块，添加兜底处理
const Content = lazy(() => {
  const modulePath = `../assets/markdown/website/${language}/content.mdx`
  return contentModules[modulePath]?.() || Promise.reject(new Error(`未找到语言 ${language} 对应的内容`))
})

export const Page = () => (
  <Suspense fallback={<div>加载中...</div>}>
    <Content />
  </Suspense>
)

2. 确认Vite配置无需额外修改 #

原有的MDX插件配置保持不变即可：

import mdx from '@mdx-js/rollup'
// ...
plugins: [
  mdx(),
  // ...其他插件
],
// ...

原理说明 #

• import.meta.glob是Vite提供的特殊语法，会在构建阶段静态扫描所有匹配../assets/markdown/website/*/content.mdx的文件，并将它们纳入构建产物。
• 运行时根据当前language变量，从预收集的模块中取出对应的MDX文件加载，既实现了按需加载，又满足了Vite的静态分析要求。
• 开发环境的路径分析警告也会因为Vite能明确识别需要处理的文件而消失。

内容的提问来源于stack exchange，提问作者Mark Hkr