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

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

यदा स्वस्य सम्पत्तिपाइपलाइने 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 मध्ये किञ्चित् सञ्चिका-आकारं रक्षतु । मनसि धारयतु यत् Sass आयातेषु केचन आश्रयाः सन्ति ये सञ्चिकां परित्यक्तुं अधिकं कठिनं कर्तुं शक्नुवन्ति ।

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

Bootstrap इत्यस्य JavaScript अस्माकं प्राथमिक dist सञ्चिकासु ( bootstrap.jsand bootstrap.min.js) प्रत्येकं घटकं समावेशयति, अपि च अस्माकं प्राथमिकनिर्भरता (Popper) अपि अस्माकं बण्डल् सञ्चिकासु ( bootstrap.bundle.jsand bootstrap.bundle.min.js) सह । यदा भवान् Sass मार्गेण अनुकूलनं करोति तदा सम्बद्धं JavaScript अवश्यं निष्कासयतु।

यथा, भवान् स्वस्य जावास्क्रिप्ट् बण्डलरं यथा Webpack अथवा Rollup इत्यस्य उपयोगं करोति इति कल्पयित्वा, भवान् केवलं तत् जावास्क्रिप्ट् आयातयिष्यति यत् भवान् उपयोक्तुं योजनां करोति । अधोलिखिते उदाहरणे वयं दर्शयामः यत् केवलं अस्माकं मोडालजावास्क्रिप्ट् कथं समावेशयितुं शक्यते:

// 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स्वसञ्चिकायां Popper निर्भरतां अवश्यं सूचीतुं शक्नोति ।

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

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

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

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

अप्रयुक्त CSS

Help wanted with this section, please consider opening a PR. Thanks!

While we don’t have a prebuilt example for using PurgeCSS with Bootstrap, there are some helpful articles and walkthroughs that the community has written. Here are some options:

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

Lastly, this CSS Tricks article on unused CSS shows how to use PurgeCSS and other similar tools.

Minify and gzip

Whenever possible, be sure to compress all the code you serve to your visitors. If you’re using Bootstrap dist files, try to stick to the minified versions (indicated by the .min.css and .min.js extensions). If you’re building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS.

Nonblocking files

While minifying and using compression might seem like enough, making your files nonblocking ones is also a big step in making your site well-optimized and fast enough.

If you are using a Lighthouse plugin in Google Chrome, you may have stumbled over FCP. The First Contentful Paint metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.

You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don’t need to be present on the first paint of your page should be marked with async or defer attributes.

This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.

If you want to learn more about this, there are already a lot of great articles about it:

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

Always use HTTPS

Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and there is no such thing as non-sensitive web traffic. The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs.

Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users mixed active content, leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.