Header Ads Widget

Ticker

6/recent/ticker-posts

Usando Tailwind CSS en producción


Usando Tailwind CSS en producción

El rendimiento en la web es un gran problema hoy en día, ya que puede hacer o estropear su producto. Ha pasado de ser algo en lo que se debe trabajar después del lanzamiento de un producto a ser una parte muy importante a considerar en cualquier proceso de desarrollo, ya que el rendimiento web es una gran parte de la experiencia del usuario (UX).

  • Según este estudio , el usuario en línea promedio espera que sus páginas se carguen en 4 segundos o menos y un 40% tiene más probabilidades de abandonar su sitio después de tres segundos.
  • Esta publicación de blog muestra cómo la optimización del sitio web de Pinterest para el rendimiento vio un aumento del 15% en el tráfico de SEO y un aumento del 15% en la tasa de conversión para registrarse

¿Qué es un tamaño de paquete?

Para comprender lo que significa un tamaño de paquete, debemos comprender qué es el paquete.

La agrupación es el proceso de un agrupador (como paquete web, paquete o snowpack) para combinar diferentes grupos de activos como HTML, CSS, JavaScript e imágenes para producir un archivo más pequeño conocido como paquete. La agrupación es necesaria para reducir la cantidad de solicitudes HTTP que el navegador debe realizar para ofrecer contenido a los usuarios.

El tamaño del paquete es el tamaño de cualquier paquete generado y afecta el tiempo que tardan en cargar nuestros sitios web y aplicaciones web.

En este artículo, exploraremos cómo reducir nuestro tamaño de paquete de aplicaciones con tecnología Tailwind CSS mediante la agitación de árboles Tailwind CSS, también aprenderemos cómo usar PurgeCSS con Tailwind en producción, exploraremos cómo hacerlo en marcos de JavaScript tales como Vue y React.

¿Qué es Tailwind CSS?

Es una biblioteca CSS de utilidad que se usa para crear diseños personalizados, no ofrece estilos y componentes preconfigurados para construir, más bien le ofrece un conjunto de bloques de construcción no pinchados conocidos como clases de utilidad / ayuda para ayudarlo a diseñar sus componentes.

Según su documentación oficial :

Tailwind CSS es un marco CSS de bajo nivel altamente personalizable que le brinda todos los componentes básicos que necesita para crear diseños a medida sin los molestos estilos obstinados por los que debe luchar para anular.

¿Qué es PurgeCSS?

PurgeCSS es una herramienta de flujo de trabajo de desarrollo para eliminar CSS no utilizado en un proyecto, es la biblioteca predeterminada para controlar el tamaño de los paquetes de Tailwind CSS. Agita los estilos no utilizados y optimiza los tamaños de compilación de CSS.

Según su documentación oficial :

PurgeCSS analiza su contenido y sus archivos CSS. Luego, hace coincidir los selectores utilizados en sus archivos con el de sus archivos de contenido. Elimina los selectores no utilizados de su CSS, lo que resulta en archivos CSS más pequeños.

Prerrequisitos

Este tutorial asume que el lector tiene lo siguiente:

Puede instalar Vue CLI con el siguiente comando usando Yarn:

hilo global agregar @vue / cli  

Verifique que la instalación fue exitosa ejecutando vueen su terminal. Debería ver una lista de los comandos disponibles.

Instalación y construcción Tailwind para producción en Vue

Instalar el paquete CLI globalmente nos da acceso al vuecomando en nuestra terminal, el vue createcomando nos ayuda a crear un nuevo proyecto:

vue crear ejecutar en la terminal

Primero, cree un nuevo proyecto de Vue con el comando:

vue crear vue - viento de cola

El nombre del proyecto "vue-tailwind" se puede reemplazar con el nombre que crea conveniente.

La ejecución de este comando le brinda una experiencia de andamio interactiva, donde puede elegir los paquetes que necesitará su aplicación, también puede decidir guardar la configuración como un ajuste preestablecido para sus proyectos futuros.

A continuación, cambie el directorio a la carpeta del proyecto:

cd vue - viento de cola

A continuación, active el servidor de desarrollo en el navegador para la aplicación recién creada ejecutando uno de estos comandos:

servir hilo
o
npm ejecutar servir

Su aplicación debe ejecutarse en http: // localhost: 8080 de forma predeterminada después de ejecutar el comando:

bienvenido a la aplicación vue

A continuación, instalemos la biblioteca Tailwind CSS. Para instalar Tailwind con el administrador de paquetes Yarn, escriba lo siguiente:

hilo añadir viento de cola

Luego, cree un archivo de configuración predeterminado para su proyecto con la utilidad CLI Tailwind que se incluyó con el tailwindcsspaquete, esto ayuda a personalizar su instalación Tailwind:

npx tailwindcss init

Este comando crea un  archivo en el directorio base de su proyecto, el archivo contiene toda la configuración predeterminada de Tailwind.tailwind.config.js

