అనుకూలపరుస్తుంది

లీన్ సాస్ దిగుమతులు

@importమీ ఆస్తి పైప్‌లైన్‌లో Sassని ఉపయోగిస్తున్నప్పుడు, మీకు అవసరమైన భాగాలను మాత్రమే అందించడం ద్వారా మీరు బూట్‌స్ట్రాప్‌ను ఆప్టిమైజ్ చేశారని నిర్ధారించుకోండి . Layout & Componentsమీ అతిపెద్ద ఆప్టిమైజేషన్‌లు మా విభాగం నుండి వచ్చే అవకాశం ఉంది 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";

మీరు కాంపోనెంట్‌ను ఉపయోగించకుంటే, దాన్ని వ్యాఖ్యానించండి లేదా పూర్తిగా తొలగించండి. ఉదాహరణకు, మీరు రంగులరాట్నం ఉపయోగించకుంటే, మీ కంపైల్ చేసిన CSSలో కొంత ఫైల్ పరిమాణాన్ని సేవ్ చేయడానికి ఆ దిగుమతిని తీసివేయండి. Sass దిగుమతులలో కొన్ని డిపెండెన్సీలు ఉన్నాయని గుర్తుంచుకోండి, అవి ఫైల్‌ను వదిలివేయడాన్ని మరింత కష్టతరం చేస్తాయి.

లీన్ జావాస్క్రిప్ట్

బూట్‌స్ట్రాప్ యొక్క జావాస్క్రిప్ట్ మా ప్రాథమిక డిస్ట్ ఫైల్‌లలోని ప్రతి భాగం ( bootstrap.jsమరియు bootstrap.min.js) మరియు మా బండిల్ ఫైల్‌లతో ( bootstrap.bundle.jsమరియు bootstrap.bundle.min.js) మా ప్రాథమిక డిపెండెన్సీని (పాపర్) కూడా కలిగి ఉంటుంది. మీరు Sass ద్వారా అనుకూలీకరిస్తున్నప్పుడు, సంబంధిత JavaScriptని తప్పకుండా తీసివేయండి.

ఉదాహరణకు, మీరు Webpack, Parcel లేదా Vite వంటి మీ స్వంత JavaScript బండ్లర్‌ని ఉపయోగిస్తున్నారని ఊహిస్తే, మీరు ఉపయోగించాలనుకుంటున్న JavaScriptని మాత్రమే దిగుమతి చేసుకుంటారు. దిగువ ఉదాహరణలో, మా మోడల్ జావాస్క్రిప్ట్‌ను ఎలా చేర్చాలో మేము చూపుతాము:

// 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';

ఈ విధంగా, మీరు బటన్‌లు, రంగులరాట్నాలు మరియు టూల్‌టిప్‌ల వంటి భాగాల కోసం ఉపయోగించకూడదనుకునే JavaScriptని చేర్చడం లేదు. మీరు డ్రాప్‌డౌన్‌లు, టూల్‌టిప్‌లు లేదా పాప్‌ఓవర్‌లను దిగుమతి చేస్తుంటే, మీ package.jsonఫైల్‌లో పాపర్ డిపెండెన్సీని తప్పకుండా జాబితా చేయండి.

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

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

ఆటోప్రిఫిక్సర్ .browserslistrc

నిర్దిష్ట CSS లక్షణాలకు బ్రౌజర్ ప్రిఫిక్స్‌లను స్వయంచాలకంగా జోడించడానికి బూట్‌స్ట్రాప్ ఆటోప్రిఫిక్సర్‌పై ఆధారపడి ఉంటుంది. .browserslistrcఉపసర్గలు బూట్‌స్ట్రాప్ రెపో యొక్క మూలంలో కనుగొనబడిన మా ఫైల్ ద్వారా నిర్దేశించబడతాయి . ఈ బ్రౌజర్‌ల జాబితాను అనుకూలీకరించడం మరియు Sassని తిరిగి కంపైల్ చేయడం వలన మీ కంపైల్ చేయబడిన CSS నుండి కొంత CSS స్వయంచాలకంగా తీసివేయబడుతుంది, ఆ బ్రౌజర్ లేదా సంస్కరణకు ప్రత్యేకమైన విక్రేత ప్రిఫిక్స్‌లు ఉంటే.

ఉపయోగించని CSS

ఈ విభాగానికి సహాయం కావాలి, దయచేసి PRని తెరవడాన్ని పరిగణించండి. ధన్యవాదాలు!

బూట్‌స్ట్రాప్‌తో PurgeCSS ని ఉపయోగించడం కోసం ముందుగా నిర్మించిన ఉదాహరణ మా వద్ద లేనప్పటికీ , సంఘం వ్రాసిన కొన్ని ఉపయోగకరమైన కథనాలు మరియు నడకలు ఉన్నాయి. ఇక్కడ కొన్ని ఎంపికలు ఉన్నాయి:

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

చివరగా, ఉపయోగించని CSSపై ఈ CSS ట్రిక్స్ కథనం PurgeCSS మరియు ఇతర సారూప్య సాధనాలను ఎలా ఉపయోగించాలో చూపిస్తుంది.

Minify మరియు gzip

