I have added support for lazy loading with the Closure compiler in rules_svelte. This post is a quick demo of how to configure it.
Background
If you are new to Closure compiler with Svelte, I recommend checking out my other articles first.
The Closure Compiler and Svelte
Svelte with Closure Compiler and Lazy Loaded Routes
Adding Lazy Routes
In my demo I have configured a basic Svelte application with two lazy loaded routes. The Svelte code is identical to my previous example, so in this post I will only show the Bazel configurations.
The first step is to define the chunks that will tell the Closure compiler how to do the code splitting per route.
In closure-config.json I have defined a common chunk and individual chunks per route (route1 and route2).
The json in the config file mimics Closure’s standard chunk format name:file count:[chunk dependency].
The definition should be read top to bottom. In this case the first 9 files in the js array make up the common chunk. Next you have the route chunks with two files in each. As you can see, the route chunks also have a dependency on the common chunk.
The biggest pain point when defining the chunks is manually calculating the files per chunk, but I am hoping to add tooling to automate this at some point. In fact there is a project here that seems promising.
Demo
For a working demo application you can check out one of my integration tests.
