Prepack es una herramienta creada por Facebook que nos ayuda a optimizar el código fuente de nuestras aplicaciones escritas en JavaScript.
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.
Prepack website
Cómo funciona Prepack
Cuando desarrollamos nuestras aplicaciones en JavaScript necesitamos crear métodos y funciones para resolver problemas puntuales de nuestra aplicación; esto nos ayuda a evitar la repetición de código, y también a crear código mucho más elegante.
Prepack calcula el resultado de nuestras funciones, y mejora el tiempo que tarda nuestra aplicación en realizar el trabajo que le pidamos.
Nuestra aplicación mostrara los mismos resultados usemos Prepack, o no. Pero en vez de calcular el resultado de nuestras operaciones cada vez que ejecutamos nuestra aplicación, podemos pedirle a Prepack que haga este trabajo por nosotros. De esta forma nuestra aplicación podrá funcionar mucho más rápido y sin tanto esfuerzo.
Usando Prepack
Instalación:
npm install -g prepack
Compilación:
Una vez instalado, podemos probar que tanto puede hacer Prepack con nuestra aplicación. Para compilar nuestro código, podemos visualizar en la consola el nuevo resultado de nuestro código:
prepack index.js
O también podemos escribir este resultado en un nuevo archivo. Así nuestra aplicación lo ejecutara y funcionara mucho más rápido y sin tanto esfuerzo:
prepack index.js --out index.build.js
Para encontrar más opciones al compilar tus archivos JavaScript con Prepack puedes visitar Prepack - Getting Started
Prepack y Webpack
Existe un Plugin de Webpack para usar Prepack de manera conveniente. Para usarlo solo tenemos que añadirlo a la lista de plugins de nuestro archivo de configuración de Webpack:
// webpack.config.js
const prepackConfiguration = {
/// ...
};
module.exports = {
// ...
plugins: [
new PrepackPlugin(prepackConfiguration)
]
};
Let’s Prepack
Puedes probar tu código sin necesidad de instalar Prepack usando Prepack Playground. Esta herramienta será muy util para probar qué tan capaz es prepack de mejorar nuestro código. Ahora, veamos algunos ejemplos.
Hello World
Dos funciones. La primera devuelve un string “Hello” y la segunda un string “World”. El resultado de llamar ambas funciones es un string “Hello World”. Y Prepack lo sabe.
Función Fibonacci
Si construimos una aplicación que, por alguna razón necesita encontrar la Función Fibonacci. Más de una vez. No esta nada mal que construyamos una función que nos devuelva este resultado. Así evitaremos repetir código, por lo hacer esto es una muy buena practica.
Pero prepack puede calcular el resultado las veces que sean necesarias, y nuestra aplicación no tendrá que preocuparse por cómo se calcularon estos resultados; simplemente lo sabra.Así nuestra aplicación podrá ejecutarse sin problemas ni retrasos haciendo cálculos que Prepack ya ha hecho por nosotros.
Conclusión
Si bien Prepack no es una herramienta lista para producción. Hay muchos otros ejemplos de cómo Prepack es muy útil para nuestras aplicaciones, y algún día nos servirá para minificar nuestras aplicaciones. No solo en tamaño, sino también en tiempo de ejecución.
¿Alguna vez has usado Prepack? ¿Mejoro el código de tu aplicación? Te animo a que nos compartas tus experiencias con Prepack en los comentarios 😃.
Curso de Webpack 2017