A continuación, crear una stylescarpeta en la carpeta y crear un archivo dentro de la carpeta, esto es donde importaremos de viento de cola configuraciones de estilos.src/assetstailwind.cssbasecomponentsutilities

Utilice la @tailwinddirectiva para inyectar de viento de cola basecomponentsutilityestilos en su CSS, coloque el siguiente contenido en su archivo:tailwind.css

@ base de viento de cola ; 

@ componentes de viento de cola ;

@ utilidades de viento de cola ;

A continuación, cree un en el directorio raíz de su proyecto e incluya lo siguiente:postcss.config.js

módulo . exportaciones = { 
    complementos : [ 
        require ( 'tailwindcss' ),
        require ( 'autoprefixer' )
    ]
}

Compile y cree los estilos generados a partir de su archivo con la herramienta de utilidad Tailwind CLI, ejecute este comando:tailwind.css

npx tailwindcss compila src / assets / styles / tailwind . css - o src / assets / styles / index . css

Este comando debería producir algo similar a esto:
tailwindcss ejecutándose en la línea de comandos
Podemos ver que el tamaño de salida para la compilación de desarrollo es de 2,26 MB sin comprimir, ahora eso es enorme.

Proceda a importar su archivo a su aplicación, coloque las siguientes líneas de código en su archivo de esta manera:index.cssApp.vue

< style src = "./assets/styles/index.css" > 

Abra su y agregue algunos estilos aleatorios de los estilos predeterminados proporcionados por tailwind a la plantilla.App.vue

El paso de compilación para nuestra construcción de nuestros estilos se puede resumir en un script npm, abrir su archivo e incluir un script en el objeto.package.jsonstylescripts

Coloque las siguientes líneas de código en el archivo:package.json

"scripts" : { 
  "style" : "tailwindcss build src / assets / styles / index.css -o src / assets / styles / tailwind.css" , 
// otros scripts
}

A continuación, construyamos nuestra aplicación para producción, usaremos el comando:

construcción de hilo

Este comando inicia el proceso que produce un paquete súper optimizado listo para producción en el directorio.vue-cli-service builddist/

En su CLI debería obtener lo siguiente:

mensaje de compilación del servicio vue cli

Podemos ver que la compilación de CSS es bastante grande para una aplicación que solo contiene los estilos predeterminados, imagina un escenario en el que agregamos nuevos estilos para extender los estilos existentes.

Reducir el tamaño del archivo con PurgeCSS

A continuación, incluyamos las configuraciones para PurgeCSS. Abra su archivo y reemplace la matriz entre los con lo siguiente:tailwind.config.jspurgemodule.exports

purgar : { 
  habilitado : verdadero , 
  contenido : [ 
     './src/**/*.vue' ,
    './public/**/*.html' ,
  ]
},

Lo que hemos hecho es que alimentamos una matriz de rutas para que PurgeCSS las verifique, pasa por los archivos en las rutas especificadas y luego purgestodas las clases que no están definidas en ninguno de los archivos proporcionados en la matriz.

Ejecutar el comando de la utilidad Tailwind para construir los estilos nuevamente y empaquetarlos para la producción verá una caída muy significativa en el tamaño del fragmento CSS.

Ejecute el siguiente comando:

estilo de hilo && construcción de hilo

mensaje compilado correctamente

Cuando ejecutamos la compilación de producción, podemos ver una reducción masiva del tamaño de nuestro archivo CSS y con esta reducción de tamaño viene una mejora en la rapidez con que se carga nuestra aplicación para los usuarios.

Instalación y construcción Tailwind para producción en React

Primero, cree un nuevo proyecto con create-react-app, escriba el siguiente comando en su terminal:

npx crear - reaccionar - reaccionar de la aplicación - tailwind

create-react-app es la herramienta de compilación oficial de React para proyectos de React bootstrapping y scaffolding. Construido sobre el paquete web , es una herramienta que resuelve las molestias de configurar y configurar los procesos de compilación para proyectos y le permite concentrarse en escribir el código que impulsa su aplicación.

A continuación, cambie su directorio de trabajo a la carpeta de su proyecto:

cd react - viento de cola

A continuación, instale Tailwind CSS en su proyecto:

hilo añadir viento de cola

Luego proceda a inicializar Tailwind CSS en su proyecto con la herramienta de utilidad Tailwind CLI, que se incluyó con el tailwindcsspaquete, esta herramienta de ayuda crea un archivo en el directorio base de su proyecto, el archivo contiene toda la configuración predeterminada de Tailwind. Para personalizar su instalación de Tailwind:tailwind.config.js

npx tailwindcss init

A continuación, crear un archivo dentro de la carpeta, esto es donde importaremos de viento de cola configuraciones de estilos.tailwind.css/srcbasecomponentsutility

Utilice la @tailwinddirectiva para inyectar de viento de cola basecomponentsutilityestilos en su CSS, coloque el siguiente contenido en su archivo:tailwind.css

@ base de viento de cola ; 

@ componentes de viento de cola ;

@ utilidades de viento de cola ;

A continuación, cree un en el directorio raíz de su proyecto e incluya lo siguiente:postcss.config.js

