The latest addition to my experimental Svelte Bazel rules is optional opt-in to advanced Closure compiler optimizations in the bundle_prod rule. This means you have a choice between Rollup and the Closure compiler when generating prod bundles using bundle_prod.

If you are new to either Bazel or the Closure compiler, I recommend reading two of my other articles first:

Svelte Bazel Build

The Closure Compiler and Svelte.

Closure Compiler Opt-In

Opt-in to Closure compiler optimizations in bundle_prod is done by specifying a closure compiler configuration file in the rule definition. I have provided a simple example below.

BUILD.bazel
svelte( name = "App", srcs = ["main.js"], entry_point = "App.svelte", ) bundle_prod( name = "bundle_prod_closure", entry_point = "main.js", closure_config = ":closure-config.json", deps = [ ":App", "@npm//rxjs", ], )

Omitting the closure_config attribute will fall back to Rollup with Terser instead of the Closure compiler.

App.svelte
<script> import { interval } from "rxjs"; import { map, tap, take } from "rxjs/operators"; let current = 0; interval(500) .pipe( map((v) => v * 100), tap((v) => (current = v)), take(100) ) .subscribe(); </script> <h4>RxJs Interval Demo</h4> {current}
closure-config.json

In order to tell the Closure compiler how to process the RxJs dependencies we have to specify a little bit of configuration in closure-config.json. In this case we only have to worry about Rxjs, but you could potentially depend on multiple third party libraries in a more realistic application.

RxJs is published in multiple formats, but in this case I am telling the Closure compiler to pick up the esm2015 format.

{ "node_modules": [ "rxjs/package.json", "rxjs/_esm2015/index.js", "rxjs/_esm2015/internal/**.js", "rxjs/operators/package.json", "rxjs/_esm2015/operators/index.js" ], "entry_point": "main.js" }

We also have to give the Closure compiler the entry point of the application code (main.js).

The rest of the Closure compiler configurations are encapsulated by bundle_prod assuming the following settings:

compilation_level: "ADVANCED", language_in: "ECMASCRIPT_2020", language_out: "ECMASCRIPT_2015", process_common_js_modules: true, module_resolution: "node", package_json_entry_names: ["es2015,module,jsnext:main"], jscomp_off: "checkVars", warning_level: "QUIET"

Demo

I have uploaded a sample project to Github in case you want to give it a try.

The demo application shows how to use Bazel as the single build tool for building a Go web server that serves a Closure compiled Svelte application.