Query on Tree Shaking in Kotlin-JS Compilation with ES6 in Kotlin 1.9.0: I'm working on a Kotlin-JS...

# javascript

[ankur2037]

Query on Tree Shaking in Kotlin-JS Compilation with ES6 in Kotlin 1.9.0:
I'm working on a Kotlin-JS project where I have two Kotlin files (hello.kt and request.kt) and a specified Gradle configuration. After compiling to JavaScript and using the dev.petuska.npm.publish for publishing, I'm observing an unexpected behavior in the bundle size when importing different functions.

hello.kt

@JsExport
fun SayHi() {
    console.log("hi")
}

request.kt

@JsExport
fun sendRequest() {
    // Code using HttpClient and GlobalScope.launch
    GlobalScope.launch {
        HttpClient(Js).request {
            url {
                this.protocol = URLProtocol.HTTPS
                this.host = "www.test.com"
            }
        }

    }
}

Gradle Configuration:

plugins {
    kotlin("js") version "1.9.0"
    id("dev.petuska.npm.publish") version "3.4.1"
}

dependencies {
    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.0")
    implementation("io.ktor:ktor-client-core:3.0.0-beta-1")
    implementation("io.ktor:ktor-client-js:3.0.0-beta-1")
}


kotlin {
    js {
        binaries.library()
        useEsModules()
        moduleName = "js-kotlin"
        browser {
            webpackTask {
                outputFileName = "js-kotlin.js"
                output.library = "jsKotlin"
            }
          
        }
        generateTypeScriptDefinitions()
    }
}

tasks.withType<KotlinJsCompile>().configureEach {
    kotlinOptions {
        moduleKind = "es"
        useEsClasses = true
    }
}

import in JS project :

import {SayHi} from 'js-kotlin/js-kotlin.mjs'
import {sendRequest} from 'js-kotlin/js-kotlin.mjs'

When I import {SayHi} and {sendRequest} from my compiled module, I'm noticing that the import cost for both imports is similar. I was expecting tree shaking to reduce the size for the {SayHi} import, considering it doesn't use the heavier ktor dependency.
Am I missing something in my configuration that's preventing tree shaking from effectively reducing import cost ?

[Artem Kobzar]

You can also try to add

"sideEffects": false

into the package.json for js-kotlin package

[ankur2037]

tried, still no impact on size.

[Márton Matusek]

I could not make it any smaller either. I was using webpack to bundle a js file. I imported a lodash function for comparison. Lodash was tree-shaken successfully while my kotlinjs package was not.

[ankur2037]

anyone else is facing this ?

[Artem Kobzar]

@Ilya Goncharov [JB] is it possible because of our side-effects during the module initialization?

[ankur2037]

@Ilya Goncharov [JB]: Any ideas of this.

[Ilya Goncharov [JB]]

Sorry, I will check this case, and tell you about results of investigation

[Ilya Goncharov [JB]]

@Artem Kobzar Yes, it looks like because of side-effects during the module initialization.
I get following ending of file

//region block: post-declaration
initMetadataForLambda(sendRequest$slambda, VOID, VOID, [1]);
//endregion
//region block: exports
export {
  SayHi as SayHi,
  sendRequest as sendRequest,
};
//endregion

And if I comment initMetadataForLambda, webpack output will be more expected

[Artem Kobzar]

I think we can discuss it, because I know the way to improve it for the per-module

[ankur2037]

Any ways to overcome this locally ?

[Artem Kobzar]

Let me think: what version of the compiler do you use?

[ankur2037]

1.9.22

[Artem Kobzar]

Hmm, in this case, I can't find any solution. You could try per-file mode in 2.0.0-Beta3 just to check if the tree-shaking works better (or worse).

[ankur2037]

Let me check. Do I need anything separately to use per-file mode?

[Artem Kobzar]

The only restriction is to use ES-modules, but seems like you already use it

[ankur2037]

still no luck with 2.0.0-Beta3 😞 same results.

[Artem Kobzar]

And with the per-file granularity? (you should declare it by yourself inside the gradle.properties like this:

kotlin.js.ir.output.granularity=per-file

[ankur2037]

Oh, i missed adding that earlier. Now tree-shaking seems to be working with per-file granularity. Thanks for help.
But now somehow library .d.ts file is missing,

[Artem Kobzar]

It should contain only one file per-module (we are working on per-file .d.ts right now)

[Artem Kobzar]

Btw, great to hear it. Could you please share how changed the bundle size with the tree-shaking with per-module and per-file?

[ankur2037]

My Js npm library just have Kotlin classes and no other external libraries (other than kotlin-js-std).
per-module config size : 32.kb
per-file config size : 13 kb.
These are gzip size.

[Artem Kobzar]

Nice, thank you for sharing.

[Artem Kobzar]

Could you also please share (just to understand some points for improvements), what size of the project itself? How many classes do you have in the library (or how many lines of code)

[ankur2037]

Sure, we are in process of pushing this change to production. Let me get back with final results.