अनुकूलित कइल जाव

दुबला सास आयात करेला

अपना एसेट पाइपलाइन में Sass के इस्तेमाल करत घरी, सुनिश्चित करीं कि रउरा खाली @importओह घटकन के ing करके बूटस्ट्रैप के अनुकूलित करीं जवना के रउरा जरूरत बा. राउर सबसे बड़ अनुकूलन संभवतः Layout & Componentsहमनी के खंड से आई 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";

अगर रउरा कवनो घटक के इस्तेमाल नइखीं करत त ओकरा के कमेंट करीं भा पूरा तरह से हटा दीं. उदाहरण खातिर, अगर रउआँ हिंडोला के इस्तेमाल नइखीं करत, ओह आयात के हटा के अपना संकलित सीएसएस में कुछ फाइल साइज सेव करीं। धियान में रखीं कि पूरा सास आयात में कुछ निर्भरता बाड़ी सऽ जेवना से फाइल के छोड़ल अउरी मुश्किल हो सके ला।

जावास्क्रिप्ट के लीन करीं

bootstrap.jsबूटस्ट्रैप के जावास्क्रिप्ट में हमनी के प्राथमिक डिस्ट फाइल ( आ ) में हर घटक शामिल बा , आ इहाँ तक कि हमनी के बंडल फाइल ( आ ) bootstrap.min.jsके साथ हमनी के प्राथमिक निर्भरता (पॉपर) भी शामिल बा । जब रउआ Sass के माध्यम से अनुकूलित कर रहल बानी, संबंधित जावास्क्रिप्ट जरूर हटाईं।bootstrap.bundle.jsbootstrap.bundle.min.js

उदाहरण खातिर, मान लीं कि रउआँ आपन खुद के जावास्क्रिप्ट बंडलर जइसे कि वेबपैक भा रोलअप के इस्तेमाल करत बानी, रउआँ खाली ओह जावास्क्रिप्ट के आयात करब जेकर इस्तेमाल रउआँ करे के योजना बनावत बानी। नीचे दिहल उदाहरण में, हमनी के देखावत बानी जा कि कइसे बस हमनी के मोडल जावास्क्रिप्ट के शामिल कइल जा सकेला:

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

एह तरीका से, रउआँ कौनों अइसन जावास्क्रिप्ट के शामिल नइखीं करत जेकर इस्तेमाल रउआँ बटन, हिंडोला, आ टूलटिप नियर घटक सभ खातिर करे के इरादा नइखीं रखले। अगर रउआँ ड्रॉपडाउन, टूलटिप या पॉपओवर आयात कर रहल बानी, त अपना package.jsonफाइल में पॉपर निर्भरता के सूचीबद्ध जरूर करीं।

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

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

ऑटोप्रिफिक्सर .browserslistrc के बा

बूटस्ट्रैप ऑटोप्रिफिक्सर पर निर्भर करे ला जे कुछ खास सीएसएस गुण सभ में ब्राउजर उपसर्ग सभ के स्वचालित रूप से जोड़ सके ला। उपसर्ग हमनी के .browserslistrcफाइल द्वारा डिक्टेट कइल जाला, बूटस्ट्रैप रेपो के जड़ में पावल जाला। ब्राउजर सभ के एह लिस्ट के अनुकूलित कइल आ सास के दोबारा संकलित कइला से आपके संकलित सीएसएस से कुछ सीएसएस अपने आप हटा दिहल जाई, अगर ओह ब्राउजर भा संस्करण खातिर बिसेस विक्रेता उपसर्ग होखे।

अप्रयुक्त सीएसएस के बा

एह खंड के साथ मदद चाहीं, कृपया पीआर खोले पर विचार करीं। धन्यवाद!

जबकि हमनी के लगे बूटस्ट्रैप के साथ PurgeCSS के इस्तेमाल खातिर पहिले से बनल उदाहरण नइखे , कुछ सहायक लेख आ वॉकथ्रू बाड़ें जे समुदाय लिखले बा। इहाँ कुछ विकल्प दिहल जा रहल बा:

• https://medium.com/dwarves-foundation/purgecss-88395a2c5772 के इस्तेमाल से बूटस्ट्रैप से-अप्रयुक्त-css-शैली-हटावे के बा
• https://lukelowrey.com/बूटस्ट्रैप-या-अउरी-फ्रेमवर्क से-स्वचालित-उपयुक्त-css-हटावे के/

अंत में, अप्रयुक्त CSS पर ई CSS Tricks लेख देखावल गइल बा कि PurgeCSS आ अइसने अउरी टूल सभ के इस्तेमाल कइसे कइल जाला।

