https://kotlinlang.org logo
Join Slack
Powered by
What are some tips and tricks to reduce the Kotlin...
# javascript
m
What are some tips and tricks to reduce the Kotlin/JS production bundle size? There is a lot of scattered tips across the web (and here too) but some of them aren't applicable anymore so I'm wondering what actually works on recent Kotlin versions kodee loving
☝️ 1
t
1. 
target="es2015"
2. Inline anonymous functions 3. Granularity - 
whole-program
(if app is solid) or 
per-file
if you use lazy modules 4. Disable redundant polyfills More options - here 1. Vite bundler (instead of Webpack) a. (depends on your case)
🙏 1
m
@turansky I don't know if I'm stupid or not, but the granularity options never worked for me for some reason Maybe I'm doing something stupid (I'm adding 
kotlin.js.ir.output.granularity=insertgranularityhere
to my 
gradle.properties
) but no matter which granularity I choose the bundle size doesn't change at all, even if I try clearing the cache with 
./gradlew cache
it doesn't change anything The options that you provided in Gradle did work however kodee loving (I was already using es2015) I did try the vite compiler (this one by @CLOVIS https://vite-kotlin.opensavvy.dev/guides/index.html) but sadly I don't know why it doesn't work for me (the plugin says that it doesn't have permission to create the 
node_module
and, when the folder is manually created, then vite complains that it can't find a module
Copy code
* What went wrong:
Execution failed for task ':viteCompileKotlinProd'.
> java.nio.file.FileSystemException: L:\KotlinJSBundleSizeTests\build\vite\prod\node_modules: O cliente n├úo tem o privil├®gio necess├írio
Copy code
PS L:\KotlinJSBundleSizeTests> ./gradlew viteBuild

> Task :viteBuild FAILED
failed to load config from L:\KotlinJSBundleSizeTests\build\vite\prod\vite.config.mjs
error during build:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite-plugin-commonjs' imported from L:\KotlinJSBundleSizeTests\build\vite\prod\node_modules\.vite-temp\vite.config.mjs.timestamp-1761445363010-e1952b5fcb28b.mjs
    at packageResolve (node:internal/modules/esm/resolve:845:9)
    at moduleResolve (node:internal/modules/esm/resolve:918:18)
    at defaultResolve (node:internal/modules/esm/resolve:1148:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:528:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:497:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:231:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:97:39)
    at link (node:internal/modules/esm/module_job:96:36)

[Incubating] Problems report is available at: file:///L:/KotlinJSBundleSizeTests/build/reports/problems/problems-report.html

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':viteBuild'.
> Process 'command 'L:\.gradle\nodejs\node-v22.0.0-win-x64\node.exe'' finished with non-zero exit value 1
What I'm trying to do right now is replacing some dependencies with some "lightweighter" alternatives (example: Ktor -> native fetch with suspend) however some are harder to replace (Compose's HTML runtime is big, ouch!) Currently the bundle is ~1MB, 275KBs gzipped One thing that I noticed that can decrease the bundle size is surprise, updating Kotlin version. Currently I'm using Kotlin 2.2.0 however I did try a difference between Kotlin 2.2.0 and Kotlin 2.2.21 and Kotlin 2.2.21 created bundles that were 200KBs smaller (but I haven't updated my project to 2.2.21 yet)
j
• Don't use coroutines • Don't use serialization • Don't use collections
t
@MrPowerGamerBR Vite bundler and all bundle optimizations by default in application plugin 😉
m
• Don't use coroutines
• Don't use serialization
• Don't use collections
at this point it is better to not use Kotlin /j
j
I agree!
If you care about bundle size you'd use Svelte or the like. If you care about code reuse you'd use Kotlin. They're diametrically opposed.
m
I can't use other languages, if I do the Kodee plushie that's behind me may kill me /j the real reason is that I enjoy Kotlin and I don't mind the increased bundle size (Kotlin my beloved)
but at the same time I was wondering if there's was ways to decrease the bundle size a bit (it ain't a deal breaker that it is 1MB to me but trying to get it smaller doesn't hurt)
(of course, I could rewrite everything into JavaScript but then what's the fun in that :P)
@turansky weirdly enough, when using the 
io.github.turansky.kfc.application
plugin I got a larger bundle size than without it With the plugin: 819 KB Without the plugin: 743 KB (The project is very simple, meant only to test how much each dependency was taking up in the final bundle, so the code is a bit nonsensical: https://gist.github.com/MrPowerGamerBR/eae9c8f74e771c090e1eb91beafcb500)
t
In KFC we use 
per-file
for lazy modules. But 
whole-program
required in your case for less bundle.
Probably biggest possible optimization, which I expect - possibility to disable inlining of extensions (especially collection extensions) from 
kotlin-stdlib
c
I did try the vite compiler (this one by @CLOVIS https://vite-kotlin.opensavvy.dev/guides/index.html) but sadly I don't know why it doesn't work for me (the plugin says that it doesn't have permission to create the 
node_module
and, when the folder is manually created, then vite complains that it can't find a module
What OS are you on? I've heard of people having that issue on Windows but I haven't been able to fix it
m
@CLOVIS Windows 11 😞 @turansky's plugin did work fine on Windows 11 however
c
m
Haven't tried that yet, will try later @CLOVIS 🙂
3 Views
Open in Slack
PreviousNext
Powered by