Reduce bundle size

[ajGingrich]

I realize that highlight.js has a very large bundle but I suggest passing an array prop to define the languages they want to import. My highlight.js currently takes up 539kb parsed size and 188kb gzipped. This is over half of my bundle and six times more than react.

I should be able to work on this in the upcoming weeks.

[mbj36]

@ajGingrich We have this option, check out our docs - https://react-highlight.neostack.com/docs/optimisation

[ajGingrich]

@mbj36

I am already using this in my code and I still have the large bundle size.

<Highlight innerHTML={true} languages={['javascript', 'C']}>
    {post.body}
</Highlight>

Does this not work with innerHTML?

[mbj36]

Did you configured your webpack as per the docs ?

[ajGingrich]

Sorry to keep opening and closing this, I've got a deadline at work so I thought I wouldn't be able to get to it anytime soon. Yes, I configured it like in the docs and I can make it work if I copy it locally but I need to remove this line

import hljs from 'highlight.js';

and replace it with:

import hljs from 'highlight.js/lib/highlight';

['languages', 'i', 'want'].forEach((langName) => {
  // Using require() here because import() support hasn't landed in Webpack yet
  const langModule = require(`highlight.js/lib/languages/${langName}`);
  hljs.registerLanguage(langName, langModule);
});

taken from here

[amje]

Did you configured your webpack as per the docs ?

There is a mistake in the docs. We have to import a different file:

import Highlight from 'react-highlight/lib/optimized';
// instead of
import Highlight from 'react-highlight';

[tony2nite]

There is some more info on optimising the build in this closed PR #35. Would be great if this info was more available in the docs.

For anyone looking to optimise on the latest version of Gatsby, here's an approach that seems to work.

As mentioned above, import the optimised package when using React Highlight then specify the language available.

import Highlight from 'react-highlight/lib/optimized'

return () => (
  <Highlight languages={['javascript']}>{someCode}</Highlight>
)

Then in gatsby-node.js set up the following:

exports.onCreateWebpackConfig = ({ stage, actions, plugins }) => {
  if (stage === 'build-javascript') {
    actions.setWebpackConfig({
      plugins: [
        plugins.contextReplacement(/highlight\.js\/lib\/languages$/, new RegExp(`^./(javascript)$`)),
      ],
    })
  }
}