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 "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ínao por completo. Por exemplo, se non estás a usar o carrusel, elimina esa importación para gardar algún tamaño de ficheiro no teu CSS compilado. Ten en conta que hai algunhas dependencias nas importacións de Sass que poden dificultar a omisión dun ficheiro.

Lean JavaScript

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

Por exemplo, supoñendo que está a usar o seu propio paquete de JavaScript como Webpack ou Rollup, só importaría o JavaScript que planea usar. No seguinte exemplo, mostramos como só 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 incluirás ningún JavaScript que non desexes utilizar para compoñentes como botóns, carruseles e informacións sobre ferramentas. Se estás importando menús despregables, consellos sobre ferramentas ou popovers, asegúrate de enumerar a dependencia de Popper no teu package.jsonficheiro.

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

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

Autoprefixer .browserslistrc

Bootstrap depende de Autoprefixer para engadir automaticamente prefixos de navegador a determinadas propiedades CSS. Os prefixos son ditados polo noso .browserslistrcficheiro, que se atopa na raíz do repositorio de Bootstrap. Personalizar esta lista de navegadores e recompilar o Sass eliminará automaticamente algúns CSS do teu CSS compilado, se hai prefixos de provedores 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

Sempre que sexa posible, asegúrate de comprimir todo o código que ofreces aos teus visitantes. Se está a usar ficheiros dist de Bootstrap, intente aterse ás versións reducidas (indicadas polas extensións .min.csse ). .min.jsSe estás construíndo Bootstrap desde a fonte co teu propio sistema de compilación, asegúrate de implementar os teus propios minificadores para HTML, CSS e JS.

Ficheiros sen bloqueo

Aínda que minificar e usar a compresión pode parecer suficiente, facer que os teus ficheiros non bloqueen tamén é un gran paso para que o teu sitio estea ben optimizado e o suficientemente rápido.

Se estás a usar un complemento Lighthouse en Google Chrome, é posible que teñas tropezado con FCP. A métrica First Contentful Paint mide o tempo desde que a páxina comeza a cargarse ata que se mostra na pantalla calquera parte do contido da páxina.

Podes mellorar FCP aprazando JavaScript ou CSS non críticos. Qué significa iso? Simplemente, JavaScript ou follas de estilo que non precisan estar presentes na primeira pintura da túa páxina deben estar marcados con asyncou deferatributos.

Isto garante que os recursos menos importantes se carguen máis tarde e non bloqueen a primeira pintura. Por outra banda, os recursos críticos pódense incluír como guións ou estilos en liña.

Se queres saber máis sobre isto, xa hai moitos artigos xeniais sobre iso:

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

Usa sempre 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.

Os sitios ofrecidos a través de HTTPS tamén deberían acceder a todas as follas de estilo, scripts e outros recursos mediante conexións HTTPS. En caso contrario, enviarás aos usuarios contido activo mixto , o que leva a posibles vulnerabilidades nas que un sitio pode verse comprometido ao alterar unha dependencia. Isto pode provocar problemas de seguridade e avisos no navegador que se mostren aos usuarios. Tanto se estás recibindo Bootstrap desde unha CDN como se estás a servir ti mesmo, asegúrate de acceder a el só mediante conexións HTTPS.