ऑप्टिमायझ करचें

लीन सास आयात करता

तुमच्या मालमत्ता पायपलायनींत 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";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

तुमी घटक वापरनात जाल्यार ताचेर टिप्पणी करात वा पुरायपणान काडून उडयात. देखीक, तुमी हिंडोळ वापरनात जाल्यार, तुमच्या संकलित CSS त कांय फायल आकार जतनाय घेवपाक ती आयात काडून उडोवची. Sass आयातांतल्यान कांय अवलंबन आसात हें लक्षांत दवरात जाका लागून फायल वगडावप चड कठीण जावं येता.

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

बूटस्ट्रॅपाच्या जावास्क्रिप्टांत आमच्या प्राथमीक dist फायलींनी ( bootstrap.jsआनी ), आनी आमच्या बंडल फायलींनी ( आनी ) 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/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 गुणधर्मांक आपोआप ब्राउझर उपसर्ग जोडपाक बूटस्ट्रॅप Autoprefixer चेर आदारीत आसा. उपसर्ग आमच्या .browserslistrcफायलीन डिक्टेट करतात, बूटस्ट्रॅप रेपोच्या मुळांत मेळटा. ब्राउझरांची ही वळेरी पसंतीची करप आनी Sass परतून संकलित करप तुमच्या संकलित केल्ल्या CSS वयल्यान आपोआप कांय CSS काडून उडयतले, जर त्या ब्राउझराक वा आवृत्ती खातीर खाशेले विक्रेते उपसर्ग आसात.

वापरूंक नाशिल्लें सीएसएस

ह्या विभागांत मदत जाय, उपकार करून पीआर उगडपाचो विचार करात. देव बरें करूं!

Bootstrap वांगडा PurgeCSS वापरपाक आमचे कडेन पूर्वनिर्मित उदाहरण नासलें तरी , समुदायान बरयल्ले कांय उपकाराचे लेख आनी वॉकथ्रू आसात. हांगा कांय पर्याय आसात:

• https://medium.com/dwarves-foundation/purgecss-88395a2c5772 वापरून बूटस्ट्रॅपांतल्यान वापरूंक नाशिल्लीं-css-शैलीं-काडचीं
• https://lukelowrey.com/बूटस्ट्रॅप-वा-हेर-फ्रेमवर्कांतल्यान-आपोआप-काडून-वापरलेले-css/

निमाणें, वापरूंक नाशिल्ल्या CSS चेर हो CSS Tricks लेख PurgeCSS आनी हेर तत्सम साधनां कशीं वापरचीं तें दाखयता.

मिनिफाय करचें आनी gzip करचें

शक्य आसल्यार, तुमी तुमच्या भेट दिवप्यांक दिवपी सगळो कोड संकुचीत करपाची खात्री करात. तुमी Bootstrap dist फायली वापरतात जाल्यार, ल्हान केल्ल्या आवृत्त्यांक चिकटून रावपाचो यत्न करात ( .min.cssआनी .min.jsविस्तारांनी दाखयला). तुमी तुमच्या स्वताच्या बिल्ड प्रणालीन स्त्रोता कडल्यान Bootstrap तयार करतात जाल्यार, HTML, CSS, आनी JS खातीर तुमचे स्वताचे मिनिफायर चालीक लावपाची खात्री करात.

आडावंक नाशिल्लीं फायली

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

तुमी Google Chrome त Lighthouse प्लगइन वापरतात जाल्यार, तुमकां FCP चेर आडखळ आयल्या आसूं येता. पयलो सामुग्री रंग मेट्रीक पान लोड जावपाक सुरवात करता तेन्ना सावन पानाच्या सामुग्रीचो खंयचोय भाग पडद्याचेर रेंडर जाता तेन्ना मेरेनचो वेळ मेजता.

तुमी बिगर गंभीर जावास्क्रिप्ट वा CSS स्थगीत करून FCP सुदारूं येता. ताचो अर्थ कितें? फकत, तुमच्या पानाच्या पयल्या रंगाचेर हाजीर आसपाची गरज नाशिल्ली जावास्क्रिप्ट वा स्टायलशीट asyncवा deferगुणधर्मांनी चिन्न करपाक जाय.

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

हाचे विशीं तुमकां चड जाणून घेवपाचें आसल्यार ताचे विशीं पयलींच जायते व्हडले लेख आसात:

• https://web.dev/रेंडर-ब्लॉकिंग-रिसोर्सेस/
• https://web.dev/बिगर-गंभीर-css/ स्थगीत करप/

सदांच HTTPS वापरात

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

HTTPS वरवीं सेवा दिल्ल्या सायटींनी HTTPS जोडणीं वरवीं सगळ्या स्टायलशीट, स्क्रिप्ट, आनी हेर मालमत्तेचोय प्रवेश करचो. नाजाल्यार, तुमी वापरप्यांक मिश्र सक्रिय सामुग्री धाडटले , संभाव्य असुरक्षीततायेक कारण जातली जंय एक अवलंबन बदलून एक सायटी तडजोड करूंक शकता. हाका लागून सुरक्षा समस्या आनी वापरप्यांक दाखोवपी ब्राउझरा भितरल्यो शिटकावणी जावंक शकतात. तुमकां CDN कडल्यान Bootstrap मेळटा आसूं वा स्वता ताची सेवा दितात, तुमी फकत HTTPS जोडणींचेर ताका ऍक्सॅस करतात हाची खात्री करात.