Prism: loadLanguages utility causes bloat with webpack

[brian-kephart]

I'm seeing lots of bloat when using the loadLanguages utility in webpack.

~30k:

var Prism = require ('prismjs')
require('prismjs/components/prism-ruby')

~755k:

var Prism = require ('prismjs')
var loadLanguages = require('prismjs/components/index')
loadLanguages(['ruby'])

Numbers are in development mode, non-gzipped. I checked a couple other languages to make sure it wasn't a dependency loading issue with prism-ruby.js, but results were similar with other languages.

[mAAdhaTTah]

loadLanguages is intended for using in Node specifically. We should probably make this clear in the documentation. It imports dynamically, so Webpack sees that as "import everything that could possibly go here", which is all the languages.

I don't know as we have a good "story" for bundlers, tbh. Maybe a babel plugin?

[Golmote]

For future reference, see related #1409.

[HarryCaveMan]

Would loading a few dependencies up front and then using dynamic imports to specific files possibly avert this bloat? Something like this:

import React from "react";
import Prism from "prismjs/components/prism-core";
//other languages depend on these
import "prismjs/components/prism-clike";
import "prismjs/components/prism-c";
import "prismjs/components/prism-java";

class CodeBlock extends React.Component {
.
.
//try to load prism component for language
import("prismjs/components/prism-"+props.language);
.
.
render(){...}
}
export default CodeBlock;

Is there a dependency graph for all the language packs available somewhere? Importing clike, c, and java helps support most languages but there are a lot of other dependencies. It would be awesome to know the bare minimum (i.e which imports are needed up front for all dynamic imports to work like this) or for a language pack to import the pack(s) it extends automatically if it/they hasn't been imported. Right now I just use this and a try/catch that defaults it to JavaScript if it can't import because of dependencies.

[Golmote]

The dependency graph can be inferred from the data from components.js or components.json. Here is a quick'n'dirty example of the dependency graph in latest release 1.14: https://codepen.io/anon/pen/mLKqPN Note that this does not take "peer dependencies" into account (discussed in #1393).

[mAAdhaTTah]

Just to be clear, to anyone who wants to pick this up, the "good first issue" here is to add documentation.

[mAAdhaTTah]

The babel plugin is ready here: https://www.npmjs.com/package/babel-plugin-prismjs