About highlight.js tree-shaking

[Athaoo]

问题描述

我在自己的项目中检查依赖包的体积时发现，plugin-highlight 包似乎会将 highlight.js 的 core.js 中的所有语言都引入，导致体积达到1.5M。我查看了 plugin-highlight 的 源代码，发现其中的代码似乎没有提供外部传递 hljs 实例参数的选项，不管我是否传递 init 参数，在实例化插件时都会导入整个 highlight.js。

我想知道是否可以支持自定义语言？例如，我只需要注册 javascript 和 bash，这应该有助于进行 tree-shaking。

export default function highlight({
  init,
}: BytemdPluginHighlightOptions = {}): BytemdPlugin {
  let hljs: typeof H
  return {
    viewerEffect({ markdownBody }) {
      ;(async () => {
        const els = markdownBody.querySelectorAll<HTMLElement>('pre>code')
        if (els.length === 0) return

        if (!hljs) {
          hljs = await import('highlight.js').then((m) => m.default)
          if (init) await init(hljs)
        }

        els.forEach((el) => {
          hljs.highlightElement(el)
        })
      })()
    },
  }
}

参考

根据highlight.js官方的说法
是否可以考虑在 plugin-highlight 中添加支持自定义语言的选项，以便开发者可以只注册部分语言，以减小包的体积，并提高 Tree Shaking 的效果？

Now, it's possible to use the library using either require or import. By default, when you import the main package, all 192 languages will be loaded automatically.

// Using require
const hljs = require('highlight.js');

// Using ES6 import syntax
import hljs from 'highlight.js';

However, importing all our languages will increase the size of your bundle. If you only need a few languages, you can import them individually:

// Using require
const hljs = require('highlight.js/lib/core');

// Load any languages you need
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));

English version(by chatgpt)

Issue Description:

While examining the size of dependency packages in my project, I've noticed that the plugin-highlight package appears to include all languages from highlight.js's core.js, resulting in a substantial size of approximately 1.5M. After reviewing the source code of plugin-highlight, it seems that the code does not provide an option to pass the hljs instance from external sources. Regardless of whether I pass the init parameter, the entire highlight.js library is imported when instantiating the plugin.

I would like to inquire if it's possible to support custom languages. For example, I only need to register javascript and bash, which should help with tree-shaking.

export default function highlight({
  init,
}: BytemdPluginHighlightOptions = {}): BytemdPlugin {
  let hljs: typeof H
  return {
    viewerEffect({ markdownBody }) {
      ;(async () => {
        const els = markdownBody.querySelectorAll<HTMLElement>('pre>code')
        if (els.length === 0) return

        if (!hljs) {
          hljs = await import('highlight.js').then((m) => m.default)
          if (init) await init(hljs)
        }

        els.forEach((el) => {
          hljs.highlightElement(el)
        })
      })()
    },
  }
}

Reference:

According to the official documentation of highlight.js, it's possible to use the library using either require or import. By default, when you import the main package, all 192 languages will be loaded automatically.

// Using require
const hljs = require('highlight.js');

// Using ES6 import syntax
import hljs from 'highlight.js';
However, importing all the languages will increase your bundle's size. If you only need a few languages, you can import them individually:

Copy code
// Using require
const hljs = require('highlight.js/lib/core');

// Load any languages you need
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));

Suggestion:

Could you consider adding an option in plugin-highlight to support custom languages? This would allow developers to register only the languages they need, reducing the package size and improving tree-shaking efficiency.

[github-actions]

This issue is stale because it has been open for 60 days with no activity.