¿Qué es el vendor file?

Antes a la carpeta que contenía todas las dependencias de un sitio web se le llamaba vendor, archivos de JavaScript y CSS de terceros se encontraba dentro de esta carpeta.

Con la llegada de procesadores de archivos como Webpack, en lugar de tener una carpeta vendor con las dependencias del proyecto, se empezó a compilar el código de las dependencias dentro de un archivo comúnmente nombrado vendor.js.

El archivo vendor.js contiene todas nuestras dependencias de un sitio web.

Importancia de optimizar

Webpack trajo consigo una manera fácil y rápida de optimizar nuestros proyectos web. Una práctica que todo desarrollador web debe seguir es realizar Code Splitting ya que es raro modificar las dependencias de un sitio de manera frecuente.

Realizando Code Splitting podemos generar dos archivos:

1. app.js: va a contener solamente el código de la aplicación.
2. vendor.js: dentro va a tener todo el código de las dependencias.

Esto trae grandes ventajas en producción pues podemos aprovechar el caché del navegador para alojar nuestro vendor.js y con ello cada vez que un cliente quiera acceder de nuevo a nuestro sitio, solamente tenga que descargar los archivos que hayan cambiado, o sea, el archivo app.js.

Recuerda que es muy importante tener optimizado tu sitio web ya que más del 50% de los usuarios de internet se conectan a través de un dispositivo móvil y cerca del 53% de los usuarios abandonan un sitio que tarde más de 3 segundos en cargar.

Webpack 4 al rescate

Con la última actualización de Webpack se removió el plugin CommonsChunkPlugin y se hizo mucho más sencillo configurar nuestra estrategia de Code Splitting usando optimization.splitChunks.

optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        chunks: 'all',
        priority: 1,
        filename: 'assets/vendor.js',
        test: /[\\/]node_modules[\\/]/,
        },
      },
    },
  },
},

• chunks: le indica a Webpack que chunks o fragmentos de código va a optimizar, sus valores pueden ser:
  • async: optimiza únicamente los archivos importados dinámicamente usando import().
  • initial: optimiza los archivos que son importados de manera normal usando import.
  • all : optimiza todos los archivos que se importen.
• priority: acepta valores numéricos y le indica a Webpack la prioridad de ejecución, en este caso se ejecuta primero.
• filename: le indica a Webpack el nombre del archivo resultante, en este caso genera el archivo en la carpeta assets con el nombre vendor.js.
• test: indica a Webpack donde buscar los archivos a optimizar, en este caso al ser dependencias las debe buscar en la carpeta node_modules.

Como puedes ver el vendor file es muy importante para la optimización de tu sitio y gracias a Webpack se ha vuelto muy fácil generar este archivo, si deseas aprender más sobre estrategias de optimización y renderizado en el lado del servidor te invito a que tomes el Curso de Server Side Render con Express.