https://kotlinlang.org logo
Join Slack
Powered by
So I’ve been playing with some Kotlin/JS and I now...
# javascript
r
So I’ve been playing with some Kotlin/JS and I now have my tiny mostly empty app served as a 30Mo js file (5Mo gzipped). Anyone has examples / know how to split that huge thing into different files? For example, I was thinking maybe I could import the right version of kotlin.js and maybe some dependencies in my index html, so that I only have to redownload my actual app code on updates. https://github.com/Ribesg/Kita/blob/11643d13126867946bd7d2113d09e8376ca9fa22/modules/client/client-web/build.gradle.kts#L11-L20
I don’t even know if you can configure webpack somehow, if it looks for the standard config file name in the project or something
How do you even minify?
b
You can append webpack config via your custom js files in webpack.conf.d directory
Minification needs to be configured this way as well at the moment
r
Is there some documentation somewhere about that 
webpack.conf.d
directory? It’s not documented by Webpack
b
It's kotlin gradle plugin specific
r
I’m using the 
kotlin("js")
plugin, I think it’s a thing of 
kotlin("frontend")
I’m kinda lost with all those Kotlin/JS plugins
b
No, kotlin("js") behaves similarily to kotlin("multiplatform")
r
kotlin("frontend")
looks dead
b
It's deprecated in favour of kotlin("js")
r
I see a lot of features in kotlin-frontend that I can’t find in kotlin-js, like I don’t even see how to set production mode
b
Yes, thay're still being ported
r
I thought there was just no documentation but there is actually no feature either 😛
b
AND no documentation
So far all the documentation in in this channel 😄
😄 1
r
It looks like it’s reading what’s in my 
webpack.conf.d
folder because it crashes. Looks like you can’t do 
config.module.mode = "production";
b
You can. Re-inspect your code and see how it's appended
r
Ok, it was 
config.mode
. I found the 
webpack.config.js
which gets generated from the gradle build + webpack.conf.d directory files. It’s in a weird place, it’s in the root project build folder while my js project is in a sub-sub-subproject
Got down from 30.3Mo to 27.6Mo in production mode. Yay? 😶
b
You need DCE to go even further
googke kotlin-dce-js
i
@ribesg Now source maps are inlined in bundle For production, you can use in 
webpack.config.d
config.devtool = 'source-map'
or even disable source maps, if you don’t need It can improve your bundle size
webpack.config.d
is directory, which Kotlin/JS plugin uses for additional configuration of 
webpack
. You can put in it any 
.js
files, and they will be inlined in final 
webpack.config.js
So you can override each property of 
webpack
and even write your own webpack configuration, if you want Configuration object is available with name 
config
in 
js
files
r
Thanks, I just didn’t know sourcMaps were on by default. Without them I’m down to 10Mo (1.4 gzipped) which is much better. I still want to split some dependencies in different files if possible, I guess I can somehow do whatever I want using Webpack
s
Use DCE
r
I’m trying to use the DCE plugin but I’m kinda stuck at the lack of documentation here. Anyone got an example of it working with the new JS plugin? I only added the plugin to my subproject and just get this error:
Copy code
> Task :modules:client:client-web:runDceKotlin FAILED
error: duplicate target file will be created for '$projectDir/build/js/node_modules/core-js/index.js' and '$projectDir/build/js/node_modules/text-encoding/index.js'
b
Yeah, that's a bug. Re-run the build when you get this error and it just works
r
No I get that every time
b
Weird. try creaning and running build 3 times in a row
r
I ran this:
Copy code
rm -rf **/.gradle **/build
gradle :modules:client:client-web:build
gradle :modules:client:client-web:build
gradle :modules:client:client-web:build
3rd build still failed. I pushed my current state at https://github.com/Ribesg/Kita/tree/feature/init
i
@ribesg Now there is some bugs with Kotlin/JS plugin + DCE Yes, there is bug with DCE + 3rd party libraries If you have npm dependencies, it makes sense to extract them to other gradle module (w/o dce, maybe special 
npm-dependencies
module), it can help
r
@Ilya Goncharov [JB] I added another module with my npm dependencies only, but it does not build:
Copy code
> File '/Users/ribesg/IdeaProjects/Kita/build/js/packages/kita-client-web-npm-dependencies/kotlin/kita-client-web-npm-dependencies.js' specified for property 'entry' does not exist.
i
Can you try to set 
nodejs
target for this module? It is matter only for download npm dependencies by this module, you don’t need to bundle it
r
A 
browser
target can depend on a 
nodejs
target?
Looks like it just works
Now I don’t know if DCE actually ran/worked
It had absolutely no impact on the final js file size
I have a new kotlin-js-min folder in the module’s build folder but that’s it, no change on the final file in the distributions folder
i
r
Oh wow you actually have to configure everything, ok. Thanks
i
Maybe you can find useful https://github.com/ilgonmic/kotlinjs-multi-module/tree/d9fb9d34e93f27fa29d9a487854c90a61edada78 Main magic is in 
app/webpack.config.d
There is override of entry point for webpack Unfortunately there is no DCE support out-of-box
👍 1
r
I finally got it to work, I’m down to 617Ko (gzipped) https://github.com/Ribesg/Kita/tree/feature/init/modules/client
g
@ribesg it still too much. A lot of unused code is still here. Please vote for https://youtrack.jetbrains.com/issue/KT-30022
👍 4
5 Views
Open in Slack
PreviousNext
Powered by