अनुकूलित करब

दुबला सस आयात

अपनय एसेट पाइपलाइन मे Sass कें उपयोग करय कें समय, सुनिश्चित करूं कि अहां केवल @importजरूरत कें घटक कें ing करयत Bootstrap कें अनुकूलित करय छी. अहाँक सबसँ पैघ अनुकूलन संभवतः 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";

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

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

bootstrap.jsबूटस्ट्रैप केरऽ जावास्क्रिप्ट म॑ हमरऽ प्राथमिक dist फाइल ( आरू ) म॑ हर घटक शामिल छै , आरू यहां तक ​​कि हमरऽ बंडल फाइल ( आरू ) bootstrap.min.jsके साथ हमरऽ प्राथमिक निर्भरता (Popper) भी शामिल छै । जखन कि अहाँ 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

बूटस्ट्रैप ऑटोप्रीफिक्सर पर निर्भर करय छै जे स्वचालित रूप सं किछु CSS गुणक मे ब्राउज़र उपसर्ग जोड़य. उपसर्ग हमर .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 लेली अपनऽ मिनीफायर क॑ लागू करना सुनिश्चित करऽ ।

नॉनब्लॉकिंग फाइल

जखन कि संपीड़न के छोट करब आ उपयोग करब काफी लागत, मुदा अपन फाइल के नॉनब्लॉकिंग बनाबय के काज सेहो अहां के साइट के नीक सं अनुकूलित आओर काफी तेज बनेबा मे एकटा पैघ कदम अछि.

अगर अहां गूगल क्रोम मे लाइटहाउस प्लगइन के इस्तेमाल करि रहल छी त शायद अहां के एफसीपी सं ठोकर लागल होएत. फर्स्ट कंटेंटफुल पेंट मेट्रिक ओ समय क॑ मापै छै जब॑ पन्ना लोड होना शुरू होय जाय छै आरू जब॑ पन्ना केरऽ सामग्री केरऽ कोनो भी हिस्सा क॑ स्क्रीन प॑ रेंडर करलऽ जाय छै ।

अहां गैर-महत्वपूर्ण जावास्क्रिप्ट या सीएसएस कें स्थगित कयर एफसीपी मे सुधार कयर सकय छी. एकर की अर्थ ? बस, जावास्क्रिप्ट या स्टाइलशीट जेकरा अपनऽ पन्ना केरऽ पहिलऽ पेंट प॑ मौजूद होय के जरूरत नै छै, ओकरा asyncया deferविशेषता स॑ चिह्नित करलऽ जाय ।

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

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

• https://web.dev/रेंडर-अवरोधक-संसाधन/
• https://web.dev/स्थगित-गैर-महत्वपूर्ण-css/

हमेशा एचटीटीपीएस क उपयोग करू

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

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