Lungiselela

Ukungenisa kwe-Lean Sass

Uma usebenzisa i-Sass emgqeni wempahla yakho, qiniseka ukuthi uthuthukisa i-Bootstrap ngokufaka @importizingxenye ozidingayo kuphela. Ukulungiselela kwakho okukhulu kakhulu kuzovela Layout & Componentsesigabeni sethu 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";

Uma ungasebenzisi ingxenye, yibeke amazwana noma uyisuse ngokuphelele. Isibonelo, uma ungasebenzisi i-carousel, susa lokho kungenisa ukuze ulondoloze usayizi wefayela othile ku-CSS yakho ehlanganisiwe. Khumbula ukuthi kukhona ukuncika kuyo yonke imikhiqizo yakwa-Sass engenza kube nzima kakhulu ukukhipha ifayela.

I-JavaScript engenamandla

I-JavaScript ye-Bootstrap ihlanganisa yonke ingxenye kumafayela ethu ayinhloko e-dist ( bootstrap.jskanye bootstrap.min.js), ngisho nokuncika kwethu okuyinhloko (i-Popper) namafayela ethu enqwaba ( bootstrap.bundle.jskanye bootstrap.bundle.min.js). Ngenkathi wenza ngendlela oyifisayo nge-Sass, qiniseka ukuthi uyayisusa i-JavaScript ehlobene.

Isibonelo, uma ucabanga ukuthi usebenzisa eyakho inqwaba ye-JavaScript efana ne-Webpack, i-Parcel, noma i-Vite, ungangenisa kuphela i-JavaScript ohlela ukuyisebenzisa. Esibonelweni esingezansi, sibonisa indlela yokufaka i-JavaScript yethu ye-modal:

// 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';

Ngale ndlela, awufaki noma iyiphi i-JavaScript ongahlosile ukuyisebenzisela izingxenye ezifana nezinkinobho, ama-carousels, namathiphu. Uma ungenisa okwehliswayo, amathiphu wamathuluzi noma ama-popover, qiniseka ukuthi ubhala uhlu lokuncika kwe-Popper package.jsonkufayela lakho.

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

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

Autoprefixer .browserslistrc

I-Bootstrap incike ku-Autoprefixer ukuze wengeze ngokuzenzakalelayo iziqalo zesiphequluli kuzakhiwo ezithile ze-CSS. Iziqalo zinqunywa .browserslistrcifayela lethu, elitholakala empandeni ye-Bootstrap repo. Ukwenza ngokwezifiso lolu hlu lweziphequluli nokubuyisela i-Sass kuzosusa ngokuzenzakalelayo enye i-CSS ku-CSS yakho ehlanganisiwe, uma kukhona iziqalo zomthengisi ezihlukile kuleso siphequluli noma inguqulo.

I-CSS engasetshenzisiwe

Usizo olufunwa ngalesi sigaba, sicela ucabange ukuvula i-PR. Siyabonga!

Yize singenaso isibonelo esakhelwe ngaphambilini sokusebenzisa i- PurgeCSS nge-Bootstrap, kukhona ama-athikili awusizo kanye nemigudu ebhalwe ngumphakathi. Nazi ezinye izinketho:

• 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/

Okokugcina, lesi sihloko se-CSS Tricks ku-CSS engasetshenzisiwe sibonisa indlela yokusebenzisa i-PurgeCSS namanye amathuluzi afanayo.

I-Minify ne-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.

Non-blocking files

While minifying and using compression might seem like enough, making your files non-blocking 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.