Prepack: a partial evaluator for JavaScript that generates efficient JavaScript

JavaScript helps you to create dynamic and active applications, however the way in you write your code may introduce some inefficiencies and affect therefore the performance of your application, though they're not always noticeable to human eyes. Although there are a lot of tips and best practices that you can use to optimize your JavaScript code, you may forgot to apply them in your code sometimes. That's why the Prepack project may help you with this task.

What is Prepack and how does it works?

Prepack is a command line tool that optimizes JavaScript source code: Computations that can be done at compile-time instead of run-time get eliminated. Prepack replaces the global code of a JavaScript bundle (final version of your code) with equivalent code that is a simple sequence of assignments. This gets rid of most intermediate computations and object allocations. Prepack focuses itself on the runtime performance, while the Closure Compiler emphasizes in the JavaScript code size. For example, the following code that implements a fibonacci function:

(function () {
    function fibonacci(x) {
        return x <= 1 ? x : fibonacci(x - 1) + fibonacci(x - 2);
    }

    // Define the x variable in the window as the result of 10
    global.x = fibonacci(10);
})();

Bundled with Prepack, your final code will result as:

x = 55;

What? Are you kidding ? Nope, if you analyze the initial code, the fibonacci function is being used only once and we are declaring a static value from a static number in the global variable x, so the result of your bundle will be the result of the function when it's executed, so Prepack in the background evaluates your code as well. Although the code that you write everyday may not be so simple, this example is pretty nice to understand what prepack does with a lot of unnecessary theory. So if your code needs the function because instead of using the fibonacci function once but for example to declare the function globally:

(function () {
    function fibonacci(x) {
        return x <= 1 ? x : fibonacci(x - 1) + fibonacci(x - 2);
    }

    // Declare global the fibonacci fn
    global.fibonacci = fibonacci;
})();

Then prepack would append it:

(function () {
    var _0 = function (x) {
        return x <= 1 ? x : _0(x - 1) + _0(x - 2);
    };

    // Declare global the fibonacci fn
    fibonacci = _0;
})();

As you can see, Prepack compiles the code to its smallest version.

How to use?

As mentioned, Prepack is a command line utility and you can use it with node.js. Using NPM  you can install using:

npm install -g prepack

Or if you use yarn, make sure you get yarn first:

npm install -g yarn

and then install the Prepack CLI via yarn:

yarn global add prepack

You may need to prepend the command with sudo in some cases or execute the command prompt in administrator mode in Windows. After the installation, prepack should be accesible through the command line and can be used as shown in the following example:

prepack script.js --out script-processed.js

Where script.js is your own code and the out parameter that defines the absolute path to the output file with the optimized code. You can anyway read detailed instructions and the API docs of prepack visiting their official website here.

How to contribute?

Prepack is totally open source under the BSD-3 Clause, which means that you have the right to do pull requests and report issues on the official repository at Github. There are currently 34 contributors, more than 10K stars on Github and 273 forks. In order to accept your pull request, the Facebook team needs you to submit a CLA. You only need to do this once to work on any of Facebook's open source projects (thing that you can do here).

Prepack although in early stage, it may become in the future an awesome an essential tool that can be integrated with React or any other kind of JS project. There's a lot to do, but the project is promising so be sure to star the repository and check for future changes.