Reduce size of react-syntax-highlighter dependency #9282
Labels
Milestone
Comments
LarsDenBakker
changed the title
|
@LarsDenBakker I will buy you a beer (or the beverage of your choice) if you can do something about this. Coming to Amsterdam in April and can actually follow through on this threat! |
|
I was thinking something like this could help const ReactSyntaxHighlighter = lazy(
() =>
new Promise((resolve, reject) => {
import('react-syntax-highlighter').then(mod => {
const { PrismLight } = mod;
PrismLight.registerLanguage('jsx', jsx);
PrismLight.registerLanguage('bash', bash);
PrismLight.registerLanguage('css', css);
PrismLight.registerLanguage('html', html);
PrismLight.registerLanguage('tsx', tsx);
PrismLight.registerLanguage('typescript', typescript);
resolve({ default: PrismLight });
});
})
);Followed with <Suspense fallback={<div />}>
<ReactSyntaxHighlighter
padded={padded || bordered}
language={language}
useInlineStyles={false}
PreTag={Pre}
CodeTag={Code}
lineNumberContainerStyle={{}}
{...rest}
>
{format ? formatter((children as string).trim()) : (children as string).trim()}
</ReactSyntaxHighlighter>
</Suspense>The only thing is that this might not work great in SSR so there's extra attention needed for SSR to work |
|
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks! |
|
@hipstersmoothie If it's a non-breaking change and helps with perf we'd definitely merge that. If it's breaking, we can evaluate -- perf is top priority in 6.x and I'm open to either (1) breaking semver, or (2) jumping directly to 7.0 if we can get major perf wins through breaking changes |
|
I think esm + this would get a nice win with no breaking changes. Should have something next week |
|
At each error in storybook since 5.3 version, I have this very very long log in console. |
|
@jd-carroll yes, 6.2 is now tree shaking and the bundle sizes are dramatically reduced. I think there might be more to do here, so I'm leaving the issue open |
4 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When built, the manager + preview are around 2.6 MB excluding the user's code. Even for a development tool, this is quite a hefty amount.
I've been investigating different ways this can be reduced, and by far the largest contributor to the bundle size is
react-syntax-highlighter. It's an astronomical 1.2 MB 😲 https://bundlephobia.com/result?p=react-syntax-highlighter@12.2.1This is a picture of just the manager, broken down into dependencies by size:
highlight.jsandrefractorare both dependencies ofreact-syntax-highlighter, and as you can see the configuration for many different languages is loaded.The docs explain the size can be reduced by using a light build or an async build.
The async build looks ideal and doesn't introduce breaking changes, but I don't know if you guys want to include dynamic imports in storybook. The light build can also work, but might require the user to load the languages or provide configuration of languages to include.
I'm happy to work on this if this is something you guys want.
The text was updated successfully, but these errors were encountered: