Lazy load D3 library ReactJS

chart.js

// chart.js

import React from "react";
import * as d3 from "d3"; // big dependency 

const data = [30, 86, 168, 281, 303, 365];

export default class D3Chart extends React.PureComponent{
    constructor(props) {
        super(props);
        this.canvas = React.createRef();
    }
    componentDidMount() {
        this.drawBarChart(data);
    };
    drawBarChart(data)  {
        d3.select(this.canvas.current)
            .selectAll("div")
            .data(data)
            .enter()
            .append("div")
            .style("width", function(d) { return d + "px"; })
            .style("background-color", "steelblue")
            .style("margin", "1px")
            .text(function(d) { return d; });
    };
    render(){
        return  <div ref={this.canvas} className="canvas"></div>;
    }
};

index.js

// index.js

import D3Chart from "../components/d3chart"

// Further down in the render method 
<D3Chart/>