módulo . exportaciones = { 
    complementos : [ 
        require ( 'tailwindcss' ),
        require ( 'autoprefixer' )
    ]
}

A continuación, abra su  y agregue algunos estilos aleatorios de los estilos predeterminados proporcionados por Tailwind a la plantilla.App.js

Luego proceda a eliminar el contenido de su archivo, luego compile y cree los estilos generados a partir de su archivo en el archivo con la herramienta de utilidad Tailwind CLI, ejecute este comando:index.csstailwind.cssindex.css

npx tailwindcss compila src / tailwind . css - o src / index . css

Mensaje de ruptura de cambios en la interfaz de línea de comandos

Este comando debería producir una compilación de desarrollo de 2,44 MB, que es muy grande.

Ejecute el comando:

construcción de hilo

ejecutar construcción de patio
Agrupar nuestro proyecto para la producción también produce un tamaño de fragmento CSS de 186,66 KB, que es un tamaño muy grande para una aplicación de este tamaño.

Reducir el tamaño del archivo con PurgeCSS

A continuación, incluyamos las configuraciones para PurgeCSS, abra su archivo e incluya lo siguiente entre :tailwind.config.jsmodule.exports

purgar : { 
    contenido : [ 
      'src / ** / *. js' ,
      'src / ** / *. jsx' ,
      'público / ** / *. html' ,
    ]
},

Lo que hemos hecho es que alimentamos una matriz de rutas para que PurgeCSS las verifique, pasa por los archivos en las rutas especificadas y luego purgestodas las clases que no están definidas en ninguno de los archivos proporcionados en la matriz.

Ejecutar el comando de la utilidad Tailwind para construir los estilos nuevamente y empaquetarlos para la producción verá una caída muy significativa en el tamaño del fragmento CSS.

Ejecute el siguiente comando:

npx tailwindcss compila src / tailwind . css - o src / index . css && construcción de hilo

comando npx tailwindcss

Debería obtener una compilación de desarrollo de ~ 14KB y un tamaño de compilación de producción de menos de 2KB.

Compilación de producción optimizada del paquete completo

Advertencia: solo debe usar PurgeCSS en entornos de producción, purgar estilos durante el desarrollo significa que debe volver a compilar Tailwind con mucha frecuencia, especialmente en los casos en que necesita clases de utilidad que no se usaron en su compilación anterior. La habilitación de la purga de solo producción se puede configurar al incluir la enabledopción en su configuración de PurgeCSS y configurarla para que se compile según el entorno en el que se encuentre, incluya lo siguiente en su purgeobjeto:

habilitado : proceso . env . NODE_ENV === 'producción' 

Aunque el uso de PurgeCSS resuelve la mayoría de sus necesidades de control de tamaño, otra forma de reducir el tamaño de su archivo CSS Tailwind es eliminando los valores de configuración de estilos no utilizados de su archivo, como:tailwind.config,.js

  • Eliminar los colores no utilizados de la paleta de colores predeterminada para incluir solo los colores utilizados en el proyecto
  • Eliminar el punto de interrupción de consultas de medios no utilizados
  • Deshabilitar utilidades y variantes no utilizadas

Estas otras estrategias mejoran nuestra compilación de CSS de manera significativa, pero no son tan efectivas como usar purgeCSS para sacudir nuestros estilos no utilizados.

Conclusión

En este artículo, hemos visto cómo usar Tailwind CSS en Vue y React, también hemos visto cómo condicionalizar el árbol de nuestros estilos CSS en función del entorno para el que estamos construyendo. Puedes leer más en la documentación .

Visibilidad total de las aplicaciones React de producción

La depuración de las aplicaciones de React puede resultar difícil, especialmente cuando los usuarios experimentan problemas que son difíciles de reproducir. Si está interesado en monitorear y rastrear el estado de Redux, detectar automáticamente errores de JavaScript y rastrear solicitudes de red lentas y tiempo de carga de componentes, pruebe LogRocket .

LogRocket es como un DVR para aplicaciones web, que graba literalmente todo lo que sucede en su aplicación React. En lugar de adivinar por qué ocurren los problemas, puede agregar e informar en qué estado se encontraba su aplicación cuando ocurrió un problema. LogRocket también monitorea el rendimiento de su aplicación, informando con métricas como la carga de la CPU del cliente, el uso de la memoria del cliente y más.

El paquete de middleware LogRocket Redux agrega una capa adicional de visibilidad a sus sesiones de usuario. LogRocket registra todas las acciones y el estado de sus tiendas Redux.

¿Su interfaz está acaparando la CPU de sus usuarios?

A medida que las interfaces web se vuelven cada vez más complejas, las funciones que consumen muchos recursos exigen más y más del navegador. Si está interesado en monitorear y rastrear el uso de la CPU del lado del cliente, el uso de la memoria y más para todos sus usuarios en producción, pruebe LogRocket .Banner de prueba gratuita de LogRocket Dashboard


Publicar un comentario

0 Comentarios