సాధ్యమైనప్పుడల్లా, మీరు మీ సందర్శకులకు అందించే మొత్తం కోడ్‌ను కుదించండి. మీరు బూట్‌స్ట్రాప్ డిస్ట్ ఫైల్‌లను ఉపయోగిస్తుంటే, కనిష్టీకరించబడిన సంస్కరణలకు ( .min.cssమరియు .min.jsపొడిగింపుల ద్వారా సూచించబడుతుంది) కట్టుబడి ప్రయత్నించండి. మీరు మీ స్వంత బిల్డ్ సిస్టమ్‌తో సోర్స్ నుండి బూట్‌స్ట్రాప్‌ను రూపొందిస్తున్నట్లయితే, HTML, CSS మరియు JS కోసం మీ స్వంత మినిఫైయర్‌లను అమలు చేయాలని నిర్ధారించుకోండి.

నాన్-బ్లాకింగ్ ఫైల్స్

కుదింపును కనిష్టీకరించడం మరియు ఉపయోగించడం సరిపోతుందని అనిపించవచ్చు, మీ ఫైల్‌లను నిరోధించకుండా చేయడం కూడా మీ సైట్‌ని బాగా ఆప్టిమైజ్ చేయడంలో మరియు తగినంత వేగంగా చేయడంలో ఒక పెద్ద అడుగు.

మీరు Google Chromeలో లైట్‌హౌస్ ప్లగిన్‌ని ఉపయోగిస్తుంటే, మీరు FCPలో పొరపాట్లు చేసి ఉండవచ్చు. మొదటి కంటెంట్‌ఫుల్ పెయింట్ మెట్రిక్ పేజీ లోడ్ అవ్వడం ప్రారంభించినప్పటి నుండి స్క్రీన్‌పై పేజీ కంటెంట్‌లో ఏదైనా భాగాన్ని రెండర్ చేసే సమయాన్ని కొలుస్తుంది.

మీరు నాన్-క్రిటికల్ జావాస్క్రిప్ట్ లేదా CSSని వాయిదా వేయడం ద్వారా FCPని మెరుగుపరచవచ్చు. అంటే ఏమిటి? కేవలం, మీ పేజీ యొక్క మొదటి పెయింట్‌లో ఉండవలసిన అవసరం లేని జావాస్క్రిప్ట్ లేదా స్టైల్‌షీట్‌లు asyncలేదా deferలక్షణాలతో గుర్తించబడాలి.

ఇది తక్కువ ముఖ్యమైన వనరులు తర్వాత లోడ్ చేయబడుతుందని మరియు మొదటి పెయింట్‌ను నిరోధించకుండా నిర్ధారిస్తుంది. మరోవైపు, క్లిష్టమైన వనరులను ఇన్‌లైన్ స్క్రిప్ట్‌లు లేదా స్టైల్స్‌గా చేర్చవచ్చు.

మీరు దీని గురించి మరింత తెలుసుకోవాలనుకుంటే, దాని గురించి ఇప్పటికే చాలా గొప్ప కథనాలు ఉన్నాయి:

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

ఎల్లప్పుడూ HTTPSని ఉపయోగించండి

మీ వెబ్‌సైట్ ఉత్పత్తిలో ఉన్న HTTPS కనెక్షన్‌లలో మాత్రమే అందుబాటులో ఉండాలి. HTTPS అన్ని సైట్‌ల భద్రత, గోప్యత మరియు లభ్యతను మెరుగుపరుస్తుంది మరియు నాన్-సెన్సిటివ్ వెబ్ ట్రాఫిక్ వంటివి ఏవీ లేవు . మీ వెబ్‌సైట్‌ను ప్రత్యేకంగా HTTPS ద్వారా అందించడానికి కాన్ఫిగర్ చేసే దశలు మీ ఆర్కిటెక్చర్ మరియు వెబ్ హోస్టింగ్ ప్రొవైడర్‌పై ఆధారపడి విస్తృతంగా మారుతూ ఉంటాయి మరియు ఈ డాక్స్ పరిధికి మించినవి.

HTTPS ద్వారా అందించబడిన సైట్‌లు HTTPS కనెక్షన్‌ల ద్వారా అన్ని స్టైల్‌షీట్‌లు, స్క్రిప్ట్‌లు మరియు ఇతర ఆస్తులను కూడా యాక్సెస్ చేయాలి. లేకపోతే, మీరు వినియోగదారులకు మిక్స్డ్ యాక్టివ్ కంటెంట్‌ని పంపుతారు , ఇది డిపెండెన్సీని మార్చడం ద్వారా సైట్ రాజీపడే సంభావ్య దుర్బలత్వాలకు దారి తీస్తుంది. ఇది భద్రతా సమస్యలకు దారితీస్తుంది మరియు వినియోగదారులకు ప్రదర్శించబడే బ్రౌజర్‌లో హెచ్చరికలు. మీరు CDN నుండి బూట్‌స్ట్రాప్‌ని పొందుతున్నా లేదా దానిని మీరే అందిస్తున్నా, మీరు దానిని HTTPS కనెక్షన్‌ల ద్వారా మాత్రమే యాక్సెస్ చేస్తున్నారని నిర్ధారించుకోండి.