Code Monkey home page Code Monkey logo

Comments (8)

mithi avatar mithi commented on June 8, 2024

Screen Shot 2020-07-31 at 12 50 53 AM

from hexapod.

mithi avatar mithi commented on June 8, 2024

Attempting to reduce bundle size further
#55

from hexapod.

mithi avatar mithi commented on June 8, 2024

Base

Screen Shot 2020-07-31 at 2 07 34 AM

After using custom bundle

import Plotly from "plotly.js/lib/core";
import Scatter3d from "plotly.js/lib/scatter3d"
import Mesh3d from "plotly.js/lib/mesh3d"

import createPlotlyComponent from "react-plotly.js/factory";
Plotly.register([Scatter3d, Mesh3d]);

const CustomPlotly = createPlotlyComponent(Plotly);
export default CustomPlotly;

Screen Shot 2020-07-31 at 1 59 52 AM

After splitting custom bundle

Screen Shot 2020-07-31 at 4 57 38 PM

When you split the core plotly module from others

        import("plotly.js/lib/core").then(Plotly => {
            Plotly.register([Scatter3d, Mesh3d])
            this.Plot = createPlotlyComponent(Plotly)
        })

from hexapod.

mithi avatar mithi commented on June 8, 2024

Base

Screen Shot 2020-07-31 at 2 04 05 AM

Custom Bundle

Screen Shot 2020-07-31 at 1 56 32 PM

Custom Bundle Split

89007002-7bfd8e80-d33a-11ea-9712-805a4a537ffa

from hexapod.

mithi avatar mithi commented on June 8, 2024

This is the result of splitting to two bundles 312.71 KB and 115.61 KB

Screen Shot 2020-07-31 at 5 59 56 PM Screen Shot 2020-07-31 at 5 51 32 PM
. .

from hexapod.

mithi avatar mithi commented on June 8, 2024

With a 414kb bundle this is the performance

Screen Shot 2020-07-31 at 4 26 48 PM Screen Shot 2020-07-31 at 4 27 46 PM
. .

With 450kb bundle this is the performance

Screen Shot 2020-07-31 at 6 11 12 PM Screen Shot 2020-07-31 at 6 14 14 PM
. .

from hexapod.

mithi avatar mithi commented on June 8, 2024

Netlify Performance (450kb)

Screen Shot 2020-07-31 at 6 21 10 PM Screen Shot 2020-07-31 at 6 22 06 PM Screen Shot 2020-07-31 at 6 23 21 PM
. . .

Netlify Custom Split Bundle Performance (300kb + 115kb)

Screen Shot 2020-07-31 at 6 52 33 PM Screen Shot 2020-07-31 at 6 56 26 PM Screen Shot 2020-07-31 at 6 47 43 PM
. . .

from hexapod.

mithi avatar mithi commented on June 8, 2024

The best way to reduce bundle size is to use a smaller library such as
https://github.com/mithi/bare-minimum-3d

from hexapod.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.