Internals: How Kotlin 2.0 Compiles to JavaScript 2.0 with Kotlin/JS and Webpack 5.90

Kotlin 2.0 solidifies the language’s multiplatform capabilities, with Kotlin/JS receiving major updates to its compilation pipeline. This article dives into the internal workings of how Kotlin 2.0 source code is transformed into modern JavaScript 2.0 output, integrated with Webpack 5.90 for production-ready bundling.

Kotlin 2.0 Compilation Pipeline Overview

All Kotlin 2.0 targets, including JS, use the unified IR (Intermediate Representation) backend, replacing the deprecated legacy compiler. The pipeline follows three core phases:

1. Frontend: Parses Kotlin source files into an Abstract Syntax Tree (AST), performs type checking, and resolves references.
2. IR Generation: Converts the validated AST into a target-agnostic IR, a tree-like structure that represents program logic independent of the output platform.
3. Backend Lowering: Applies platform-specific lowering passes to transform the IR into JavaScript-compatible code, then emits the final output.

Kotlin/JS IR Backend Internals

The Kotlin/JS IR backend adds JS-specific lowering passes to the unified pipeline. Key steps include:

• Closure Conversion: Transforms Kotlin lambdas into JavaScript closures, handling variable capture and scope management.
• Coroutine Lowering: Maps Kotlin coroutines to JavaScript async/await syntax, leveraging JS 2.0’s native async support.
• ES Module Emission: Generates ES2022-compliant ESM output (referred to as JavaScript 2.0) by default, with support for CommonJS and UMD as alternatives.
• Dead Code Elimination (DCE): Removes unused Kotlin declarations at the IR level, reducing output size before Webpack processing.

Kotlin 2.0’s JS backend maps Kotlin language features directly to JavaScript 2.0 equivalents: data classes become plain JS objects with toString/hashCode implementations, extension functions are compiled to top-level functions with the receiver as the first argument, and nullable types use nullish coalescing where applicable.

Integration with Webpack 5.90

The Kotlin/JS Gradle plugin automatically configures Webpack 5.90 for projects that include a js target. Key integration points include:

• Entry Points: The plugin generates a default Webpack entry point pointing to the Kotlin-compiled main module, typically kotlin.js.
• Loaders: Webpack processes Kotlin/JS output with the built-in JavaScript loader, with no additional configuration required for standard projects.
• Output Configuration: Webpack bundles Kotlin output alongside other JS dependencies, emitting code split chunks and a final bundle.js by default.

Webpack 5.90’s features enhance Kotlin/JS output significantly:

• Persistent Caching: Webpack 5’s filesystem-based caching speeds up incremental builds, reusing cached Kotlin/JS output when no source changes are detected.
• Tree Shaking: Webpack’s ES module support enables tree shaking of Kotlin-generated ESM, removing unused exported code.
• Minification: Webpack 5.90 uses Terser for JS minification, further reducing bundle size alongside Kotlin/JS’s own DCE.

Compilation to JavaScript 2.0: Key Features

Kotlin 2.0’s JS target outputs code compliant with ES2022+ (colloquially referred to as JavaScript 2.0 in this context), supporting modern syntax out of the box:

• Top-level await for asynchronous module initialization
• Private class fields and methods using # syntax
• Optional chaining (?.) and nullish coalescing (??) operators
• Arrow functions for Kotlin lambda expressions

For example, the following Kotlin coroutine code:

suspend fun fetchData(): String = withContext(Dispatchers.Default) {
  // async operation
  "data"
}

Compiles to JavaScript 2.0 async/await syntax:

async function fetchData() {
  // async operation
  return "data";
}

Optimization Pipeline

Kotlin 2.0 and Webpack 5.90 apply optimizations in sequence:

1. Kotlin/JS IR backend performs inlining, DCE, and IR-level optimizations.
2. Webpack 5.90 processes the emitted JS 2.0 modules, applying tree shaking, code splitting, and minification.
3. Final output is a production-ready bundle with minimal size and maximum compatibility with modern browsers.

Conclusion

Kotlin 2.0’s unified IR backend and tight Webpack 5.90 integration streamline compilation to JavaScript 2.0, combining Kotlin’s type safety with modern JS ecosystem tools. Understanding these internals helps developers optimize build times, reduce bundle sizes, and leverage the full power of Kotlin/JS for web development.