React-compiler: Compiling React Applications to Improve Performance
Authors
Sommer, Niclas Jon ; Nash, Kristoffer Magill
Term
4. term
Education
Publication year
2020
Submitted on
2020-06-12
Pages
127
Abstract
This project introduces React-compiler, a tool written in JavaScript that converts apps built with React—a popular framework for building web interfaces—into plain JavaScript that runs more efficiently. In tests using the Krausest benchmarking tool, the compiled apps were 28% to 1740% faster than standard React in 5 out of 10 benchmarks; in the worst case they were 40% slower. The total size of the application files was also reduced by up to 87% in our tests. These improvements come partly from removing the React runtime and from reducing changes to the web page’s underlying structure (the DOM) by computing, during compilation, which JSX elements depend on what. JSX is React’s HTML-like syntax for describing user interfaces. By resolving these dependencies ahead of time, the compiled code does less work in the browser. The current version has limitations: it cannot compile some React features (such as hooks, portals, and context), and it does not support third-party libraries unless those libraries are modified.
Dette projekt præsenterer React-compiler, et værktøj skrevet i JavaScript, der omdanner apps bygget med React, et udbredt rammeværk til webbrugerflader, til almindeligt JavaScript, der kører mere effektivt. I tests med Krausest-benchmarkværktøjet var de kompilerede apps 28% til 1740% hurtigere end standard React i 5 ud af 10 benchmarks; i den dårligste var de 40% langsommere. Den samlede filstørrelse blev også reduceret med op til 87% i vores tests. Forbedringerne skyldes blandt andet, at Reacts runtime fjernes, og at ændringer i websidens underliggende struktur (DOM) mindskes ved allerede under kompileringen at beregne, hvilke JSX-elementer der afhænger af hvad. JSX er Reacts HTML-lignende syntaks til at beskrive brugerflader. Ved at løse disse afhængigheder på forhånd skal den kompilerede kode udføre mindre arbejde i browseren. Den nuværende version har dog begrænsninger: Den kan ikke kompilere nogle React-funktioner (såsom hooks, portals og context), og den understøtter ikke tredjepartsbiblioteker uden ændringer i selve biblioteket.
[This apstract has been rewritten with the help of AI based on the project's original abstract]