अनुकूलित करें

स्वप्रकल्पान् दुर्बलं, प्रतिक्रियाशीलं, परिपालनीयं च रक्षन्तु येन भवान् उत्तमम् अनुभवं प्रदातुं शक्नोति तथा च अधिकमहत्त्वपूर्णकार्येषु ध्यानं दातुं शक्नोति।

इस पृष्ठ पर

लीन सस् आयात करता है

यदा स्वस्य सम्पत्तिपाइपलाइने Sass इत्यस्य उपयोगं करोति तदा सुनिश्चितं कुर्वन्तु यत् भवान् केवलं @importआवश्यकानि घटकानि ing कृत्वा Bootstrap इत्यस्य अनुकूलनं करोति । भवतः बृहत्तमानि अनुकूलनानि सम्भवतः 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 इत्यस्य JavaScript अस्माकं प्राथमिक dist सञ्चिकासु ( bootstrap.jsand bootstrap.min.js) प्रत्येकं घटकं समावेशयति, अपि च अस्माकं प्राथमिकनिर्भरता (Popper) अपि अस्माकं बण्डल् सञ्चिकासु ( bootstrap.bundle.jsand bootstrap.bundle.min.js) सह । यदा भवान् Sass मार्गेण अनुकूलनं करोति तदा सम्बद्धं JavaScript अवश्यं निष्कासयतु।

यथा, भवान् स्वस्य JavaScript बण्डलरं यथा Webpack, Parcel, Vite वा उपयुज्यते इति कल्पयित्वा, भवान् केवलं तत् 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';

एवं प्रकारेण, भवान् बटन्, हिंडोला, टूल्टिप् इत्यादीनां घटकानां कृते यत्किमपि जावास्क्रिप्ट् उपयोक्तुं न इच्छति तत् न समाविष्टं करोति । यदि भवान् ड्रॉप्डाउन्स्, टूल्टिप्स् अथवा पोपोवर्स् आयातयति तर्हि package.jsonस्वसञ्चिकायां Popper निर्भरतां अवश्यं सूचीतुं शक्नोति ।

पूर्वनिर्धारित निर्यात

bootstrap/js/distप्रयुक्तानि सञ्चिकाः पूर्वनिर्धारितं निर्यातः , अतः यदि भवान् तेषु एकस्य उपयोगं कर्तुम् इच्छति तर्हि निम्नलिखितम् कर्तव्यम् ।

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

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

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

बूटस्ट्रैप् स्वयमेव कतिपयेषु CSS गुणेषु ब्राउजर् उपसर्गं योजयितुं Autoprefixer इत्यस्य उपरि निर्भरं भवति । उपसर्गाः अस्माकं सञ्चिकाद्वारा निर्दिष्टाः भवन्ति .browserslistrc, Bootstrap repo इत्यस्य मूले दृश्यन्ते । ब्राउजर्-सूचीं अनुकूलितं कृत्वा Sass पुनः संकलनं स्वयमेव भवतः संकलित-CSS तः किञ्चित् CSS निष्कासयिष्यति, यदि तस्य ब्राउजर्-संस्करणस्य वा विशिष्टाः विक्रेता-उपसर्गाः सन्ति

अप्रयुक्त CSS

अस्मिन् खण्डे सहायता इष्टा, कृपया जनसम्पर्कं उद्घाटयितुं विचारयन्तु। धन्यवादा!

यद्यपि अस्माकं समीपे Bootstrap इत्यनेन सह PurgeCSS इत्यस्य उपयोगाय पूर्वनिर्मितं उदाहरणं नास्ति तथापि केचन सहायकाः लेखाः, भ्रमणमार्गाः च सन्ति ये समुदायेन लिखिताः सन्ति । अत्र केचन विकल्पाः सन्ति : १.

अन्तिमे, अप्रयुक्तानां CSS विषये अयं CSS Tricks लेखः PurgeCSS इत्यादीनां तत्सदृशानां साधनानां उपयोगं कथं कर्तव्यमिति दर्शयति ।

लघुकरणं तथा gzip

