अनुकूलित करना

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

अपनी संपत्ति पाइपलाइन च 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";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

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

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

बूटस्ट्रैप दी जावास्क्रिप्ट च साढ़ी प्राथमिक डिस्ट फाइलें ( 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/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';

इस चाल्ली, तुस कुसै बी जावास्क्रिप्ट गी शामल नेईं करा करदे ओ जेह् ड़ी तुस बटन, हिंडोला, ते टूलटिप्स जनेह् घटकें आस्तै बरतने दा इरादा नेईं करदे ओ. package.jsonजेकर तुस ड्रॉपडाउन, टूलटिप्स जां पोपोवर आयात करा दे ओ तां अपनी फाइल च Popper निर्भरता गी सुनिश्चत करो.

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

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

स्वतः उपसर्ग .browserslistrc ऐ

बूटस्ट्रैप किश CSS गुणें च ब्राउज़र उपसर्गें गी स्वतः जोड़ने आस्तै ऑटोप्रिफिक्सर पर निर्भर करदा ऐ. उपसर्ग साढ़ी .browserslistrcफाइल आसेआ डिक्टेट कीते जंदे न, जेह् ड़ी बूटस्ट्रैप रेपो दे रूट च पाई जंदी ऐ। ब्राउज़रें दी इस सूची गी अनुकूलित करना ते Sass गी दुबारा संकलित करना अपने संकलित CSS थमां किश CSS गी स्वतः हटाई देग, जेकर उस ब्राउज़र जां संस्करण आस्तै विशिष्ट विक्रेता उपसर्ग न.

अप्रयुक्त सीएसएस

इस भाग कन्नै मदद चाहिदी ऐ, कृपया इक पीआर खोलने पर विचार करो। धन्नवाद!

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

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

आखरी च, अप्रयुक्त CSS पर एह् CSS Tricks लेख दस्सदा ऐ जे PurgeCSS ते होर इसी जनेह् उपकरणें दा इस्तेमाल कीता जा।

मिनीफाई करो ते जीज़िप करो

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

गैर-ब्लॉकिंग फाइलें गी

जदके संपीड़न गी घट्ट करना ते इसदा इस्तेमाल करना काफी लगदा ऐ, तां अपनी फाइलें गी गैर-ब्लॉक करने आह् ली बनाना बी तुंदी साइट गी अच्छी तरह कन्नै अनुकूलित ते काफी तेज़ बनाने च इक बड्डा कदम ऐ।

जेकर तुस गूगल क्रोम च लाइटहाउस प्लगइन दा इस्तेमाल करा दे ओ तां तुसें गी एफसीपी पर ठोकर लगी होग। पैह् ला सामग्री पेंट मीट्रिक उस समें गी मापदा ऐ जिसलै पृष्ठ लोड करना शुरू होंदा ऐ उस बेल्लै तकर जिसलै पृष्ठ दी सामग्री दा कोई बी हिस्सा स्क्रीन पर रेंडर कीता जंदा ऐ।

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

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

जेकर तुस इस बारै होर जानना चांह्दे ओ तां इसदे बारे च पैह्लें गै मते सारे शानदार लेख न:

• https://web.dev/रेंडर-ब्लॉकिंग-रिसोर्सेज/ ऐ।
• https://web.dev/स्थगित-गैर-महत्वपूर्ण-सीएसएस/

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

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

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