CSS

Agregar almacenamiento en caché de CDN a Vite Build trucos CSS

Almacenamiento en caché de CDN a Vite Build

Las redes de entrega de contenido o CDN le permiten mejorar la entrega de recursos estáticos a su sitio web, especialmente mediante el almacenamiento en caché de CDN. Lo hacen entregando su contenido desde ubicaciones extremas en todo el mundo. Cuando un usuario navega a su sitio y su sitio requiere recursos de CDN, el CDN dirigirá esta solicitud al punto final más cercano. Si esta ubicación tiene los recursos solicitados, ya sea de una visita anterior a este usuario o de otra persona, el contenido se almacenará en caché. De lo contrario, CDN solicitará contenido de su dominio principal, lo almacenará en caché y lo entregará.

Hay innumerables CDN, pero usaremos AWS CloudFront para esta publicación. Veremos cómo configurar una distribución de CloudFront para servir todos los activos de nuestro sitio: archivos JavaScript, archivos CSS, archivos de fuentes, etc. Veremos sobre su integración en un Vite construir. Si desea obtener más información sobre Vite, aquí tengo una introducción.

Configurar la distribución de CDN de CloudFront

Entremos y configuremos nuestra distribución de CDN de CloudFront.

Para cualquier proyecto importante, debe configurar su infraestructura del lado del servidor con código usando algo como Sin servidor AWS Framework o CDK. Pero para ser simple, aquí configuraremos nuestro CDN usando la consola de AWS.

Vaya a la página de inicio de CloudFront. En la esquina superior derecha debería ver un botón naranja para crear una nueva distribución.

La pantalla de creación tiene muchas opciones, pero en su mayor parte, las selecciones predeterminadas estarán bien. En primer lugar, agregue el dominio donde se encuentran sus recursos.

Pantalla para crear una distribución CDN de CloudFront.

A continuación, desplácese hacia abajo y busque Reglas para los títulos de las respuestas. menú desplegable y seleccione «CORS-With-Preflight».

Configuración del encabezado de respuesta de CloudFront.

Finalmente, haga clic en Crear una distribución botón en la parte inferior y esperamos que vea su nueva distribución.

Pantalla de vista previa de distribución de CloudFront CDN.

Integrar CDN con Vite

Una cosa es tener nuestro CDN configurado y listo para servir nuestros archivos, pero otra cosa es tener nuestro sitio realmente conocimiento cómo para solicítalos desde nuestro CDN. Revisaré la integración con Vite, pero otros sistemas de construcción, como webpack o Rollup, serán similares.

Cuando Vite construye nuestro sitio, mantiene los «gráficos» de todos los archivos JavaScript y CSS que diferentes partes de nuestro sitio importan e inyecta el <script> etiquetas <link> etiquetas, o import() declaraciones para cargar lo que se necesita. Lo que debemos hacer es decirle a Vite que reclame estos activos de nuestra CDN cuando estén en producción. Veamos cómo.

Abre los tuyos vite.config.ts Primero, necesitaremos saber si estamos en un sitio en vivo (producción) o en desarrollo (dev).

const isProduction = process.env.NODE_ENV === "production"; 

Esto funciona porque Vite establece esta variable en el entorno cuando comenzamos vite buildlo que hacemos para la producción, a diferencia del modo dev con recarga en caliente del módulo.

Luego le decimos a Vite que retire nuestros activos de nuestro CDN como se configuró base propiedad de nuestro objeto de configuración:

export default defineConfig({
  base: isProduction ? process.env.REACT_CDN : "",

No olvides configurar el tuyo REACT_CDN variable de entorno a la ubicación de su CDN, que en este caso será la ubicación de nuestra distribución de CloudFront. El mío se ve algo (pero no exactamente) así:

https://distributiondomainname.cloudfront.net

¡Mira la configuración de tu VitePWA!

Como última parte de la limpieza, si accidentalmente usa Complemento VitePWAno olvides resetear el tuyo base propiedad como esta:

VitePWA({
  base: "https://css-tricks.com/",

de lo contrario tuyo web.manifest El archivo tendrá una configuración no válida y provocará errores.

Veamos cómo funciona CDN

Una vez que haya configurado, navegue por su sitio y revise cualquiera de las solicitudes de red para sus scripts o archivos CSS. Para empezar, el protocolo debería ser h2.

Muestre los activos atendidos por el almacenamiento en caché de CDN en DevTools. Cada nombre de archivo incluye una cadena aleatoria única de letras y números.

Desde allí, puede ver los encabezados de respuesta de cada uno de estos archivos y debería ver algunos datos de CloudFront allí:

Captura de pantalla del encabezado de respuesta.

Romper caché

Es difícil hablar de CDN sin mencionar la eliminación de caché. Los CDN como CloudFront tienen la funcionalidad de «volcar» manualmente elementos del caché. Pero para los activos creados por Vite, obtenemos esto «gratis» porque Vite agrega huellas dactilares o códigos hash a los nombres de archivo de los activos que produce.

Para que puedas convertirte en un home.js presentar en home-abc123.js durante la construcción, pero luego, si cambia este archivo y lo construye de nuevo, puede levantarse home-xyz987.jsEsto es bueno porque «romperá el caché» y el archivo recién creado no se almacenará en caché, por lo que la CDN tendrá que comunicarse con nuestro dominio de host para obtener el contenido real.

Almacenamiento en caché de CDN para otros activos estáticos

Los archivos JavaScript, CSS y de fuentes no son los únicos tipos de activos que pueden beneficiarse del almacenamiento en caché de CDN. Si tiene un depósito S3 que sirve imágenes desde, considere configurar una distribución de CloudFront y para ello. Hay opciones específicas para el S3, lo que hace que su creación sea rápida. No solo obtendrá el mismo almacenamiento en caché periférico, sino también las respuestas HTTP / 2 que hace el S3 no proveer.

Prácticas avanzadas de CDN

Integrar CDN aquí ha sido relativamente fácil, pero solo disfrutamos de un puñado de beneficios potenciales. En este momento, los usuarios verán nuestra aplicación, nuestro servidor servirá nuestro archivo HTML principal y luego el navegador del usuario se conectará a nuestra CDN para comenzar a descargar todos nuestros activos estáticos.

En el futuro, nos gustaría servir todo nuestro sitio CDN. De esta manera, puede comunicarse con nuestro servidor web de acuerdo con las necesidades de activos no estáticos y no almacenados en caché.

Conclusión

Los CDN son una excelente manera de mejorar el rendimiento de su sitio. Proporcionan almacenamiento en caché final y HTTP / 2 desde el cuadro. No solo eso, sino que también es relativamente fácil de configurar. Ahora tiene una nueva herramienta en su haber para que ambos puedan crear una CDN e integrarla con Vite.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba