Prepack JavaScript Compiler Aims to Reduce Startup Time

| by David Iffland Follow 3 Followers on May 08, 2017. Estimated reading time: 2 minutes |

A note to our readers: You asked so we have developed a set of features that allow you to reduce the noise: you can get email and web notifications for topics you are interested in. Learn more about our new features.

Facebook has revealed a project that makes "JavaScript run faster", as long as that JavaScript is initialization code in a React Native app.

The tool, dubbed Prepack, tries to eliminate computations that can be known at compile time, specifically those done as part of the code's initialization phase. As JavaScript engines have matured, the biggest performance gains now need to come from improving real-world user experience. On mobile apps, native code written for a platform has an inherent advantage over apps written in JavaScript, such as those written with React Native. To that end, improving the perceived startup time for a React Native app could have a dramatic effect on a user's experience. Nikolai Tillmann joined Facebook in September 2016 specifically to work on this problem.

All of the examples on the project page show how work done at the global level can be reduced to the result of that work, thus saving the client's JavaScript engine from unnecessary compilation on every startup. Prepack is a "clean reference implementation of JavaScript", so it's actually executing the JavaScript it reads in order to determine what it actually does.

For now, the project is focused on improving initialization performance for React Native, where spinning up the app is one of the biggest costs. The less on-device compilation the JavaScript engine has to do, the better the performance should be. But as is, the project has no understanding of its environment. "Prepack has no built-in knowledge of document or window. In fact, when prepacking code which references such properties, they will evaluate to undefined", according to the documentation.

The project very clearly states that it is "not ready for production use". In the short term, the primary goals are to get the tool working well with React Native and the associated tool chains. The web and node.js are listed as a "medium term" feature, so developers looking to easily integrate this into their web apps will have to wait. Even then, if reducing bundle size is a web developer's priority, it's not part of Prepack's goal. At the very bottom of the project's home page is a note that says:

Prepack focuses on runtime performance, while the Closure Compiler emphasizes JavaScript code size.

Tillman wrote that the benefits really depend on what's being compiled:

Prepack is quite complementary to traditional compilers. Its strength is that it comes with full knowledge of the JavaScript built-ins, and it uses that to pre-evaluate the code at compile time. In an extreme case, an entire program can get reduced to the final result. To really see the benefits, you need to use it in an environment where the parsing overhead gets cached. In terms of pure execution time, we see improvements of up to 10x for the initialization phase.

Rate this Article

Adoption Stage

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Combine Prepack with the Closure comiler by Torgeir Helgevold

I did a POC where I looked for advantages from combining Prepack with the Closure compiler. Results looked promising:

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

1 Discuss

Login to InfoQ to interact with what matters most to you.

Recover your password...


Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.


More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.


Stay up-to-date

Set up your notifications and don't miss out on content that matters to you