Integración de Librerías en Proyectos JavaScript

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0014:57

Integración de Librerías en Proyectos JavaScript

Curso de Optimización Web

Clase 26 de 38

Clase 26 / 38

Recursos

Integrar librerías de terceros en un proyecto con webpack no siempre es sencillo, especialmente cuando la librería elegida no fue diseñada para el flujo que necesitamos. Aquí se muestra paso a paso cómo instalar Modal Video desde NPM, conectarla con listeners ya existentes y resolver los problemas de CSS que aparecen al importar estilos de un paquete externo.

¿Cómo conectar los listeners con la librería Modal Video?

El punto de partida es un proyecto que ya captura el video ID de YouTube mediante listeners optimizados [01:00]. El siguiente paso es crear una función que reciba ese identificador y abra el modal correspondiente.

Se crea un archivo separado llamado openModal.js para mantener el código organizado.
La función se exporta como un named export, lo que obliga a importarla con la misma sintaxis: import { openModal } from './openModal' [03:18].
Dentro de openModal, se recibe el videoId como parámetro y, por ahora, se imprime en consola para verificar que la conexión funciona.

Un detalle importante es el uso de template literals (comillas invertidas) para interpolar variables dentro de cadenas de texto [04:05]. Si se olvidan, la interpolación con ${} no funciona.

¿Por qué esta librería requiere un hack para funcionar con lazy loading?

La librería Modal Video se instala con npm install modal-video [01:42]. Sin embargo, su API no expone un método directo como .open(videoId). En cambio, funciona mediante una función constructora que necesita recibir una clase CSS o un elemento del DOM al que se le asigna un listener automático [05:08].

Esto genera un problema: no es compatible directamente con el patrón de lazy loading que se busca implementar. La solución es un hack que crea un botón fantasma en memoria [06:02]:

javascript const button = document.createElement('button'); button.dataset.videoId = videoId; new ModalVideo([button]); button.click();

Se crea un elemento <button> con document.createElement.
Se le asigna el videoId usando la propiedad dataset, que en JavaScript se accede como button.dataset.videoId en lugar de data-video-id del HTML [06:30].
Se instancia ModalVideo pasándole un array con el botón como elemento a escuchar.
Finalmente se ejecuta button.click() para forzar la apertura del modal de forma programática [07:05].

Este patrón de crear elementos en memoria y simular interacciones es útil cuando una librería no ofrece una API flexible.

¿Cómo resolver el problema de CSS con webpack loaders?

Al ejecutar el código, el modal aparece pero sin estilos [08:02]. La librería incluye su propio archivo CSS dentro de node_modules/modal-video/css/modal-video.min.css. Para importarlo basta con:

javascript import 'modal-video/css/modal-video.min.css';

Pero webpack no entiende CSS por defecto y lanza un error [08:45]. Se necesitan dos loaders:

css-loader: permite a webpack interpretar archivos .css.
style-loader: inyecta el CSS procesado dentro del bundle final.

Se instalan como dependencias de desarrollo:

bash npm install --save-dev style-loader css-loader

Y se configura una nueva regla en webpack.config.js [09:25]:

javascript module: { rules: [ { test: /.css$/i, use: ['style-loader', 'css-loader'] } ] }

La expresión regular /\.css$/i indica que la regla aplica a cualquier archivo que termine en .css, sin importar mayúsculas o minúsculas. El flag i se encarga de esa insensibilidad [09:50].

Tras reinstalar y ejecutar npm run dev, el modal se muestra correctamente con estilos aplicados [10:22]. Al hacer clic en cualquier elemento, se abre un modal funcional con el video de YouTube correspondiente.

El resultado es una integración que funciona al 90 %. Queda pendiente revisar por qué algunos videos muestran un error de reproducción dentro del modal, un reto ideal para practicar la depuración. ¿Te animás a investigar qué ajuste falta para que todos los videos carguen correctamente?

Gabriel Hernández Valdez

Hace 5 años

Hola, tengo un problema que he tratado de solucionar ya un par de horas pero no he podido. Al importar el CSS por medio del JS la compilación no funciona aun teniendo la configuración y las dependencias:

Primero al instalar las dependencias

Encontré que podía usar "npm install --legacy-peer-deps " para instalar las dependencias ante el conflicto, pero cuando intenten compilar me salía lo siguiente en la terminal:

ERROR in ./node_modules/modal-video/css/modal-video.min.css
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (/home/onedrako/cursos_platzi/escuela_desarrolloWeb/cursos_intermedios/curso_optimizacion_web/platzi-optimizacion-web/node_modules/style-loader/dist/index.js:19:24)
 @ ./src/modal/openModal.js 2:0-44
 @ ./src/modal/index.js
 @ ./src/index.js
ℹ ｢wdm｣: Failed to compile.

Al final por el tiempo que tarde hice lo siguiente, y por si a algún otro compañero le paso , importe el CSS del modal-loader directamente al CSS del proyecto , con esto ya se hizo la carga correctamente y borre la linea en el JS para evitar problemas

@import url(./node_modules/modal-video/css/modal-video.min.css);

Esta es mi configuración de webpack

const path = require('path')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const shouldAnalyze = process.argv.includes('--analyze') //argv, es un array con son los argumentos de node que se envian con la consola

console.log(process.argv)

const plugins = []

if (shouldAnalyze) {
  plugins.push(new BundleAnalyzerPlugin())
}

const nodeEnv = process.env.NODE_ENV || 'development'

const config = {
  mode: nodeEnv,
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist',
    filename: '[name]bundle.js',
  },
  devServer: {
    contentBase: '.',
  },
  plugins,
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["css-loader"],
      },
    ],
  },
}

module.exports = config

Luis Guilermo Figueroa Hernandez

Hace 5 años

lo que pasa es que style-loader y css-loader solo funcionan con webpack5, lo puedes mirar en la documentación, y en este curso desde el inicio estamos usando webpack4. Para que no te compliques, copia el css de modal-video en el css que ya esta cargando y asi puedes continuar con el curso. 😀

Luis Guilermo Figueroa Hernandez

Hace 5 años

amigo una solucion mas facil es que uses las versiones del profe:

"style-loader": "^2.0.0",
"css-loader": "^5.2.6",

eso me sirvió

Comentarios (10)10 comentarios

Leonardo de los angeles Espinoza Hernandez

Hace 6 años

Sebastián Buitrago

Carlos Mazzaroli

Jorge Cruz Perez

Wilkins Bernardo Brito Serrano

Carlos Guillermo Coello Valenzuela

Paolo Joaquin Pinto Perez

Kenneth Angulo L

Hace 2 meses

Rubén Ernesto Aragón Gil

Hace 4 años

Naldo Duran

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Integración de Librerías en Proyectos JavaScript