动态惰性导入不适用于生产环境，使用 Vite

Question

我想将多个mdx文件动态导入到react组件中，例如我有一个页面根据所选语言需要不同的 mdx 文件，因此一次仅加载一个特定文件：

反应组件：

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

const Content = lazy(() => import(`../assets/markdown/website/${language}/content.mdx`))

export const Page = () => (
  <div>
    <Content />
  </div>
)

Vite.config.js：

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

因此，这在开发中效果很好，但出现以下错误（但仍然有效）：

The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis

问题是，当我尝试构建生产环境时，它不起作用（mdx 文件未处理，也未添加到 dist 文件夹中），并且我不知道在哪里添加这些 mdx 文件的列表，以便将它们处理为捆绑包？或者我是否需要将选项传递给

mdx()

插件 (options.baseUrl)？

Answer 1

如果您使用的是Vite，请尝试删除lazy()，然后直接导入。因为无论如何，Vite 都会构建所有用于生产的动态文件。