Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • Ahora que has visto (un mínimamente) Webpack en acción, es hora tratar un concepto que están en su ADN: el gráfico de dependencias o dependency graph.
  • Webpack va interpretar el proyecto desde el punto (o puntos) de entrada y buscando import, require o cualquier otro indicio de que un archivo depende de otro.
  • Entonces, marcará esos paths como dependencias y también las recorrerá de forma recursiva creando bundles (la mayoría de las veces uno) **con ellos. Así sucesivamente.
  • Vamos a crear varios módulos JavaScript y a importarlos en nuestro punto de entrada.
    // test1.js
    export default "Hello world";
    
    //test2.js
    export default "I love Webpack 🔥";
  • Al importarlos en index.js y hacer uso de ellos, verás como aparecen en el bundle final.
    import test1 from "./test1";
    import test2 from "./test2";

    console.log(`${test1}, ${test2}`);
  • Al examinar el bundle final, ahí esta el contenido de test1 y test2. Pero, ¿qué ocurre si no utilizamos uno de ellos, por ejemplo test2?.
  • Podemos probar que funciona haciendo node bundle.js.
  • Como ya sabes Webpack analiza las sentencias que importan módulos y hace lo que puede para detectar qué es lo que se utiliza y lo que no. En este caso ve claramente que aunque hemos importado test2 nadie está haciendo uso de él y esta es la clave: nada ni nadie tiene una referencia hace este módulo, con lo cual no se añade al gráfico de dependencias.
  • Este proceso es conocido como tree shaking (sacudida de árbol) y permite a Webpack compilar un bundle con lo que realmente está en uso.
  • Importante, esto no es una concatenación de código fuente como con cualquier otro task runner, aquí hay una inteligencia que discrimina qué se utiliza y lo que no.
  • El tree shaking sólo funciona con imports, no con require ya que estos son dinámicos y Webpack no puede averiguar si se usarán o no.
  • Las ventajas son obvias: el usuario se descarga sólo lo que va a utilizar. Aunque en una lección posterior veremos con detenimiento qué es esto de three shaking.
  • Antes de finalizar esta lección veamos qué es el modo watch de Webpack. En un workflow moderno de desarrollo no tiene cabida tener que acceder al termina cada vez y lanzar npm run build.
  • Vamos a decirle con webpack --watch que vigile las dependencias añadiendo a nuestro package.json un nuevo script llamado watch que contenga ese comando.
  • Puedes asociar más módulos a tu gráfico de dependencias simplemente añadiendo una referencia y verás como on the fly Webpack lo actualiza.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue