Ngoptimalake

Lean Sass impor

Nalika nggunakake Sass ing pipa aset, priksa manawa sampeyan ngoptimalake Bootstrap kanthi mung @importing komponen sing dibutuhake. Optimisasi paling gedhe sampeyan bakal teka saka Layout & Componentsbagean kita 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";

Yen sampeyan ora nggunakake komponen, komentar utawa mbusak kabeh. Contone, yen sampeyan ora nggunakake carousel, mbusak impor kasebut kanggo nyimpen sawetara ukuran file ing CSS sing dikompilasi. Elinga yen ana sawetara dependensi ing impor Sass sing bisa nggawe luwih angel ngilangi file.

Lean JavaScript

JavaScript Bootstrap nyakup saben komponen ing file dist utami kita ( bootstrap.jslan bootstrap.min.js), malah ketergantungan utami kita (Popper) karo file bundel kita ( bootstrap.bundle.jslan bootstrap.bundle.min.js). Nalika sampeyan ngatur liwat Sass, manawa kanggo mbusak JavaScript sing gegandhengan.

Contone, yen sampeyan nggunakake bundler JavaScript dhewe kaya Webpack utawa Rollup, sampeyan mung bakal ngimpor JavaScript sing arep digunakake. Ing conto ing ngisor iki, kita nuduhake carane mung nyakup JavaScript modal kita:

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

Kanthi cara iki, sampeyan ora kalebu JavaScript sing ora arep digunakake kanggo komponen kaya tombol, carousel, lan tooltips. Yen sampeyan ngimpor dropdowns, tooltips utawa popovers, priksa manawa sampeyan nemtokake ketergantungan Popper ing package.jsonfile sampeyan.

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

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

Autoprefixer .browserslistrc

Bootstrap gumantung ing Autoprefixer kanggo nambahake awalan browser kanthi otomatis menyang properti CSS tartamtu. Ater-ater didikte dening .browserslistrcfile kita, ditemokake ing root repo Bootstrap. Ngatur dhaptar browser iki lan ngumpulake maneh Sass bakal mbusak sawetara CSS kanthi otomatis saka CSS sing dikompilasi, yen ana prefiks vendor sing unik kanggo browser utawa versi kasebut.

CSS sing ora digunakake

Dibutuhake bantuan babagan bagean iki, nimbang mbukak PR. Matur nuwun!

Nalika kita ora duwe conto prebuilt kanggo nggunakake PurgeCSS karo Bootstrap, ana sawetara artikel migunani lan walkthroughs sing masyarakat wis ditulis. Ing ngisor iki sawetara opsi:

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

Pungkasan, artikel Trik CSS iki babagan CSS sing ora digunakake nuduhake carane nggunakake PurgeCSS lan alat liyane sing padha.

Minify lan 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.