Optimización de Fuentes Locales con Webpack

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:07

Optimización de Fuentes Locales con Webpack

Curso de Webpack

Clase 11 de 28

Clase 11 / 28

Recursos

¿Cómo optimizar fuentes externas integrándolas al proyecto?

Cuando trabajamos con fuentes externas, como las de Google Fonts, es común que nuestros proyectos se vuelvan más pesados por los llamados que se realizan a estas fuentes. Una excelente práctica de optimización consiste en integrar estas fuentes de manera local dentro del proyecto. Esto garantiza un rendimiento mejorado y una carga más rápida. Aquí te explicamos cómo hacerlo utilizando webpack.

¿Cómo identificar y descargar la fuente?

El primer paso es identificar qué fuentes estás utilizando actualmente. En muchos proyectos, las fuentes se gestionan desde la hoja de estilos principal. Por ejemplo, si estás importando la fuente "Ubuntu" de Google Fonts en tu archivo CSS, es momento de descargarla para incorporarla localmente. Si bien Google Fonts permite la descarga de fuentes, es necesario obtenerlas en formato optimizado para la web, como .woff o .woff2.

Para facilitar este proceso, hay herramientas en línea donde puedes seleccionar y descargar fuentes en el formato deseado. Una opción puede ser usar un generador de fuentes web que permita la descarga en los formatos requeridos.

¿Cómo integrar las fuentes localmente con font-face?

Una vez descargada la fuente, es momento de integrarla al proyecto. Crea una carpeta fonts dentro de tu directorio assets y coloca ahí las fuentes descargadas. Luego, en tu archivo CSS, utiliza la regla @font-face para definir la fuente localmente.

@font-face {
    font-family: 'Ubuntu';
    src: url('../assets/fonts/ubuntu-regular.woff2') format('woff2'),
         url('../assets/fonts/ubuntu-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Con esta configuración, estás indicando al navegador que utilice las fuentes locales en lugar de recurrir a servidores externos. Esto no solo mejora la velocidad de carga, sino también la consistencia del proyecto.

¿Cómo configurar webpack para copiar fuentes?

Una vez que tus fuentes están integradas localmente, el siguiente paso es asegurarte de que se incluyan correctamente en la carpeta de distribución al momento de compilar el proyecto con webpack. Para esto, necesitas configurar webpack para que maneje las fuentes de la misma manera que las imágenes.

Primero, instala los loaders necesarios:

npm install url-loader file-loader --save-dev

Luego, añade la siguiente configuración a tu archivo webpack:

module.exports = {
  module: {
    rules: [
      // Otras reglas
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype: 'application/font-woff',
            name: '[name].[ext]',
            outputPath: 'assets/fonts/',
            publicPath: 'assets/fonts/',
            esModule: false
          }
        }
      }
    ]
  }
};

Con estas reglas, le indicas a webpack cómo manejar y procesar los archivos de fuentes, asegurando que se copien a la ubicación correcta en la carpeta de distribución.

¿Cómo verificar la integración exitosa?

Finalmente, después de configurar y compilar el proyecto, es crucial verificar que las nuevas configuraciones funcionan correctamente. Puedes servir tu proyecto con npm run dev o un servidor similar para observar los cambios.

Verifica que las fuentes se carguen localmente inspeccionando el elemento y asegurando que el font-family aplicado corresponda al que has definido. También es recomendable verificar visualmente que la representación de las fuentes sea la esperada por sus características distintivas, como las formas de las letras.

Una integración correcta de las fuentes no solo optimiza la carga del sitio, sino que también garantiza que las tipografías se muestren de manera consistente en todos los navegadores y dispositivos. Esta mejora es un paso más hacia la eficiencia y la performance en la gestión de recursos de un proyecto de desarrollo web.

Miguel Hernández Casiano

Hace 4 años

Tus posibles dudas resueltas:

1. ¿Por qué usamos @font-face?

Cuando importamos una fuente desde Google, realmente lo que hace e generar esta regla en nuestros estilos. En esencia estamos escribiéndolo manualmente. .

