Code Splitting

🏹 Code Splitting

Code splitting por paginas es una manera de hacer code splitting el cual consiste en cuando el usuario cargue una página en específico el bundle que se enviara al navegador sera una sola fracción y lo que esa página necesite

• Si bien podemos reducir el tamaño de nuestros bundle, llegará un momento donde no tendrá más reducción
• En ese momento debemos tomar otras estrategias y el code splitting es una de ellas
• En vez de tener un bundle gigante de nuestra aplicación, lo que hace el code splitting sera dividirlo en diferentes partes para que sea mucho más fácil y pese menos a la hora de enviarlo al navegador
  • Frameworks como Angular, Next y Gatsby se genera un code splitting basado en paginas
• Otra técnica es dividir el código de las librerías [vender] de nuestro bundle final
  • Esta técnica es beneficiosa en el sentido de que los navegadores hacen cache de los archivos, por lo cual los vendors se quedaran en cache ya que estos no se suelen actualizar mucho.
  • Como efecto reduciremos la cantidad de requests

RESUMEN: Podemos ver que el code splitting es dividir el código, es beneficioso el uso que se le quiera dar, ya que se puede implementar de diferentes formas

🔎 Si corren el comando de análisis de nuestro bundle, nos podemos dar cuenta que la gráfica se ve diferente!

Esta es una de las técnicas más importantes para utilizar en react, aparte de separar páginas de una SPA por ejemplo, también se utiliza para separar componentes y cargarlos de manera diferida para que la página cargue mucho más rápido, en react existe React.lazy para importar cosas que no son tan importantes de cargar al principio (En caso de aplicaciones pequeñas como landings) o para separar las páginas, en caso de utilizar algún router para una SPA (En aplicaciones un poco más complejas para no descargar todas las páginas del bundle), y se utiliza junto Suspense para mostrar un loader mientras carga el resto de la página.

Code Splitting

Dividir el codigo en pedazos

optimization : {
    splitChunks: {
      chunks: 'all',
    },
  },

.
filename: '[name].bundle.js',
.
index.html

<script async src="dist/vendors~main.bundle.js"></script>
    <script async src="dist/main.bundle.js"></script>

.
Este metodo es fundamental para la caché

A mí no me salió vendor-main sino, 581, pero agrego ese número y no sale nada.

Para los que les aparece el siguiente error:

Error: Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks 179 and 
581)

Se soluciona con el cambiando el filename en

[name].js

Este artículo enseña cómo hacer Code Splitting con Vite!

👌

hello