मिनीफाई करीं आ जीजिप करीं

जब भी संभव होखे, जवन भी कोड रउआ अपना विजिटर लोग के परोसत बानी ओकरा के जरूर संकुचित करीं। अगर रउआँ बूटस्ट्रैप dist फाइल सभ के इस्तेमाल करत बानी, त मिनीफाइड संस्करण सभ से चिपकल रहे के कोसिस करीं (जेकरा .min.cssआ .min.jsएक्सटेंशन सभ से बतावल गइल बा)। अगर रउआँ आपन बिल्ड सिस्टम के साथ स्रोत से बूटस्ट्रैप बना रहल बानी, HTML, CSS, आ JS खातिर आपन खुद के मिनीफायर जरूर लागू करीं।

नॉनब्लॉकिंग फाइल के बारे में बतावल गइल बा

जबकि संपीड़न के छोट कइल आ इस्तेमाल कइल काफी लाग सके ला, अपना फाइल सभ के नॉनब्लॉकिंग बनावल भी आपके साइट के बढ़िया से अनुकूलित आ काफी तेज बनावे में एगो बड़हन कदम बा।

अगर रउरा गूगल क्रोम में लाइटहाउस प्लगइन के इस्तेमाल करत बानी त हो सकेला कि रउरा एफसीपी से ठोकर खा गइल होखीं. पहिला सामग्री वाला पेंट मीट्रिक ओह समय के नापे ला जब पन्ना लोड होखे लागे ला तब ले जब पन्ना के सामग्री के कौनों हिस्सा स्क्रीन पर रेंडर कइल जाला।

रउआँ गैर-महत्वपूर्ण जावास्क्रिप्ट भा सीएसएस के स्थगित क के FCP में सुधार कर सकत बानी। एकर का मतलब बा? बस, जावास्क्रिप्ट भा स्टाइलशीट जवना के रउरा पन्ना के पहिला पेंट पर मौजूद होखे के जरूरत नइखे, ओकरा के asyncभा deferविशेषता से चिन्हित कइल जाव.

एह से ई सुनिश्चित होला कि कम महत्व वाला संसाधन बाद में लोड हो जाव आ पहिला पेंट के रोकल ना जा सके. दूसर ओर, महत्वपूर्ण संसाधन सभ के इनलाइन स्क्रिप्ट भा शैली के रूप में सामिल कइल जा सके ला।

अगर रउआँ एह बारे में अउरी जाने के चाहत बानी त एकरा बारे में पहिलहीं से बहुत सारा बढ़िया लेख बाड़ें:

• https://web.dev/रेंडर-ब्लॉकिंग-रिसोर्स/ के बारे में जानकारी दिहल गइल बा।
• https://web.dev/defer-non-critical-css/ के बारे में जानकारी दिहल गइल बा।

हमेशा एचटीटीपीएस के इस्तेमाल करीं

राउर वेबसाइट खाली उत्पादन में एचटीटीपीएस कनेक्शन पर उपलब्ध होखे के चाहीं. एचटीटीपीएस सभ साइट सभ के सुरक्षा, गोपनीयता, आ उपलब्धता में सुधार करे ला आ गैर-संवेदनशील वेब ट्रैफिक नाँव के कौनों चीज नइखे । अपना वेबसाइट के कॉन्फ़िगर करे के कदम रउरा आर्किटेक्चर आ वेब होस्टिंग प्रदाता के आधार पर बहुत अंतर होला, आ एह तरीका से ई एह डॉक्स सभ के दायरा से बाहर बाड़ें।

एचटीटीपीएस पर परोसल जाए वाली साइट सभ के एचटीटीपीएस कनेक्शन पर सगरी स्टाइलशीट, स्क्रिप्ट आ अउरी संपत्ति सभ के भी एक्सेस करे के चाहीं। ना त, आप प्रयोगकर्ता लोग के मिश्रित सक्रिय सामग्री भेजत होखब , जवना से संभावित कमजोरी पैदा हो जाई जहाँ कौनों साइट के कौनों निर्भरता में बदलाव क के समझौता कइल जा सके ला। एकरा से सुरक्षा के समस्या आ यूजर सभ के ब्राउजर में चेतावनी देखावल जा सके ला। चाहे रउआँ कवनो सीडीएन से बूटस्ट्रैप लेत होखीं भा खुदे परोसत होखीं, सुनिश्चित करीं कि रउआँ एकरा के खाली HTTPS कनेक्शन पर एक्सेस करीं।