2. ¿De dónde salen todos los parametros que estamos poniendo dentro de font-face?

Son propiedades que puede tener la regla de estilos font-face. font-family: "Es el nombre que tú le asignas a la fuente. Puede ser el que quieras, pero debes ser consistente con este nombre en todo el documento. src: Url o ruta hacia donde se encuentra la fuente. En este caso podríamos pegar alguna url de internet o usar un directorio local. .

3. ¿Por qué le pasamos dos src a la @font-face?

¿Te fijaste que le mandamos dos url? Una para el formato woff2 y otra para el formato woff. Esto es por cuestiones de compatibilidad de los navegadores. No todos los navegadores son compatibles con todos los formatos de fuentes. Por este motivo se introducen dos valores en "src", para que en caso de que una no funcione, el navegador pueda cargar la otra. font-style: Se refiere a cómo se va a estilizar la fuente: normal, itálica o negritas. En caso de no poner nada, el valor por defecto es "normal". Hay más propiedades que se pueden editar en la regla de estilos @font-face y puedes verlo en este artículo de w3schools .

4. ¿Por qué utilizamos url-loader y file-loader?

El curso está un poco desactualizado. Antes de webpack 5, estos eran los loaders para: url-loader: exportar el archivo en esquema URI. De manera sencilla esto optimiza la forma en que el servidor solicita los recursos. En esencia es para agregar el recurso al gráfico de dependencias. Te recomiendo leer más sobre el esquema URI si quieres profundizar. file-loader: Si el url-loader permite agregar el archivo al gráfico de dependencias, el file-loader permite exportarlo. . Si te lo estás preguntando al finalizar el video: es correcto, nunca usamos file-loader aquí (revisa el video nuevamente y verás que nunca lo configuramos ni nada, es posible que en videos posteriores lo usemos). ¿Entonces cómo es que se generaron los archivos de las fuentes en la exportación? Esa es la magia del esquema URI. El profesor debería meterse en el detalle, ya que es posible que si excedemos el limit que le pusimos a url-loader, webpack utilice en su defect url-loader, pero esto nunca lo configuramos. . ¿Por qué digo que está desactualizado el curso? Porque actualmente se puede usar el Asset-management que trae webpack por defecto. ¿Recuerdas que lo utilizamos para pasar las imágenes en la lección anterior a esta? Pues es lo mismo, solo tienes que cambiar el valor del atributo typeal correspondiente. Más info en la documentación .

5. ¿De dónde rayos salen esos parámetros que le pone al url-loader el profe?

Esto es un punto malo del profesor. Que solo pone lo que escribe y no explica el por qué de cada propiedad. Pero te lo explico: . Primero considera que este recurso ya no se debería usar. En la pregunta 4 te deje un enlace al nuevo recurso que deberíamos usar. Segundo, ten a la mano la documentación de url-loader, a la cual puedes acceder aquí: En dicha documentación puedes ver que los parámetros que puso el profe son los que te permite este loader. . Hay más, pero aquí te resumo los que utilizó el profesor: limit: El url-loader convierte los archivos a base 64. Si quieres saber a qué se refiere eso de base64, por favor lee este artículo. Al transformarlo, el archivo tendrá un peso en bytes, si el peso es menor al límite, se devuelve una URI, lo cual nos ayudará a generar una dependencia y así poder agregar el elemento al gráfico de dependencias. Nuevamente te recomiendo leer sobre el esquema URI. Si te lo preguntas, podemos poner un valor más elevado en limit. El valor por defecto si no lo ponemos, es "sin límite". . mimetype: Es una forma de transmitir información a trvés de internet. Puedes buscar en google como "Media Type". Según la wikipedia ya no debemos usar application-font-woff, sino simplemente font/woff. Si te lo preguntas, esto no es obvio, tienes que investigarlo y es algo que el profesor debería aclarar. . name: Nombre con el que se exportará. Tampoco es obvio que podemos poner el nombre así, ya que no aparece en el artículo de url-loader. Supongo que aplica las mismas reglas de "output" que aparece está hasta al principio de nuestro archivo de configuración, ya que supongo que lo hereda de module.exports. Puedes ver documentación de esto aquí:
. outputPath: Lugar donde se exportará el archivo. No viene en la documentación, así que no es obvio. De igual manera supongo que hereda la propiedad desde module.exports. . PublicPath: lugar donde está tu archivo. Aunque no aparece en la documentación como tal en url-loader, supongo que hereda esta propiedad de module.exports. A mi me sirvió este vínculo de stackoverflow. . esModule: El otro loader file-loader genera, por defecto, módulos con syntaxis de EcmaScript (ES = EcmaScript, versiónes nuevas de JAvaScript). Para evitar esto y hacer que se genere una sintaxis común para todo, ponemos en false. .

