Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reduce size of react-syntax-highlighter dependency

See original GitHub issue

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.1

This is a picture of just the manager, broken down into dependencies by size: Screen Shot 2019-12-31 at 4 50 01 PM

highlight.js and refractor are both dependencies of react-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.

Issue Analytics

State:
Created 4 years ago
Reactions:7
Comments:9 (5 by maintainers)

Top GitHub Comments

2reactions

hipstersmoothiecommented, Sep 5, 2020

I think esm + this would get a nice win with no breaking changes. Should have something next week

2reactions

shilmancommented, Dec 31, 2019

@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!

Top Results From Across the Web

react-syntax-highlighter - npm

I wanted to provide out of the box code styling with my modules without requiring awkward inclusion of another libs stylesheets. The styles...

react-syntax-highlighter | Yarn - Package Manager

Fast, reliable, and secure dependency management.

react-syntax-highlighter - npm package - Snyk

Async Build For optimal bundle size for rendering ASAP, there's a async version of prism light & light. This versions requires you to...

How I can Highlight the code line in page with React.js in file ...

js as a dependency. Instead of import 'highlight.js/styles/github.css'. you could write:

React Syntax Highlighter Demo

function createStyleObject(classNames, style) { return classNames.reduce((styleObject, className) => { return {...styleObject, ...style[className]}; }, {}) ...