Optimizar el CSS y JS Bootstrap de una página web con ViteJS

Cómo optimizar el CSS y JS Bootstrap de una página web

1. Proyecto web a optimizar
2. Instalación de Dependencias:
3. Configuración del Plugin PurgeCSS:
4. Importación de Estilos en tu Aplicación:
5. Minificación de JS:
6. Generar los Build - producción
7. Beneficios de reducir el tamaño CSS y JS

Proyecto web con Bootstrap a optimizar

• Reducir el peso o tamaño de los archivos para incrementar la velocidad de carga o descarga
• Minificar los archivos CSS y JS para reducir el contenido necesario script JS y/o clases CSS

Vista de la estructura de carpetas del proyecto optimizado.

Instalación de Dependencias:

Asegúrate de tener instalado Vite y Bootstrap en tu proyecto:

npm install vite bootstrap 

Luego, instala el plugin vite-plugin-purgecss:

npm install vite-plugin-purgecss --save-dev

Configuración del Plugin PurgeCSS:

En tu archivo vite.config.js, configura el plugin vite-plugin-purgecss para que elimine el código no utilizado de los estilos de Bootstrap:

import htmlPurge from 'vite-plugin-purgecss'
import { createHtmlPlugin } from 'vite-plugin-html'
import { resolve } from 'path'
import { defineConfig } from 'vite'

const root = resolve(__dirname,'src')
const outDir = resolve(__dirname,'dist')

export default defineConfig({
    root,
    plugins:[
        htmlPurge(),
        createHtmlPlugin({
            minify:true,
            removeComments:true,
            collapseWhitespace:true
        })
    ],
    build:{minify: 'terser',
        outDir,
        emptyOutDir:true,
        rollupOptions:{
            input:{
                main:resolve(root,'index.html'),
                bio:resolve(root,'bio.html'),
                skills:resolve(root,'skills.html'),
                portafolio:resolve(root,'portafolio.html'),
                contacto:resolve(root,'contacto.html')                
            }
        }
    }
})

Importación de Estilos en tu Aplicación:

En tu archivo principal (por ejemplo, main.js o main.ts), importa solo los estilos necesarios de Bootstrap:

import 'bootstrap/dist/css/bootstrap.min.css';

Minificación de JS:

Como mencioné anteriormente, Vite tiene la minificación de JS integrada. Asegúrate de que esté habilitada en tu archivo vite.config.js:

export default {
  build: {
    minify: 'terser',
  },
};

Construcción de Producción:

Cuando estés listo para construir tu aplicación para producción, ejecuta el siguiente comando:

npm run build 

Esto generará una versión optimizada de tus archivos CSS y JS en la carpeta dist. Puedes implementar estos archivos en tu servidor para una experiencia de carga más rápida.

Recuerda que las configuraciones específicas pueden variar según tu proyecto y las versiones exactas de las dependencias utilizadas. Consulta la documentación oficial de Vite y los plugins específicos para obtener información detallada sobre la configuración.

Beneficios de optimizar CSS y JS en una página web con Bootstrap

1. Mejor Rendimiento:

   • Carga Rápida: La optimización reduce el tamaño de los archivos, lo que lleva a tiempos de carga más rápidos, mejorando la experiencia del usuario.
   • Menor Uso de Ancho de Banda: Archivos más pequeños significan menos uso de ancho de banda, beneficiando a los usuarios con conexiones más lentas o limitadas.

2. Experiencia del Usuario:

   • Interactividad Mejorada: La carga rápida y la menor cantidad de recursos contribuyen a una experiencia más suave y rápida para los usuarios.
   • Reducción de Retrasos: Menos código significa menos tiempo de procesamiento, lo que reduce los retrasos en la interacción del usuario.

3. SEO (Optimización para Motores de Búsqueda):

   • Mejora la Velocidad del Sitio: Google y otros motores de búsqueda consideran la velocidad de carga como un factor importante para clasificar los sitios web.

4. Ahorro de Recursos:

   • Menor Consumo de Memoria: Archivos más pequeños consumen menos memoria, especialmente en dispositivos con recursos limitados como dispositivos móviles.

5. Facilita el Mantenimiento:

   • Código más Limpio: Al eliminar código no utilizado, el código base se vuelve más claro y fácil de mantener.
   • Gestión Eficiente de Dependencias: Importar solo lo necesario reduce la cantidad de dependencias y simplifica la gestión de librerías y frameworks.

6. Compatibilidad con Navegadores:

   • Reducción de Problemas de Compatibilidad: La optimización a menudo implica la eliminación de código redundante o no compatible, mejorando la compatibilidad con diversos navegadores.

7. Aumento de la Eficiencia en el Desarrollo:

   • Rápido Despliegue: Archivos más pequeños se despliegan más rápidamente, facilitando el desarrollo, las pruebas y las implementaciones.

8. Ahorro de Espacio en el Almacenamiento del Usuario:

   • Menor Uso de Caché: Archivos más pequeños se almacenan más eficientemente en la caché del navegador del usuario, ahorrando espacio de almacenamiento.

9. Seguridad:

   • Menos Superficie de Ataque: Reducir el código no utilizado también reduce la superficie de ataque, disminuyendo la posibilidad de vulnerabilidades de seguridad.

10. Eficiencia Energética:

    • Menor Consumo de Energía: Menos datos para transferir y procesar implica un menor consumo de energía, contribuyendo a un desarrollo web más sostenible.

En resumen, la optimización es esencial para ofrecer una experiencia de usuario rápida y eficiente, mejorar el rendimiento del sitio, y cumplir con los estándares actuales de desarrollo web.

Leido 601 veces