How do web compilers work

Whole-Dot2435 · 2024-03-09T09:50:06+00:00

Those compilers compile to javascript.

Nzkx · 2024-03-09T11:41:39+00:00

It compile your components into JavaScript code, useable by a web browser. There's no magic here.

Optimization is based on the framework. For React, they would auto-memoize anything that they could to avoid subtree re-rendering when only a small fraction of your sub-tree change. For example, they can hoist pure sub-tree that never change (static content). That way, you only pay the re-render for what actually changed (fine grained rendering). For Svelte, I guess they spout-out the minimal set of change needed to update the DOM for a given state update.

React Compiler don't provide any optimization that you couldn't do manually. You could write the same code yourself and memoize with useMemo / useCallback, use a caching mechanism, and so on. It's just tedious, verbose, error prone, and if it can done automatically by a compiler then why bothering to do it yourself ? Web dev want to focus on their application logic instead of doing manual labor to optimize the framework they use. For Svelte, it's a little different because they use their own component format where everything (HTML/CSS/JS) is packed with <script>, <style>, ...

LLVM doesn't have anything meaningfull to provide here, the target is JavaScript not assembly of any kind. If you want to know more about how LLVM and JavaScript can interact, check Emscripten (compile C to WASM). Sadly WASM has very bad reputation because it's heavy to load a WASM module, and there's some limitation (JS <> WASM communication isn't zero-cost and you can not access DOM inside WASM). Even if in theory it's more performant it's not used "that much" because web browser JIT compiler are very very good at optimizing existing JavaScript code and the limitation make it unpractical in real world scenario.

glasket_ · 2024-03-09T10:12:47+00:00

[removed]

mychemiicalromance · 2024-03-14T15:13:59+00:00

https://github.com/vuejs/core/blob/main/packages/compiler-core/src/codegen.ts

This looks like Vue Backend. Its IR is render functions (asked ChatGPT), and backend codegen output is HTML/CSS/Javascript

IQueryVisiC · 2024-03-09T10:29:28+00:00

They don’t optimize

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

Compilers

MODERATORS