How to modularize react-plotly.js?

[hyperknot]

The main plotly.js repo goes to great length about how to modularise the plotly code and avoid having the huge bundle with Mapbox, etc.

This library seems to be the official "basis of Plotly's React component suite", yet it's just loading the full plotly.js code.

react-plotly.js/src/react-plotly.js

Line 2 in 6fe45a7

import Plotly from 'plotly.js/dist/plotly';

This makes the bundle super big, Webpack super slow, and the minification time skyrocket as the codebase is simply just huge.

Since there is a whole article about modularizing plotly, it's strange to me that this lib requires the full build.

What is the best way to use react-plotly with a more minimal plotly bundle?

[m90]

@hyperknot You can do what the README is proposing here: https://github.com/plotly/react-plotly.js#customizing-the-plotlyjs-bundle

[hyperknot]

Thanks, I see it, actually I figured out the same thing. So I'm just using a CDN bundle + factory(window.plotly) and it works really well.

…

On 2018. Aug 23., Thu at 8:50, Frederik Ring ***@***.***> wrote: @hyperknot <https://github.com/hyperknot> You can do what the README is proposing here: https://github.com/plotly/react-plotly.js#customizing-the-plotlyjs-bundle — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#98 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAeKj526pSp8SkaSxS3HKgZk3wxP-CDRks5uTlCqgaJpZM4WHMIt> .

[Rolandisimo]

Had an issue trying to modularise plotly in the form of react-plotly not being able to find var _plotly = require('plotly.js/dist/plotly');. However, I'm using the same approach you did except for the CDN. Instead added plotly.js-basic-dist to deps.

import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);

Now I get this issue:

Any ideas?

[nicolaskruchten]

Are you importing from "react-plotly.js" anywhere? If you're only importing from the factory, you shouldn't see this error, as the only line that refers to that missing file is https://github.com/plotly/react-plotly.js/blob/master/src/react-plotly.js#L2

[Rolandisimo]

That's all I'm doing. Note, that I created d.ts files for both imports since there are no typings available yet.

Maybe it has to do something with the build? Is there anything I should take into account with such combination of packages? Didn't find any info relevant to my case.

[nicolaskruchten]

I'm not sure what more to tell you without seeing a github repo that replicates the problem... if it's not compiling the react-plotly.js file, it shouldn't be trying to load plotly.js/dist/plotly.

[Rolandisimo]

Ok, so I figured out the issue. It was because react-plotly.js was being bundled in the 'dependencies`. For my case vendor deps are handled like this:

/**
 * Given an array of files this will produce an object which contains the values for the vendor entry point
 */
function makeVendorEntry(config) {
    const packageJson = require('../package.json');
    const vendorDependencies = Object.keys(packageJson['dependencies']);

    const vendorModulesMinusExclusions = vendorDependencies.filter(vendorModule =>
        config.mainModules.indexOf(vendorModule) === -1 && config.modulesToExclude.indexOf(vendorModule) === -1);

    return vendorModulesMinusExclusions;
}

exports.makeVendorEntry = makeVendorEntry;

Instead I moved react-plotly.js to the devDependencies and it works fine.

[Rolandisimo]

Should this issue be closed?

[lidaof]

@Rolandisimo , I have this in my devDependency, while this still added 800KB in bundle. is this normal?
Thanks.

[Rolandisimo]

@lidaof It all comes down to how you bundle your dependencies. Maybe you're bundling unnecessary modules or/and simply bundling not minimized/not uglified bundles. Check prod bundles and see if you add the same weight. If not customsied, plotly bundles are heavy. Anyways, too many variables, hard to say anything conclusive.

[lidaof]

i see, thanks anyways! @Rolandisimo

[sdpetrides]

npm install react-plotly.js plotly.js-cartesian-dist

package.json

  "dependencies": {
    ...
    "plotly.js-cartesian-dist": "^1.55.2",
    "react": "^16.8.6",
    "react-plotly.js": "^2.4.0",
    ...
  },

In components...

import Plotly from "plotly.js-cartesian-dist";
import createPlotlyComponent from "react-plotly.js/factory";

const Plot = createPlotlyComponent(Plotly);

Worked for me 👍