在使用时,是否可以使vite下载较大的依赖项

今天我发现 react-syntax-highlighter 依赖项大小达到700KB。因此,当组件使用它时,我需要下载这些依赖项。首先,我调整导入,使其动态如下:

  // import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
// import { vscDarkPlus, darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
import './OmsSyntaxHighlight.css';
import { useState } from 'react';
import React from 'react';

type tProps = {
  textContent: string;
  language: string;
  darkMode?: boolean;
}

const OmsSyntaxHighlight = (props: tProps) => {
  const { textContent, darkMode, language = 'txt' } = props;

  const [SyntaxHighlighter, setSyntaxHighlighter] = useState<any>();
  const [ThemeDark, setThemeDark] = useState<any>();
  const [ThemeLight, setThemeLight] = useState<any>();

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

  if (!SyntaxHighlighter || !ThemeDark || !ThemeLight) {
    return <div>Loading...</div>;
  }

  return (
    <SyntaxHighlighter
      showLineNumbers={true}
      lineNumberStyle={{ color: '#ddd', fontSize: 10 }}
      style={darkMode ? ThemeDark : ThemeLight}
      language={language}
      PreTag='div'
      codeTagProps={{
        style: {
          fontSize: "inherit",
          borderRadius: "inherit",
        }
      }}
      customStyle={{ fontSize: '17px', borderRadius: "6px" }}
    >
      {String(textContent).replace(/\n$/, '')}
    </SyntaxHighlighter>
  );
};

export default OmsSyntaxHighlight;

我确信当通过在谷歌chrome中添加debbug来显示索引页面时,该组件没有加载。然后调整 vite.config.ts 通过添加:

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

但是 highlighter-xxxxx.js 显示索引页面时仍然可以下载。我是不是错过了什么?使用这个组件时,有可能下载巨大的js吗 OmsSyntaxHighlight ? 我确信只有这个地方在整个项目中使用这个组件。vite版本是4.4.7,这是整个vite配置:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'node:path';
import autoprefixer from 'autoprefixer';
import { visualizer } from "rollup-plugin-visualizer";
import { PluginOption } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    visualizer({
      gzipSize: true,
      brotliSize: true,
      emitFile: false,
      filename: "test.html",
      open:true 
    }) as PluginOption
  ],
  css: {
    postcss: {
      plugins: [
        autoprefixer({})
      ],
    }
  },
  build: {
    outDir: "build",
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react','react-router-dom','react-dom'],
          reddwarf: ['rd-component','rdjs-wheel'],
          highlighter: ['react-syntax-highlighter'],
        }
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  optimizeDeps: {
    include: ['react-syntax-highlighter','highlighter'],
  }
})