article This originally appeared on dormoshe.io In the last days, the social networks are stormy about . Probably you still haven’t heard about it. That’s reasonable! It has been an only a few days ago. Prepack has developed by Facebook and it is under active development. It’s experimental and still in very early stage, but it is awesome 😱. Prepack open source In this article, we will introduce Prepack, cover what Facebook wants to solve, see some cool examples and understand the current state of Prepack. Pre.. What? Prepack is a tool that optimizes JavaScript source code Computations that can be done at , instead of run-time, get . Prepack with equivalent code that is a simple sequence of assignments. This gets rid of most intermediate computations and object allocations. compile-time eliminated replaces the global code of a JavaScript bundle Sebastian McKenzie — one of the Prepack developers Prepack is a for JavaScript. Prepack rewrites a JavaScript bundle, resulting in JavaScript code that executes more efficiently. For initialization-heavy code, Prepack works best in an environment where JavaScript parsing is effectively cached. partial evaluator And What About The Closure Compiler? Prepack focuses on runtime performance, while the Closure Compiler emphasizes JavaScript code size. The Closure Compiler also optimizes JavaScript code. Prepack goes further by truly running the global code that initialization phase, unrolling loops and recursion. A Piece of history One year ago, at React-Europe 2016 conference, Sebastian McKenzie talked about how making JavaScript initialization faster. McKenzie talk at React-Europe 2016 So, now we know more about it. There are name and website and we can use it. How To Start? Prepack shipped as an npm package and you can use it by Prepack-CLI tool or by API calls to the Node.js module. Prepack CLI In order to install the Prepack-CLI, run npm install -g prepack And then to compile a file, run prepack script.js Prepack API In order to install in it a project, run npm install --save-dev prepack and then the js code looks like: Prepack api usage via npm package — code example prepack-webpack-plugin There is a webpack plugin for using Prepack in a convenient way. webpack plugin usage example Let The Show Begin Here are some cool examples. The left side in the examples contains the input and the right side contains the output of Prepack. The first example is a traditional hello world example: Example 1 As you can see, Prepack compiled the code to the smallest version. The next example contains two functions. Here is the code: Example 2 The compiled code is generated from the first function. Function is useless and it does not contain any side effect code, so there is no compiled code associated with . func2 func2 Pay attention, code that is not in an is not a fully optimized. IIFE Example without IIFE This example shows coding with a for loop. The loop was removed in the compiled code, but there is a lot of unused lines. With an IIFE it will look like: Example with IIFE Here you can see that there are only 5 lines of the log operation. Playground You can try it out by yourself in a special playground in the Prepack website (see it in the references section). The playground is the better option for those who don’t want to install it or interest just in playing with Prepack. Playground example Current State Github Measures Prepack code hosted (with ❤️) by Github and published via npm. Github There are 15 contributors, about ~6500 stars, ~2000 downloads this week via npm and ~130 forks. These statistics are in the upcoming period since increased interest by developers in the social networks. expected to leap There is a funny issue you really want to know about… _Looks like @bevacqua managed to break it. Try running this modified example from the docs (function() { function fib…_github.com Converts 1 meaningless line to 1065 lines of code · Issue #543 · facebook/prepack But it is OK. They will fix it in the near future. Tests Coverage The report for serialization tests is available to all. Right now the coverage is . code coverage 52.37% Code coverage Prepack’s code coverage generated by . Istanbul Roadmap 🎯 Facebook has a for the development of Prepack. The roadmap is divided into three parts: short, medium and long terms. roadmap In the short term, Facebook wants to stabilize the existing feature set for Prepacking of React Native bundles. They also want to do an integration with React Native toolchain. In addition, they plan to build out optimizations based on assumptions of the module system used by React Native. The long-term vision is to leveraging Prepack as a platform. Last Attention Prepack doesn’t recognize and , so their value will be . Therefore, we would have to do some preparations for handling this issue. Maybe someone wants to write some npm package for this purpose? 😇 document window undefined Facebook asks the developers to try Prepack, give feedback, and help them by bugs fixing and by contribution in the Github repository. References Here are some useful links for further reading: Github repository npm package Official website Prepack playground Conclusion Prepack can be a “life changer”. It is backed by a stable company — Facebook. They want to integrate this tool in React and they have been worked on that for a while. There are a lot to do. The vision of Facebook is to . It sounds promising. I will follow their advance. Prepack is awesome! leveraging Prepack as a platform You can follow me on dormoshe.io or Twitter to read more about Angular, JavaScript and web development.
