2 diciembre, 2023
La optimización de archivos CSS y JS en una página web, ya sea utilizando ViteJS u otras herramientas, ofrece una serie de beneficios que impactan directamente en el rendimiento, la experiencia del usuario y otros aspectos del desarrollo web. Aquí algunos de los beneficios más destacados:
Suscríbete a nuestro canal en Youtube
SuscríbirseCómo optimizar el CSS y JS Bootstrap de una página web
Vista de la estructura de carpetas del proyecto optimizado.
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
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')
}
}
}
})
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';
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',
},
};
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.
Mejor Rendimiento:
Experiencia del Usuario:
SEO (Optimización para Motores de Búsqueda):
Ahorro de Recursos:
Facilita el Mantenimiento:
Compatibilidad con Navegadores:
Aumento de la Eficiencia en el Desarrollo:
Ahorro de Espacio en el Almacenamiento del Usuario:
Seguridad:
Eficiencia Energética:
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 603 veces
Curso de Diseño Web con Bootstrap para una tienda de vestidos
Descarga del código fuente
USD 0.00
© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023