Vite项目中动态导入highlight.js仍在首页加载的问题求助

你遇到的核心问题是：未使用MarkdownText组件的首页仍加载了highlight.js相关资源，这是因为组件及其依赖未被正确拆分，导致打包工具将不必要的资源混入了主chunk。

问题根源 #

1. 组件未懒加载：MarkdownText被静态导入，即使首页不渲染它，打包工具仍会将其及依赖打包进主bundle。
2. 静态导入冗余：createMarkdown中静态导入了markdown-it，该库会被提前打包进主chunk，同时动态导入的highlight.js可能被打包工具误预加载。
3. Tree Shaking失效：打包配置未正确开启Tree Shaking，导致未使用的代码未被剔除。

具体解决方案 #

1. 懒加载MarkdownText组件 #

将组件改为React懒加载模式，只有当组件被渲染时才会加载其对应的chunk及依赖：

// 在使用组件的页面中（而非全局导入）
import { Suspense, lazy } from 'react';

// 懒加载MarkdownText
const MarkdownText = lazy(() => import('./path/to/MarkdownText'));

// 使用时用Suspense包裹
function MarkdownPage() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <MarkdownText content="你的Markdown内容" />
    </Suspense>
  );
}

2. 优化createMarkdown模块的导入逻辑 #

将markdown-it也改为动态导入，进一步减少主chunk体积，同时确保模块无冗余静态依赖：

// @web/service/markdown.ts
import { CSSProperties } from "react";
import { convertUpper2UnderLineCssKey, htmlEncode } from "@web/util/html";

let markdown: any;

export async function createMarkdown({
  hlStyle = {},
  iconStyle = {},
}: {
  hlStyle?: CSSProperties;
  iconStyle?: CSSProperties;
}) {
  if (markdown) {
    return markdown;
  }
  // 同时动态导入markdown-it、highlight.js及样式
  const [markdownIt, _, hljs] = await Promise.all([
    import("markdown-it"),
    import("highlight.js/styles/atom-one-dark-reasonable.css"),
    import("highlight.js"),
  ]);

  markdown = markdownIt.default({
    highlight: function (str: string, lang: string) {
      if (lang && hljs.default.getLanguage(lang)) {
        try {
          return getMarkdownCodeTemplate(
            hljs.default.highlight(str, { language: lang, ignoreIllegals: true }).value,
            str,
            hlStyle,
            iconStyle
          );
        } catch (err) {
          console.log(err);
        }
      }
      return getMarkdownCodeTemplate(
        markdown.utils.escapeHtml(str),
        str,
        hlStyle,
        iconStyle
      );
    },
  });
  return markdown;
}

3. 确保打包工具Tree Shaking生效 #

• Webpack：
  1. 确保mode设置为production（默认开启Tree Shaking）
  2. 在package.json中声明副作用文件：

     {
       "sideEffects": ["*.css", "*.scss"]
     }
     

  3. 优化配置：

     module.exports = {
       mode: 'production',
       optimization: {
         usedExports: true,
         sideEffects: true
       }
     };
     

• Vite：生产环境默认开启Tree Shaking，无需额外配置，确保组件使用ES模块格式。

4. 排查间接导入问题 #

使用打包分析工具（如Webpack Bundle Analyzer、Vite Bundle Analyzer）查看主chunk内容，确认是否有其他模块间接导入了MarkdownText或createMarkdown，并移除不必要的导入。

验证方法 #

修改后重新打包部署：

• 首页网络请求中不应出现highlight.js相关的JS/CSS资源
• 只有进入渲染MarkdownText的页面时，才会加载对应的chunk及highlight.js资源

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