Faster App Starts With Prepack & Webpack

TL;DR Here is a GitHub repository with the example :)

As if we hadn't had enough tools already, things are getting worse... or better?

This time with a tool called Prepack!

A tool for making JavaScript code run faster.

"But Kay, isn't JavaScript blazing fast already?"

Maybe, who am I to tell you? I can barely set up Webpack by copy and pasting a config from GitHub.

Anyway, this tool is highly experimental and you should use it at your own risk, it might overheat your Firefox.

"So what exactly does it make faster?"

The startup of your application.

"And how does it achieve this?"

I have no idea!

But it seems to run your application code once and then saves the state after that run. Later it replaces your code with a simplified version that produces the same state.

This should allow you to write nice code, that may be slow, then run it at build time and generate not so nice code that is fast, when it gets started in the browser. This is achieved by means of Voodoo.

It seems that this whole startup thing is a problem of code produced by Webpack, so it's worth a try on your Webpack based projects. So that you have an idea if it's worth waiting for Prepack to stabelize so you can use it in production in the future(!).

There is already a Webpack plugin for this, so it's easy to integrate.

"Is there a catch?"

Yes, since you code is run (and rewritten) at build time, you can't simply write code that requires global browser APIs:

 import { h, render } from "preact";

 const app = (
   <div id="foo">
     <span>Hello, world!</span>
     <button onClick={e => alert("hi!")}>Click Me</button>
   </div>
 );

 const domRoot = document.getElementById("app");
 render(app, domRoot);

Because Prepack doesn't know much about document and such, but luckily JavaScript doesn't care much about you writing code that uses undefined references till you actually run the code, so I rewrote my simple example by exposing a global function that isn't run when when the script is loaded, like this:

 import { h, render } from "preact";

 const app = (
   <div id="foo">
     <span>Hello, world!</span>
   <button onClick={e => alert("hi!")}>Click Me</button>
 </div>
);

global.bootApp = () => {
  const domRoot = document.getElementById("app");
  render(app, domRoot);
};

Later, in my index.html, which is outside of my build process, I simply called window.bootApp(); to run my prepacked code.

In my example the size blew up from 24.7 KB to 50.6 KB, but the whole thing isn't about size, but about costly computations at startup time, so your mileage may vary.

Whelp, play around with it and tell me if it improved your life.