Optimizar

Importacións Lean Sass

Cando utilices Sass no teu pipeline de activos, asegúrate de optimizar Bootstrap introducindo só @importos compoñentes que necesitas. É probable que as túas optimizacións máis grandes procedan da Layout & Componentssección do noso bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "maps";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Se non estás a usar un compoñente, coméntao ou elimínalo completamente. Por exemplo, se non estás a usar o carrusel, elimine esa importación para gardar algún tamaño de ficheiro no CSS compilado. Teña presente que hai algunhas dependencias entre as importacións de SASS que poden facer máis difícil omitir un ficheiro.

Lean JavaScript

O JavaScript de Bootstrap inclúe todos os compoñentes dos nosos ficheiros ( bootstrap.jse bootstrap.min.js) primarios (e incluso a nosa dependencia principal (Popper) cos nosos ficheiros ( bootstrap.bundle.jse bootstrap.bundle.min.js). Mentres estás a personalizar a través de SASS, asegúrese de eliminar JavaScript relacionado.

Por exemplo, supoñendo que estás a usar o teu propio Bundler JavaScript como Webpack, Parcela ou Vite, só importarías o JavaScript que planea usar. No exemplo seguinte, mostramos como incluír o noso JavaScript modal:

// Import just what we need

// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/offcanvas';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

Deste xeito, non inclúe ningún JavaScript que non pretendes usar para compoñentes como botóns, carruseles e consellos de ferramentas. Se estás a importar despregables, consellos de ferramentas ou popovers, asegúrese de listar a dependencia do popper no seu package.jsonficheiro.

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

Autoprefixer .browserslistrc

O bootstrap depende de AutoPrefixer para engadir automaticamente os prefixos do navegador a certas propiedades CSS. Os prefixos están dictados polo noso .browserslistrcficheiro, atopado na raíz do repo de arranque. Personalizar esta lista de navegadores e recompilar o SASS eliminará automaticamente algúns CSS do seu CSS compilado, se hai prefixos de vendedores exclusivos para ese navegador ou versión.

CSS non utilizado

Solicita axuda con esta sección, considera abrir un PR. Grazas!

Aínda que non temos un exemplo predefinido para usar PurgeCSS con Bootstrap, hai algúns artigos útiles e guías que escribiu a comunidade. Aquí tes algunhas opcións:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

Por último, este artigo de Trucos CSS sobre CSS non utilizados mostra como usar PurgeCSS e outras ferramentas similares.

Minimizar e gzip

Whenever possible, be sure to compress all the code you serve to your visitors. If you’re using Bootstrap dist files, try to stick to the minified versions (indicated by the .min.css and .min.js extensions). If you’re building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS.

Non-blocking files

While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.

If you are using a Lighthouse plugin in Google Chrome, you may have stumbled over FCP. The First Contentful Paint metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.

You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don’t need to be present on the first paint of your page should be marked with async or defer attributes.

This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.

If you want to learn more about this, there are already a lot of great articles about it:

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

Always use HTTPS

O teu sitio web só debería estar dispoñible mediante conexións HTTPS en produción. HTTPS mellora a seguridade, a privacidade e a dispoñibilidade de todos os sitios e non existe o tráfico web non sensible . Os pasos para configurar o teu sitio web para que se preste exclusivamente a través de HTTPS varían moito dependendo da túa arquitectura e do teu provedor de hospedaxe web, polo que están fóra do alcance destes documentos.

Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users mixed active content, leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.