Optimizo

Importet Lean Sass

Kur përdorni Sass në tubacionin e aseteve tuaja, sigurohuni që të optimizoni Bootstrap duke përdorur vetëm @importkomponentët që ju nevojiten. Optimizimet tuaja më të mëdha ka të ngjarë të vijnë nga Layout & Componentsseksioni i tonë 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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Nëse nuk po përdorni një komponent, komentojeni ose fshijeni tërësisht. Për shembull, nëse nuk jeni duke përdorur karuselin, hiqni atë import për të ruajtur një madhësi skedari në CSS tuaj të përpiluar. Mbani në mend se ka disa varësi në importet e Sass që mund ta bëjnë më të vështirë heqjen e një skedari.

Lean JavaScript

JavaScript i Bootstrap përfshin çdo komponent në skedarët tanë kryesorë të distancës ( bootstrap.jsdhe bootstrap.min.js), madje edhe varësinë tonë kryesore (Popper) me skedarët tanë të paketës ( bootstrap.bundle.jsdhe bootstrap.bundle.min.js). Ndërsa jeni duke personalizuar përmes Sass, sigurohuni që të hiqni JavaScript-in përkatës.

Për shembull, duke supozuar se po përdorni paketuesin tuaj JavaScript si Webpack ose Përmbledhje, do të importoni vetëm JavaScript që planifikoni të përdorni. Në shembullin e mëposhtëm, ne tregojmë se si thjesht të përfshijmë JavaScript-in tonë 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

Në këtë mënyrë, ju nuk po përfshini asnjë JavaScript që nuk keni ndërmend të përdorni për komponentë si butonat, karuselet dhe këshillat e veglave. Nëse po importoni skedarë me zbritje, këshilla veglash ose popover, sigurohuni që të listoni varësinë Popper në package.jsonskedarin tuaj.

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

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

Autoprefiksues .browserslistrc

Bootstrap varet nga Autoprefixer për të shtuar automatikisht prefikset e shfletuesit në disa veçori të CSS. Prefikset diktohen nga .browserslistrcskedari ynë, i gjetur në rrënjën e repos Bootstrap. Përshtatja e kësaj liste shfletuesish dhe ripërpilimi i Sass-it do të heqë automatikisht disa CSS nga CSS-ja juaj e përpiluar, nëse ka prefikse të shitësit unike për atë shfletues ose version.

CSS e papërdorur

Kërkohet ndihmë me këtë seksion, ju lutemi merrni parasysh hapjen e një PR. Faleminderit!

Ndërsa ne nuk kemi një shembull të para-ndërtuar për përdorimin e PurgeCSS me Bootstrap, ka disa artikuj të dobishëm dhe udhëzime që ka shkruar komuniteti. Këtu janë disa opsione:

• 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/

Së fundmi, ky artikull CSS Tricks mbi CSS të papërdorura tregon se si të përdorni PurgeCSS dhe mjete të tjera të ngjashme.

Minifiko dhe gzip

Sa herë që është e mundur, sigurohuni që të kompresoni të gjithë kodin që u shërbeni vizitorëve tuaj. Nëse jeni duke përdorur skedarë dist Bootstrap, përpiquni t'i përmbaheni versioneve të minimizuara (të treguara nga shtesat .min.cssdhe ). .min.jsNëse po ndërtoni Bootstrap nga burimi me sistemin tuaj të ndërtimit, sigurohuni që të zbatoni minifikuesit tuaj për HTML, CSS dhe JS.

Skedarët që nuk bllokojnë

Ndërsa minimizimi dhe përdorimi i kompresimit mund të duket i mjaftueshëm, bërja e skedarëve tuaj jo-bllokues është gjithashtu një hap i madh për ta bërë faqen tuaj të optimizuar mirë dhe mjaftueshëm të shpejtë.

Nëse jeni duke përdorur një shtojcë Lighthouse në Google Chrome, mund të keni ngecur mbi FCP. Metrika First Contentful Paint mat kohën nga momenti kur faqja fillon të ngarkohet deri në momentin kur ndonjë pjesë e përmbajtjes së faqes shfaqet në ekran.

Ju mund të përmirësoni FCP duke shtyrë JavaScript ose CSS jo-kritike. Cfare do te thote ajo? Thjesht, JavaScript ose fletët e stilit që nuk duhet të jenë të pranishme në bojën e parë të faqes suaj duhet të shënohen me asyncose deferatribute.

Kjo siguron që burimet më pak të rëndësishme të ngarkohen më vonë dhe të mos bllokojnë bojën e parë. Nga ana tjetër, burimet kritike mund të përfshihen si skripta inline ose stile.

Nëse dëshironi të mësoni më shumë rreth kësaj, tashmë ka shumë artikuj të shkëlqyeshëm në lidhje me të:

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

Përdorni gjithmonë HTTPS

Faqja juaj e internetit duhet të jetë e disponueshme vetëm përmes lidhjeve HTTPS në prodhim. HTTPS përmirëson sigurinë, privatësinë dhe disponueshmërinë e të gjitha sajteve dhe nuk ka gjë të tillë si trafiku i uebit jo i ndjeshëm . Hapat për të konfiguruar faqen tuaj të internetit për t'u shërbyer ekskluzivisht përmes HTTPS ndryshojnë shumë në varësi të arkitekturës dhe ofruesit tuaj të mbajtjes në ueb, dhe kështu janë përtej fushëveprimit të këtyre dokumenteve.

Faqet e shërbyera përmes HTTPS duhet gjithashtu të kenë akses në të gjitha fletët e stilit, skriptet dhe asetet e tjera nëpërmjet lidhjeve HTTPS. Përndryshe, do t'u dërgoni përdoruesve përmbajtje aktive të përziera , duke çuar në dobësi të mundshme ku një sajt mund të komprometohet duke ndryshuar një varësi. Kjo mund të çojë në probleme sigurie dhe paralajmërime në shfletues që shfaqen te përdoruesit. Pavarësisht nëse po merrni Bootstrap nga një CDN ose po e shërbeni vetë, sigurohuni që ta përdorni atë vetëm përmes lidhjeve HTTPS.