Hi Everyone, we are developing a Kotlin Multiplatf...

# javascript

[Márton Matusek]

Hi Everyone,
we are developing a Kotlin Multiplatform browser SDK that will be consumed by native clients as well. Our JavaScript bundle size is around 1.69MB. We would like to expose the SDK as a single .js file. This bundle size is huge unfortunately. Do you have any recommendations on what could be done in this case to reduce the file size. es2015 target is set. Shouldn't tree-shaking be happening automatically?
Thank you!

[turansky]

Shouldn't tree-shaking be happening automatically?

For library?

[Márton Matusek]

for a single js executable created with jsBrowserDistribution gradle task

[turansky]

we are developing a Kotlin Multiplatform browser SDK

Is it open source?

[Márton Matusek]

unfortunately no yet, but probably will be

[turansky]

Which libraries do you use?

[turansky]

How much classes/interfaces do you have?

[turansky]

Also you can use https://www.npmjs.com/package/webpack-bundle-analyzer
to analyze source of problem

[Márton Matusek]

these ones:

val commonMain by getting {
            dependencies {
                implementation(libs.kotlinx.datetime)
                implementation(libs.kotlinx.coroutines.core)
                implementation(libs.okio)
                implementation(libs.kotlinx.serialization.json)
                implementation(libs.ktor.client.core)
                implementation(libs.ktor.client.content.negotiation)
                implementation(libs.ktor.serialization.kotlinx.json)
                implementation(libs.ktor.serialization)
                implementation(project.dependencies.platform(libs.cryptography))
                implementation(libs.cryptography.core)
                implementation(compose.runtime)
                implementation(compose.foundation)
                implementation(compose.material)
                implementation(compose.ui)
                implementation(compose.components.resources)
                implementation(compose.components.uiToolingPreview)
            }
        }
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test"))
                implementation(libs.ktor.client.mock)
                implementation(libs.kotest.framework.engine)
                implementation(libs.kotest.assertions.core)
            }
        }
        val androidMain by getting {
            dependencies {
                implementation(libs.kotlinx.coroutines.android)
                implementation(libs.ktor.client.android)
                implementation(libs.androidx.core.ktx)
                implementation(libs.cryptography.provider.jdk)
                implementation(libs.startup.runtime)
                implementation(libs.androidx.lifecycle.common)
                implementation(libs.androidx.lifecycle.process)
                implementation(libs.androidx.appcompat)
                implementation(libs.compose.ui.tooling.preview)
                implementation(libs.androidx.activity.compose)
            }
        }

        val androidUnitTest by getting {
            dependencies {
                implementation(kotlin("test"))
                implementation(libs.mockk.android)
            }
        }
        val androidInstrumentedTest by getting {
            dependencies {
                implementation(kotlin("test"))
                implementation(libs.mockk.android)
                implementation(libs.androidx.runner)
                implementation(libs.androidx.test.junit)
                implementation(libs.kotest.assertions.core)
                implementation(libs.kotlinx.coroutines.test)
                implementation(libs.okio.fakefilesystem)
            }
        }
        iosMain {
            dependencies {
                implementation(libs.ktor.client.apple)
                implementation(libs.cryptography.provider.apple)
            }
        }
        iosTest {
            dependencies {
                implementation(kotlin("test"))
            }
        }

        val jsMain by getting {
            dependencies {
                implementation(libs.ktor.client.js)
                implementation(libs.kotlin.wrapper.browser)
                implementation(libs.cryptography.provider.webcrypto)
                implementation(libs.kotlinx.html.js)
            }
        }
        val jsTest by getting {
            dependencies {
                implementation(kotlin("test-js"))
            }
        }

[Márton Matusek]

and this is the source-map-explorer output:

[Márton Matusek]

image.png

[Márton Matusek]

these are only the dependencies

[Márton Matusek]

image.png

[Márton Matusek]

maybe it is realistic but still very large

[turansky]

You can use fetch instead of Ktor - it will reduce bundle size

[turansky]

And bundle analazer will give you full picture

[Márton Matusek]

great, thank you!

[Márton Matusek]

is ktor client not worth using in the browser, just in Node.js?

[turansky]

Depends on your goal

[turansky]

If you use it only for simple requests - suspend fetch (with cancellation support) probably is what you need 😉