Hi here, question about code splitting. We have a...
# javascript
b
Hi here, question about code splitting. We have a scenario where we're loading some kotlin produced JS in a multiplatform project on machine that reloads the js file and has issues with super low memory. That's less important, just context. To that end having the giant JS file caused issues, so we broke it up by defining optimization.splitChunk values in our webpack file. All good, it's split up. But now I'm confused what the right way to enter into those files is. Normally I'd have an index.js file for exporting items and use that as my entry point, defining it as entry in the webpack and as main in the package.json, but we don't have that (or at least don't have that currently) with our Kotlin project. What is the correct setup for defining the entry in a chunked Kotlin project?
t
b
yes, i was actually looking into that. Does that automatically produce the entry file? It's unclear what would go in main for a package.json file and what would go into entry on a webconfig
or does it somehow magically make those unnecessary?
our setup isn't such that splitting on namespace quite makes sense, the bulk of our size comes from kotlin libraries (in particular serialization and coroutines). Is there a way to split based on just general size as opposed to namespace or is how that library works primarily focused on those kinds of splits?
I saw in the example how it can be consumed in a test but it's unclear how it would be used by an external consumer of the library that wasn't kotlin
t
Plugin create additional webpack entries - no magic :)
Do you want to save namespaces?
b
that would be preferred if possible.
ideally what i'm looking for is something that splits what currently is a single file into multiple, then produces an index.js file that would recombine them in my consuming client in a way that a require call would still work. Or something that does something similar
so if i had something like
var foo = require('myLibrary');
var bar = foo.myNamespace1.mySubnamespace.myObject();
that that would continue to work. It's unclear with the current design how I would be able to know how to consume that. It appears I would have to change it to something like
var foo = require('myLibrary').file1;
var bar = foo.myNamespace1.mySubnamespace.myObject();
and would need to update my package.json file from something with a line like
"main": "build/distributions/main.js"
"files": [
"build/distributions/main.js"
]
to
"main": ???
"files": [
"build/distributions/file1.js"
"build/distributions/file2.js"
]
I'm assuming it would know how to then make the appropriate connections if myObject called something that was actually in file2.
(sorry, need to step away for a bit, but I really appreciate any help you could provide in this area!)
b
None of those seemed to quite answer the question. I'm unclear how the broken up files get combined together for something like a require call. Does this only work if I'm pulling in the individual files directly as opposed to the module as a whole?