Proxy Esta entrada continua con el tema de patrones de diseño y en esta ocasión vamos a examinar el patron Proxy y algunas de sus ventajas. Descripción. El proxy es un patrón de diseño, de tipo estructural y consiste en definir un objeto/componente (sustituto) por medio del cuál controlamos el acceso a otro (original). Esto nos permite agregar funcionalidad adicional así como simplificar la interacción con el objeto original. Ejemplo. RealSubject : es el objeto que nuestro Proxy va a "sustituir. Tiene 2 métodos: connect y disconnect Proxy : es el objeto que controla el acceso a RealSubject . Internamente crea una referencia de RealSubject y hace las llamadas a los métodos correspondientes. La clase mantiene la misma interfaz (connect y disconnect) pero añade funcionalidades extras ( fireBeforeConnectEvent y fireAfterConnectEvent ) así como un control de errores (try/catch). Con este patron podemos agregar funcionalidades que necesitemos en nuestro proyecto sin tener que modifi
Básicamente webpack ádemas de ayudarnos a empaquetar todos nuestros scripts (javascript) en un solo archivo (bundle) también nos permite incluir otro tipos de archivos (texto, imágenes, fonts, etc).
Lo cuál la convierte en una herramienta versátil y de paso nos simplifica la vida al incorporarla en nuestros proyectos.
Todo esto es posible gracias a 2 increíbles funcionalidades que webpack pone a nuestra disposición:
Asset Modules
Loaders
Modulos de Activos
Hoy vamos hablar un poco de los Asset Modules (Modulos de activos), que es una nueva funcionalidad introducida en webpack 5.
En versiones anteriores teníamos que instalar y configurar loaders adicionales (raw-loader, file-loader) para realizar la misma tarea; ahora los Modulos de activos han simplificado todo el proceso.
Lo único que tenemos que hacer es indicarle a webpack como importar dichos archivos, y sí, modificando nuestro webpack.config.js.
Dependiendo de la naturaleza del archivo(s) podemos usar alguno de 4 Modulos de Activos disponibles.
Tipos de Modulos de Activos
asset/resource
Este tipo de modulo de activos genera un archivo en el directorio donde se genera nuestro bundle y exporta la URL de dicho archivo, que podemos usar para hacer referencia al mismo dentro de nuestro código.
Generalmente usaremos este tipo de modulo de activos con archivos de tamaño considerable, ya que no sería muy buena idea incluirlos directament en el bundle.
asset/inline
Este tipo de modulo de activos embede los archivos dentro del bundle como un string codificado en Base 64 (data URI).
Podemos emplear este tipo de modulo con archivos pequeños (Kb o menos).
asset/general
Este tipo de modulo de activos es una combinación de los dos anteriores (inline/resource) y webpack decide cual usar dependiendo del tamaño de los archivos (assets).
Si el archivo es menor a 8Kb, webpack lo tratará como un asset/inline; Si el archivo es mayour a 8Kb, webpack lo tratará como un asset/resource.
También es posible cambiar esa configuración pero lo dejaremos para otro momento.
asset/source
Este tipo de modulo, no genera un archivo externo, lee el contenido del archivo y lo incluye directamente en nuestro bundle sin ninguna modificación.
Generalmente usaremos este tipo de modulo para agregar archivos que contengan data de inicialización o incluso como muestra.
Comentarios