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).

{ "chunks": [ "common:9", "route1:2:common", "route2:2:common" ], "js": [ "main.js", "App.svelte.js", "utils/mount-util.js", "node_modules/svelte/internal/package.json", "node_modules/svelte/internal/index.mjs", "node_modules/page/package.json", "node_modules/page/page.mjs", "node_modules/svelte/package.json", "node_modules/svelte/index.mjs", "route1/Route1.svelte.js", "route1/main.js", "route2/Route2.svelte.js", "route2/main.js" ] }

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.