Para Bootstrap 3 había una herramienta muy útil para personalizar qué funciones desea dentro de los archivos minificados css/js (para ahorrar tiempo de carga).
Estoy leyendo el manual de Bootstrap 5 pero sinceramente no entiendo como hacerlo. También leí la página de optimización y tampoco aquí encontré nada útil.
¿Podría ayudarme a mantener en los archivos minificados solo las funciones que necesito?
Si bien los documentos de Bootstrap implican que se necesita un paquete para cargar archivos de secuencias de comandos de componentes específicos de Bootstrap, simplemente puede usar las importaciones de ES6 para configurar lo que se carga. El soporte del navegador es bueno.
Por lo tanto, no cargaría los archivos completos de dist. Cargaría un script personalizado que importa lo que necesita y corresponde a los archivos SCSS que está utilizando. Se vería algo como esto:
<head> <script src="https://cdnjs.../popper.js/.../popper.min.js"></script> <script type="module"> import '/bootstrap/main/js/dist/tooltip.js'; </script> <script> let tooltipTriggerList = [] .slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) let tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) </script> </head> <body class="p-4"> <p title="A tooltip." data-bs-toggle="tooltip">Hover for a Bootstrap Tooltip.</p> </body> Tenga en cuenta que los archivos de script importados se deben servir con los encabezados CORS apropiados y el tipo MIME application/javascript o obtendrá errores.