¿Qué es Tree Shaking y por qué lo necesitaría?

Nuestros programadores estrellas agotaron sus depósitos de café, por su búsqueda todo el tiempo por la solución, hasta que Ángel encontró el hallazgo en Gitea así que en este momento la comparte aquí.

Solución:

Veo que tiene tres preguntas aquí; 1. ¿Qué es la sacudida de árboles? 2. ¿Cuál es la necesidad de ello? 3. Y, ¿cómo lo usas?

1. ¿Qué es el árbol temblando?

árbol temblando se refiere a eliminación de código muerto. Significa que los módulos no utilizados no se incluirán en el paquete durante el proceso de compilación.

Cuando nosotros import y export módulos en JavaScript, la mayoría de las veces hay código sin usar flotando. Excluyendo ese código no utilizado (también conocido como código muerto) se llama árbol temblando.

La utilización del movimiento del árbol y la eliminación del código muerto puede reducir significativamente el tamaño del código que tenemos en nuestra aplicación. Cuanto menos código enviemos por cable, más rendimiento tendrá la aplicación.

2. ¿Cuál es la necesidad de sacudir los árboles?

Tree Shaking nos ayuda a reducir el peso de la aplicación. Por ejemplo, si sólo queremos crear un “Hello World” Aplicación en AngularJs 2 entonces tomará alrededor de 2,5 MB, pero mediante la sacudida del árbol podemos reducir el tamaño a unos pocos cientos de KB, o tal vez a unos pocos MB.

3. ¿Cómo usar/implementar la sacudida de árboles?

Herramientas como webpack detectarán el código inactivo y lo marcarán como “módulo no utilizado”, pero no eliminarán el código. Webpack se basa en minificadores para limpiar el código inactivo, uno de ellos es el complemento UglifyJS, que eliminará el código inactivo del paquete.

// modules.js
export function drive(props) 
 return props.gas


export function fly(props) 
 return props.miles 


// main.js
import  drive  from modules;

/// some code
eventHandler = (event) => 
  event.preventDefault()
  drive( gas: event.target.value )

/// some code

// fly() was never importent and won't be included in our bundle

Solo funciona con import y export. No funcionará con CommonJS
require sintaxis.

Lo mismo se aplica a las dependencias de npm. gran ejemplo es lodash, simplemente import pick from 'lodash/pick' y su paquete solo incluirá un módulo pequeño en lugar de la biblioteca completa de lodash.

Simplemente significa que se eliminará el código que está en su proyecto pero que no se usa/no se hace referencia en ningún lado. Al igual que si importa una biblioteca completa solo para usar 1 función en ella. Reduce el tamaño del código de compilación.

Sección de Reseñas y Valoraciones

Si estás de acuerdo, tienes el poder dejar una crónica acerca de qué te ha gustado de este enunciado.

---

---

Utiliza Nuestro Buscador