is it possible to make the vite download the large dependencies when using it

Question

Today I found the react-syntax-highlighter dependencies size reached 700KB. So I need to download this dependencies when the component used it. First I tweak the import to make it dynamic like this:

  // 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;

I am sure the component not loaded when showing the index page by add a debbugger in google chrome. Then tweak the vite.config.ts by adding:

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

but the highlighter-xxxxx.js still be downloaded when show the index page. Am I missing something? is it possible to make the huge js downloaded when using this component OmsSyntaxHighlight? I am sure only this place using this component across the whole project.The vite version is 4.4.7, this is the whole vite config:

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'],
  }
})