如何让Vite仅在使用组件时加载react-syntax-highlighter大依赖？

你遇到的react-syntax-highlighter chunk仍在首页加载的问题，核心是Vite配置中的optimizeDeps设置错误，Vite 4.4.7完全支持按需加载需求，以下是具体修正步骤：

1. 修正optimizeDeps配置 #

你当前在optimizeDeps.include中添加了react-syntax-highlighter，这会强制Vite将该依赖预构建并在首页加载，完全违背了按需加载的初衷。需要改为exclude，阻止预构建：

optimizeDeps: {
  exclude: ['react-syntax-highlighter'],
}

2. 保留manualChunks的拆分配置 #

你在build.rollupOptions.output.manualChunks中把react-syntax-highlighter单独拆分为highlighter chunk的配置是正确的，继续保留即可：

build: {
  outDir: "build",
  rollupOptions: {
    output: {
      manualChunks: {
        react: ['react','react-router-dom','react-dom'],
        reddwarf: ['rd-component','rdjs-wheel'],
        highlighter: ['react-syntax-highlighter'],
      }
    }
  },
}

3. 优化组件动态导入逻辑 #

你的组件动态导入写法有效，但可以合并请求减少HTTP开销：

React.useEffect(() => {
  Promise.all([
    import('react-syntax-highlighter').then(module => module.PrismAsyncLight),
    import('react-syntax-highlighter/dist/esm/styles/prism').then(module => ({
      dark: module.vscDarkPlus,
      light: module.darcula
    }))
  ]).then(([SyntaxHighlighter, themes]) => {
    setSyntaxHighlighter(SyntaxHighlighter);
    setThemeDark(themes.dark);
    setThemeLight(themes.light);
  });
}, []);

4. 排查全局静态导入 #

确保项目中没有其他地方静态导入react-syntax-highlighter，比如全局文件、其他组件中的import { ... } from 'react-syntax-highlighter'，这种静态导入会导致chunk被提前加载。

验证效果 #

修改配置后重启服务或执行构建：

• 开发环境：打开首页，在Chrome开发者工具Network面板中确认highlighter-xxx.js未加载；仅渲染OmsSyntaxHighlight组件时，该chunk才会被请求。
• 生产环境：构建后查看build目录，highlighter相关chunk独立存在，首页入口chunk不会包含该依赖。

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