Tue, 05 Apr 2022 08:26:44 GMT
Join the conversation at slack.cordova.io
Tue, 05 Apr 2022 06:00:20 GMT
@tomkinson says
Anyone bundling and code splitting long these lines;
Critisism and insights welcomed!!
*Dealing w an issue now that has duplicated app size after bundling as a lot of functions are now being duplicated into different lazyloaded scripts that use them, but strategy is to code split to fix this. So;
Our strategy of a folder reorg is to convert the app‘s js code into es modules that are imported as needed, because that allows the bundler to do its best work. Cordova doesn’t allow loading scripts as modules, but allows loading modules using the dynamic “import” keyword, so the core of this idea is to get the app‘s non-lazyloaded and non-plugin js code bundled into a single module file that has an export, and then use the dynamic import from a single regular js file to import and execute the code in that bundled file. This gives us full access to the benefits of modular files, and can serve as a basis for any future reorganization of files to make them even more modular as necessary. What’s left is a relatively minor issue of copying non-js files while preserving their folder structure. The specific problems that needed to be solved;
validating that the dynamic import idea could work
handling circular dependencies
thankfully the bundler handled this well and I didn‘t need to resolve them manually, but even if it doesn’t do it so well in the app's actual code I still have a way to handle them
handling web workers
webworkers only recently got support for es modules, but it doesn't cover the range of devices we support. So we have to keep using the regular sync imports of libs that we already use. I hoped to avoid this and take advantage of bundling those files too, but this is not a regression, just a continuation of what was already in place
nevertheless I have a structure that allows the webworker scripts to be bundled individually too
- lazyloaded scripts
these are already written as es modules, so the objective was to make sure their own bundles could be created and imported as needed. This means that in some cases the lazyload bundles will contain some funcs that are in the main bundle, the bundler handles all of this because those funcs will be exports too
- installing libs using npm without conflicting with plugins
the libs we use will now be installed the usual way using npm. This is part of what the bundler needs to tree-shake and inline the bits of functionality that we use in those libs. They share the package.json with the plugins so i had to make sure they‘re installed in an order that doesn’t cause conflict or loss of files during the build step