18

¿Qué es el vendor file?

47759Puntos

hace un año

Curso de Server Side Render con Express 2019
Curso de Server Side Render con Express 2019

Curso de Server Side Render con Express 2019

Aumenta la velocidad de carga inicial de tu SPA. Integra y optimiza el SEO de tu sitio web con la lógica de negocio y mejora el posicionamiento de tu marca usando SSR Server Side Rendering. Configura el servidor de PlatziVideo con Express y renderizalo desde el servidor.

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.

Curso de Server Side Render con Express 2019
Curso de Server Side Render con Express 2019

Curso de Server Side Render con Express 2019

Aumenta la velocidad de carga inicial de tu SPA. Integra y optimiza el SEO de tu sitio web con la lógica de negocio y mejora el posicionamiento de tu marca usando SSR Server Side Rendering. Configura el servidor de PlatziVideo con Express y renderizalo desde el servidor.
Demian
Demian
@demian

47759Puntos

hace un año

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
1
99Puntos

Think about who actually cares about your height difference. Are you afraid people are https://tutuappx.com/
Vidmate going to laugh or make comments? Don’t let other people’s pettiness stop you from finding happiness.

1
8585Puntos

Muchas gracias Demian, en el curso de SSR no lo explican tan bien, gracias genio

1

Gracias Demian, No tenía ni Idea de la Renderización y el Vendor, pero con esto ya tengo la intro!!!

1
387Puntos

Que buen Articulo .

1
4586Puntos

Tengo en mi lista de pendientes aprender Webpack!

1
10165Puntos

Gracias lo tomare, estoy en proceso.

1
2210Puntos

Sencillo y claro. Excelente! Explicas muy bien, te felicito. Me ayudó a comprender lo que no entendía del porque se hace esto en el curso de SSR, gracias.

1
16210Puntos

Que es mejor utilizar Vendor o DLL ya que entiendo que es prácticamente lo mismo solo que para el DLL se genera el empaquetada a parte esto es lo que le permite mejorar tiempos de transpiración y dicho archivo también tiene el código de las dependencias utilizadas.

1
17028Puntos

Tu articulo debe ser parte del curso, muy bien explicado @Demian