Minimize the bundle size

[artkravchenko]

Hello.

I found out react-konva always imports whole konva package. It highly increases webpack bundle size.
Is it possible to require only necessary sources?

Thank you.

[lavrton]

I think it should be possible to do this manually.

1. Define alias in webpack conf:

{
    // ...
    resolve: {
        alias: {
            'konva': './src/my-konva-version.js'
        }
    }
    // ...
}

1. Make ./src/my-konva-version.js and require insede it only necessary modules:

import Konva from 'konva/src/Core';
// now you have Konva object with Stage, Layer, FastLayer, Group, Shape and some additional utils function
// so there are no shapes (rect, circle, etc), no filters, no d&d support.


// but you can simply add anything you need:
import 'konva/src/shapes/rect';
//now Konva.Rect is available to use

I didn't test that. But in theory, should work. It will be nice to have a better way. Any ideas are welcome.

[matthewoates]

Modules should be separated, and those individual modules should require only what they depend on. I'm doing some preliminary testing with this library and if it works well with my codebase I can take a stab at this.

[bini1988]

To solve this I created the file custom-konva.js with content:

/**
 * In webpack config should be defined:
 *  alias: {
 *    "konva": path.resolve(ROOT, "./custom-konva.js"),
 *  },
 */
var Konva = require("./node_modules/konva/src/Core");

require("./node_modules/konva/src/Animation");
require("./node_modules/konva/src/Tween");
require("./node_modules/konva/src/DragAndDrop");

require("./node_modules/konva/src/shapes/Circle");
require("./node_modules/konva/src/shapes/Line");
require("./node_modules/konva/src/shapes/Path");
require("./node_modules/konva/src/shapes/Rect");
require("./node_modules/konva/src/shapes/Text");

module.exports = Konva;

[ajGingrich]

is there anyway to do this with rollup? It looks the rollup-plugin-alias doesn't currently support aliases node modules. This pull request is still open from june 18th

rollup/rollup-plugin-alias#45

[lavrton]

Just implemented minimal version bundle, so it should work without extra config from bundlers. It is available with react-konva@16.8.7-2.

// load minimal version of 'react-konva`
import { Stage, Layer, Rect } from "react-konva/lib/ReactKonvaCore";

// minimal version has to support for core shapes and filters
// if you want import a shape into Konva namespace you can just do this:
import "konva/lib/shapes/Rect";

Demo: https://codesandbox.io/s/6l97wny44z

More info: https://github.com/konvajs/react-konva#minimal-bundle

Have a question? Ask here.