यदा यदा सम्भवं तदा भवन्तः आगन्तुकानां कृते यत् सर्वं कोडं सेवन्ते तत् अवश्यमेव संपीडयन्तु । यदि भवान् Bootstrap dist सञ्चिकाः उपयुङ्क्ते तर्हि लघुकृतसंस्करणयोः (the extensions .min.cssइत्यनेन सूचितम्) अटितुं प्रयतस्व । .min.jsयदि भवान् स्वकीयनिर्माणप्रणाल्या सह स्रोततः Bootstrap निर्माति तर्हि HTML, CSS, JS इत्येतयोः कृते स्वस्य लघुकर्तारं अवश्यं कार्यान्वितुं शक्नोति ।

अ-अवरोधक-सञ्चिकाः

यद्यपि संपीडनं लघुकरणं उपयोगश्च पर्याप्तं प्रतीयते तथापि भवतः सञ्चिकाः अ-अवरोधकानि करणं अपि भवतः साइट् सु-अनुकूलितं पर्याप्तं द्रुतं च कर्तुं महत् सोपानम् अस्ति

यदि भवान् Google Chrome मध्ये Lighthouse प्लगिन् उपयुङ्क्ते तर्हि भवान् FCP विषये ठोकरं खादितवान् स्यात्। प्रथमं सामग्रीयुक्तं रङ्गं मेट्रिकं पृष्ठस्य लोडीकरणं आरभ्यते ततः पृष्ठस्य सामग्रीयाः कोऽपि भागः स्क्रीन-उपरि प्रतिपादितः भवति इति समयं मापयति ।

अ-महत्त्वपूर्णं जावास्क्रिप्ट् अथवा CSS स्थगयित्वा भवान् FCP-सुधारं कर्तुं शक्नोति । तस्य किम् अर्थः ? केवलं, जावास्क्रिप्ट् अथवा स्टाइलशीट् यत् भवतः पृष्ठस्य प्रथमे रङ्गस्य उपरि उपस्थितस्य आवश्यकता नास्ति, तानि asyncअथवा deferविशेषतानि चिह्नितानि भवेयुः ।

एतेन न्यूनमहत्त्वपूर्णाः संसाधनाः पश्चात् भारिताः भवन्ति तथा च प्रथमं रङ्गं न अवरुद्धं भवति इति सुनिश्चितं भवति । अपरपक्षे, महत्त्वपूर्णसंसाधनं अन्तर्रेखालिपिरूपेण वा शैलीरूपेण वा समाविष्टं कर्तुं शक्यते ।

यदि भवान् अस्य विषये अधिकं ज्ञातुम् इच्छति तर्हि पूर्वमेव अस्य विषये बहुधा महान् लेखाः सन्ति:

सर्वदा HTTPS इत्यस्य उपयोगं कुर्वन्तु

भवतः वेबसाइट् केवलं उत्पादनकाले HTTPS संयोजनैः एव उपलब्धं भवेत् । HTTPS सर्वेषां साइट्-स्थानानां सुरक्षां, गोपनीयतां, उपलब्धतां च सुधरयति, असंवेदनशीलं जालयातायातम् इति किमपि नास्ति HTTPS इत्यनेन अनन्यतया सेवितुं भवतः वेबसाइट् विन्यस्तुं पदानि भवतः वास्तुकलायां जालहोस्टिंग् प्रदातुः च आधारेण बहुधा भिन्नानि सन्ति, अतः एतेषां दस्तावेजानां व्याप्तेः परं भवन्ति

HTTPS इत्यनेन सेवितानि साइट्-स्थानानि HTTPS-सम्बद्धानां माध्यमेन सर्वाणि शैलीपत्राणि, स्क्रिप्ट्, अन्ये च सम्पत्तिः अपि अभिगन्तुं अर्हन्ति । अन्यथा, भवान् उपयोक्तृभ्यः मिश्रितसक्रियसामग्री प्रेषयिष्यति , सम्भाव्यदुर्बलतां जनयति यत्र आश्रयं परिवर्त्य साइट् सम्झौतां कर्तुं शक्यते। एतेन सुरक्षासमस्याः, उपयोक्तृभ्यः प्रदर्शिताः ब्राउजर्-अन्तर्गत-चेतावनीः च भवितुम् अर्हन्ति । भवान् CDN तः Bootstrap प्राप्नोति वा स्वयमेव तस्य सेवां करोति वा, सुनिश्चितं कुरुत यत् भवान् केवलं HTTPS संयोजनैः एव तत् अभिगच्छति ।