6. ¿De dónde sale assetModuleFileName?

Empieza por leer la documentación en la parte de output. Esto parte del video no tiene que ver con las fonts, es solo que al profesor se le debió olvidar hacerlo antes. Por defecto el type utilizamos (asset/resource, revisa la parte donde exportamos las imágenes) exporta las imágenes con el nombre: [hash][ext][query]. hash: Número aleatorio. ext: extensión query: utilizado para dar parámetros adicionales. ¿Se puede cambiar esto? Sí, así es. Puedes hacerlo en la parte de module.exports.output, agregando/modificando assetModuleFilename:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
   assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ]
  },
};

Diego Geovanny Bracero

Hace 4 años

Si dieras tu el curso sería tan diferente

Yuliam Rivera González

Hace 4 años

un crack total

Comentarios (120)120 comentarios

Rony Porraz Vargas

Hace 6 años

Emmanuel Rodríguez

Julia Suárez

Paolo Carrion

Hace 5 años

Raul Cova

Santiago Escalante

Jhean Pacheco

Ernán Alexander Velásquez Ramírez

Carlos Salas Torres

Luis Miguel Falcon Montaño

Andres David Sanchez

Luis Enrique Carrera Valle

Ana Valeria Araujo Parracy

JeanCarlos Atoche Pascual

Fernando Quinteros Gutierrez

Christian Velázquez

Fernando Molano Castrillón

Reinaldo Mendoza

Luis Lozada

Carlos Andres Bohorquez Duran

Juan Álvarez

Kevin Acevedo

Enrique A. Estrada

David Balleza Ayala

Yerson David Aguilar Martinez

Franklin Gerardo Pimentel Hernández

Ruben Abreu

Felix Reyna

Oscar Fuentes Esteves

Andrés Apóstol

Harold Ormeño

Luis Mendoza

Hace 3 años

Diego Reyes Cabrera

Miguel Ortiz

Camilo Pimentel

Leonardo Angelit Gálvez

Lucas Perez

Dámaris Raquel Terrazas Terán

Griger Ratia

Josmanuel Sandrea

Achraf Mharmel

Alejandro Ivan Mendieta

Jose Alberto Reyes Quevedo

Andres Prieto

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

Optimización de Proyectos Web con Webpack para Producción

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Importación de Imágenes con Webpack Asset Module

Optimización de Fuentes Locales con Webpack

Optimización de Proyectos con Webpack: Minificación y Hashing

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

Variables de Entorno en Webpack para Proyectos Seguros

Configuración de Webpack para Modo Desarrollo

Configuración de Webpack para Producción y Limpieza de Builds

Activar Watch Mode en Webpack para Desarrollo y Producción

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

Configuración de Webpack Dev Server para Desarrollo Local

Análisis de Dependencias con WebPath Bundle Analyzer

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

Configuración de Webpack y React desde Cero para Producción

Configuración de Webpack en Proyecto React con Babel y JSX

Configuración de Webpack para Proyectos HTML y Servidor Local

Configurar CSS y SaaS en React con Webpack

Configuración de Webpack para Producción en React

Despliegue de Aplicaciones React en Netlify

Próximos pasos

Configuración y Uso de Webpack con React

Optimización de Fuentes Locales con Webpack