Light Build and Webpack 2 still load all highlight.js languages

Hi folks.

Thank you for this awesome package.

Today I was to raise an issue related wit bundle size.

I am trying to use the light build as you can see in the following code

import SyntaxHighlighter, { registerLanguage } from "react-syntax-highlighter/dist/light"

import foundation from 'react-syntax-highlighter/dist/styles/foundation';

['javascript', 'php', 'xml', 'bash', 'markdown', 'json', 'yaml'].forEach((langName) => {
    const langModule = require(`react-syntax-highlighter/dist/languages/${langName}`);
    registerLanguage(langName, langModule);
});

But when you use Webpack 2 to create a package, the tree shaking logic doesn’t work as you can see in the following image.

I asked in webpack forums, and people mentioned that maybe internally maybe all languages are included.

I tried also trying to exclude with the same result

new webpack.IgnorePlugin(/^\.\/lib\/languages$/, /highlight\.js/),

I would really appreacite any recommendation.

[bmathews]

I believe when you do a dynamic require like that, webpack can’t determine what to include so it just includes the whole folder of the static string part of your require. Try switching to just 7 static imports and see if that solves the problem.

[Kobzol]

@stereokai webpack-bundle-analyzer