Kotlin/JS + React enormous bundle size

JavaScript
1

Hi, I followed the tutorial from:
Kotlin/JS React Official Tutorial
And set up my project by example. After including a few libraries like tailwind and our company’s components react library, the size of the bundle after `gradle build’ grew to almost 30 MB.
File size with React + React-dom + Styled components, etc. - 600 KB
File size with the setup + Component library that I use one Component from - 5.4 MB
File size with the setup + Component library + styles - 26 MB

It seemed to me that I did something wrong, so I stepped back, downloaded the repo with the example from the tutorial Kotlin/JS React Official Turorial Github.
When I run gradle build there, the size of the bundle - 654 KB.

So, I have a few questions:

  1. is 600 KB typical size for a new project and if so, why is it so big?
  2. it seems that DCE doesn’t really work if a new component library that I pick up 1 component from occupies 5 MB. Have you experienced something like that and what are the pitfalls?
  3. how do you manage minimizing css (le.g. purgecss), and have you accomplished to minimize some big css to a reasonable size?

This is how I use the Component Library

@file:JsModule("@company/company-ui")
@file:JsNonModule

import react.*

@JsName("Button")
external val companyButton: RClass<ButtonProps>

external interface ButtonProps : RProps {
    var scheme: String
}

and this is how I use the component and the tailwind styles

import react.*
import react.dom.*

import kotlinext.js.require


@JsExport
class App : RComponent<RProps, RState>() {
    init {
        require("tailwindcss/tailwind.css")
    }

    override fun RBuilder.render() {
        companyButton {
            attrs.scheme = "primary"
            +"button"
        }
    }
}
2

You can try to shirnk it using webpack or similar tools!

3

I added a file config.js to webpack.config.d, where I enabled tree-shaking.
However, it doesn’t reduce the size.

I believe this is due to @file:JsModule("@company/company-ui") annotation. As it imports all of the components from the lib, therefore, making them “used” and “non-shakeable”.

As for the css, require embeds css into js itself, so I don’t think it’s possible to minify it.
Maybe, using requireq is just a wrong approach in general, but I didn’t find another one.

4

I was betting that the DCE task of the Kotlin/JS plugin combined with webpack should have removed all the unused stuff.

Tbh, I do not know enough of Kotlin/JS and JS in general to be more helpful on the matter.