Hello! I am trying to load the JS generated from Kotlin as multiple files, as it is large. I tried i...

# javascript

[Charann]

Hello!
I am trying to load the JS generated from Kotlin as multiple files, as it is large. I tried it using webpack's splitChunks option(I have used it previously to bundle JS from TS). Wondering If I have to make any changes specific to Kotlin. I am not sure of how the Kotlin compilation process is mapped with webpack, I assume kotlin generates separate JS files for every file I have created in Kotlin(and not as a single file for a module) and then uses webpack as a bundler. (I assume since I am not sure about how kotlin to JS compilation process) I have attached a sample configuration. Please let me know If am doing anything wrong or if I miss anything

config.optimization= {
   splitChunks: {
       cacheGroups: {
           commons: {
               test: /.*test.*/,
               name: 'testing',
               chunks: 'all',
           }
       }
   }
}

[Artem Kobzar]

@Ilya Goncharov [JB] ^^

[Ilya Goncharov [JB]]

Hi, Kotlin by default generates file per module, but there is possibility to generate module per file. Use it in gradle.properties
kotlin.js.ir.output.granularity=per-file
Webpack by default has optimization block as well for split chunks - https://webpack.js.org/plugins/split-chunks-plugin/

[Charann]

Hi @Ilya Goncharov [JB]
I tried adding 'per-file' option to graddle.properties, still its not working. Also just to confirm, I have referred to Kotlin docs and a few recent discussions and 'per-file' option was not listed anywhere, so just confirming whether it is still available or am I missing something else.

[Ilya Goncharov [JB]]

Which version do you use?

@Artem Kobzar do you know, per-file option works fine only for es2015 or it should work for commonjs as well?

[Charann]

I am using Kotlin version 1.9.20
Also, am using ES modules. I have added "useEsClasses = true" and "useEsModules()". Hope I am not missing any other configurations

[Artem Kobzar]

As far as I remember the option is available only starting from 2.0.0-Beta2

[Charann]

I have tried changing the version to '2.0.0-Beta2' and also added 'per-file' option, but it is not working for me. Let me know if I have to do any further configurations. My primary goal is to create chunks in JS (instead of one large file) by grouping certain JS files, so that I do not end up loading a large file at once. I am trying with this split chunks options as webpack will handle common dependencies, but If there is any other better way for handling this kindly let me know.

[Artem Kobzar]

I believe the main work should be done on the webpack configuration side for such a task. Even with the default (per-module granularity), you can split your project at least by modules with separated common chunks, but this work could be done only inside the webpack config.

[Ilya Goncharov [JB]]

In 1.9.20 there is per module granularity. So it can work with webpack split chunks. But you should be sure that your entry module is not big.

[Charann]

Thank you both for your insights, my entry module is big and that could be a potential problem, will work on it. Meanwhile, if there is anything I could do it achieve module per file, please let me know

[Artem Kobzar]

Also, just to notify you, per-file is an under-development feature right now, and we plan to have it as an experimental in 2.0.
If you setup per-file granularity and have some problems with it - please ping me in this chat

[Artem Kobzar]

At least for now, the d.ts files that generated per each Kotlin-file are broken

[Charann]

I fear I have misunderstood the granularity context, just to confirm, per-file granularity refers to generating separate JS module for each Kotlin file and per-module granularity refers to generating a JS module for a Kotlin module. Am I right?

[Artem Kobzar]

For now, we have 3 granularities:
• whole-program: generate single file with all the code merged inside
• per-module: generate a file for each Kotlin-module
• per-file: generate a file for each Kotlin-file

[Charann]

Got it! So, per-file is the thing I am trying to get. I have changed the Kotlin version to '2.0.0-Beta2' and added 'per-file' configuration. Now I expected a js file for each Kotlin file, but thats not the case. Am I missing something?

[Artem Kobzar]

Could you please show your build.gradle.kts ? There should be also somthing like useEsModules call

[Charann]

I have used useEsModules

[Artem Kobzar]

Could you also try to make ./gradlew clean , build your project, and check what do you have inside your build/js/packages/NAME_OF_YOUR_MAIN_MODULE/kotlin/ directory? There should be a lot of files and directories, that represent your modules and packages inside the project.

[Charann]

Yes I have dependency packages as separate js files but all my files in Kotlin entry module's files are combined to be in the same file.

[Artem Kobzar]

Hmmm, and it's weird, because you should have your packages as a separated directories with a lot of files

[Charann]

build/js/packages/NAME_OF_YOUR_MAIN_MODULE/kotlin/ this directory only has mjs files, typescript declaration files and map files and it does not even have a single directory

[Artem Kobzar]

It means that your project was compiled in per-module instead of per-file . I'm playing around the problem and will come back to you if I find something

[Artem Kobzar]

You use the 2.0.0-Beta2 right?

[Charann]

I again cleaned, updated the gradle.properties file, re-built and now "build/js/packages/NAME_OF_YOUR_MAIN_MODULE/kotlin/" contains directories with package names and files inside it and yes I use the version 2.0.0-Beta2

[Artem Kobzar]

this is what we need, seems like the cache was not invalidated after the granularity changes, so, we need to fix it on our side. So, this is the per-file granularity.

[Charann]

Thank you so much @Artem Kobzar