Prepack! It’s a new opensource JavaScript development tool by Facebook, still in its early stages of development, but already something worth taking a look at.
What is it for?
According to the website, its –
Prepack is a 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 with equivalent code that is a simple sequence of assignments. This gets rid of most intermediate computations and object allocations.
If that was a lot to take in, in simple terms it makes JS code run faster. But how? See, sometimes we do a lot of computations that isn’t dependent on something we get in run-time,but they can be computed at compile-time and thus code for those computations can be eliminated, but doing that would make programming quite tedious.
Let’s take an example –
const sigmoid = (x)=>{
let res = 1/(1-Math.pow(2.71828,-x));
return res;
}
global.sig = sigmoid(2);
Above is a simple function, which calculates and returns the value of the sigmoid function on being passed a parameter.
Look, we are not passing a value that we get when the program is running, but we are just passing an integer literal. While programming, we could have just have replaced it with sig = 1.1565… ,that would save a lot of computations and increase the performance of the code. But hey! I am not gonna calculate the value of sigmoid function for every bit of code i write, I have better work to do! I have deadlines! Now, that’s where prepack comes in and saves us.
Prepack has an interpreter that interprets the code, does all the computations at compile-time and replaces them with simple assignments in global variables. Simple, but so awesome!
Apart from that, prepack also removes useless code, which, yeah, is also useful.
Trying it Out
Head over to this live editor on the prepack website and start entering your code.
Let’s look at some examples…
A simple add function-
optimizing add function
Look at the example above,its trivial but shows the motive ,the 6 line JS was made into 1 line optimized code. Hurray!
Return of the sigmoid!
optimizing sigmoid function
This screenshot shows how prepack optimizes the sigmoid function as I have shown before.
Lets look at another example, how prepack removes useless code.
See, how prepack removed the useless function showHello .
Using prepack in your development
Install the prepack package globally to use it as a CLI
npm install -g prepack
And for any script,
prepack script.js
If you want to put the output in another file, then-
prepack script.js --out script-build.js
It can be also used as an API!
Install it in your project’s dev dependencies.
npm install --save-dev prepack
And then you can parse a string of JS by-
var Prepack = require("prepack");//can also use import
Prepack.prepack(codeString, options);
Know more of it from prepack’s official Getting Started
There is also a prepack webpack plugin called prepack-webpack-plugin , so you can plug it into your workflow with webpack. See the github repo for it.
Is it same as the Closure compiler?
NO, it isn’t. Closure optimizes javascript code, to make it a smaller file(So that it can be downloaded quickly), prepack on the other hand interprets the code itself, and optimizes the run-time performance.
May I use it in production?
N O !!! Prepack is under development by facebook and the community, there are many things not added, and many things problematic. On the website, you can see a roadmap, detailing how it will be developed.
There are some gimmicks, like it doesn’t identify document or window and replaces them with undefined as the prepack interpreter does not exactly model that of a browser or nodejs. Also, its not fully ready for non-IIFE( Immediately Invoked Function Expression) situations.
The bright light is its under active development, at the time of writing this, it has got 71 open issues. Look at this one, for bringing the browser DOM for prepack.
Read further from the Prepack official website.
Prepack may well be the next big thing in JavaScript, and will be a must in our development workflow and I am really optimistic that day would come soon.
Source: https://medium.com/front-end-hacking/prepack-javascript-7a802de46aa0