Bajo la denominación Lazy Load, encontramos una práctica muy común en el mundo del desarrollo de aplicaciones y que resulta fundamental en el entorno web. Su traducción literal del inglés sería carga perezosa, aunque es habitual referirse a ella en castellano como carga diferida. En términos generales, podríamos decir que Lazy Load carga únicamente los recursos que son necesarios para el funcionamiento de una parte concreta de la aplicación. Y a medida que el usuario o sistema lo necesiten, se cargarán aquellas partes de la aplicación que son requeridos en cada momento.
La práctica de Lazy Load es algo relacionado con el mundo del desarrollo en general pues resulta casi siempre adecuada, de cara a no recargar a los sistemas con pedazos de aplicación que no se van a usar todavía, evitando también bloquear recursos que no se están utilizando.
¿Sólo para el front-end?
Un entorno donde resulta muy importante implementar una estrategia de Lazy Load es la web. Fundamentalmente en la parte del cliente (front-end), ya que es inútil hacer llegar a los usuarios toda una serie de funcionalidades, si realmente no se están usando todavía.
Pensemos en una aplicación web Single Page Application que conste de diversas pantallas. En cada pantalla se requiere una funcionalidad determinada, pero generalmente el usuario no visita todas las pantallas de una aplicación. Por eso justamente es importante el Lazy Load, cuando se desea optimizar la carga de las páginas y su velocidad, ya que permite que el navegador solamente reciba aquellos pedazos de código o datos que realmente va a necesitar.
Pero no solamente encontramos Lazy Load en la parte del cliente. En numerosas ocasiones, la programación del lado del servidor (back-end) también puede beneficiarse de las estrategias de Lazy Load. Por ejemplo, con una consulta contra la base de datos, que usa un ORM potente. Éstos generalmente permiten obtener datos de tablas relacionadas solamente en el momento en el que se requieren, optimizando por tanto las consultas SQL.
Ejemplo de Lazy Load en la web
Como hemos dicho, el lugar más fundamental para aplicar una estrategia de Lazy Load es en la programación front-end. Gracias al Lazy Load se consigue que no se cargue todo el código de las aplicaciones, evitando enviar al cliente más JavaScript del estrictamente necesario.
Generalmente, cuando llegamos a este punto de sofisticación de un desarrollo, se hace muy adecuado el uso de un framework, como podría ser Angular o React. Sin embargo, gracias a los avances de JavaScript , hoy no hace falta apoyarse en un framework para obtener esta optimización, ya que el propio lenguaje nos proporciona una construcción ya lista para hacer Lazy Load, como vemos a continuación.
Dynamic import
Los import dinámicos son la respuesta de JavaScript a las necesidades de importación de código en tiempo de ejecución. Están disponibles en la mayoría de los navegadores, aunque todavía las ausencias son bastante relevantes, como se puede ver en la siguiente imagen de la MDN:
Los Dynamic imports los podemos realizar en cualquier script JavaScript basado en módulos de ES6. Para ello usamos una función llamada import(), en la que informamos por parámetro la ruta del código que se desea recuperar.
La función import() devuelve una promesa, que podremos usar para ejecutar el código que sea necesario, después de haber recuperado el módulo que se estaba importando.
import('./mi_modulo.js')
.then((modulo) => {
modulo.funcionDelModulo();
// Esto ha ejecutado una función del módulo
// La exportada, con nombre "funcionDelModulo"
});
Gracias a estos imports dinámicos obtenemos una funcionalidad muy novedosa en JavaScript . Es un ejemplo relevante de uso de Lazy Load para la web, que podemos usar solamente con Javascript, sin tener que apoyarnos en librerías adicionales. Los desarrolladores de aplicaciones web modernas basadas en Web Components los usan habitualmente.
No debe resultar inconveniente que el soporte no esté completamente extendido, porque a este nivel generalmente tenemos el apoyo de sistemas como Webpack o Rollup, que son capaces de entender esta sentencia y transformarla en código compatible con un conjunto de navegadores tan amplio como se requiera.