Optimize

Lean Sass inotengeswa kunze kwenyika

Paunenge uchishandisa Sass mupombi yako yeasset, ita shuwa kuti unokwidziridza Bootstrap nekungoisa @importzvinhu zvaunoda. Yako yakakura optimizations inogona kuuya kubva Layout & Componentskuchikamu chedu 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";

Kana usiri kushandisa chikamu, chitaure kana chidzima zvachose. Semuenzaniso, kana usiri kushandisa carousel, bvisa iyo inopinza kuti uchengetedze saizi yefaira muCSS yako yakanyorwa. Ramba uchifunga kuti kune zvimwe zvinotsamira pane zvakatorwa neSass izvo zvinogona kuita kuti zvinyanye kunetsa kusiya faira.

Lean JavaScript

Bootstrap's JavaScript inosanganisira chese chikamu mumafaira edu ekutanga dist ( bootstrap.jsuye bootstrap.min.js), uye kunyangwe kutsamira kwedu kwekutanga (Popper) nemafaera edu emasumbu ( bootstrap.bundle.jsuye bootstrap.bundle.min.js). Paunenge uchigadzirisa kuburikidza neSass, ita shuwa kubvisa yakabatana JavaScript.

Semuenzaniso, uchifungidzira kuti uri kushandisa yako JavaScript bundler seWebpack kana Rollup, unongopinza JavaScript yaunoronga kushandisa. Mumuenzaniso uri pazasi, tinoratidza nzira yekungosanganisa yedu modal 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';

Nenzira iyi, hausi kusanganisira chero JavaScript yausingafungire kushandisa senge mabhatani, carousels, uye matipi ekushandisa. Kana iwe uri kuunza kunze zvinodonhedza pasi, maturusi kana mapopovers, ita shuwa kunyora kutsamira kwePopper package.jsonmufaira rako.

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

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

Autoprefixer .browserslistrc

Bootstrap inotsamira pa Autoprefixer kuti iwedzere otomatiki browser prefixes kune zvimwe CSS zvivakwa. Prefixes inorairwa .browserslistrcnefaira redu, rinowanikwa mumudzi weBootstrap repo. Kugadzirisa iyi runyoro rwemabhurawuza uye kudzorera iyo Sass inozobvisa otomatiki imwe CSS kubva kuCSS yako yakaunganidzwa, kana paine prefixes yemutengesi akasiyana nebrowser iyoyo kana shanduro.

CSS isina kushandiswa

Rubatsiro runodiwa nechikamu ichi, ndapota funga kuvhura PR. Ndatenda!

Kunyange isu tisina muenzaniso wakavakwa wekushandisa PurgeCSS neBootstrap, pane zvimwe zvinobatsira zvinyorwa uye mafambiro akanyorwa nenharaunda. Hedzino dzimwe sarudzo:

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

Chekupedzisira, iyi CSS Tricks chinyorwa pane isina kushandiswa CSS inoratidza mashandisiro ePurgeCSS uye mamwe maturusi akafanana.

Minify uye gzip

Pese pazvinogoneka, ita shuwa kudzvanya kodhi yese yaunopa kune vashanyi vako. Kana iwe uri kushandisa Bootstrap dist mafaera, edza kunamatira kune minified shanduro (inoratidzwa neiyo .min.cssuye .min.jsmawedzero). Kana iwe uri kuvaka Bootstrap kubva kutsime neyako yekuvaka sisitimu, ita shuwa kuti unoshandisa yako minifiers yeHTML, CSS, uye JS.

Mafaira asina kuvhara

Nepo miniifying uye kushandisa compression ingaite seyakakwana, kuita kuti mafaera ako asavhare iwo zvakare inhanho hombe mukuita kuti saiti yako igadziriswe zvakanaka uye nekukurumidza zvakakwana.

Kana uri kushandisa Lighthouse plugin muGoogle Chrome, unogona kunge wakagumburwa neFCP. Yekutanga Yekugutsikana Paint metric inoyera nguva kubva peji parinotanga kurodha kusvika kana chero chikamu chepeji chinoratidzwa pachiratidziri.

Unogona kuvandudza FCP nekumisa isina-yakakosha JavaScript kana CSS. Zvinorevei izvo? Zviri nyore, JavaScript kana masitayera haadi kuve aripo papendi yekutanga yepeji rako anofanira kumakwa asynckana deferhunhu.

Izvi zvinovimbisa kuti zviwanikwa zvisingakoshi zvinotakurwa gare gare uye kwete kuvhara pendi yekutanga. Kune rimwe divi, zviwanikwa zvakakosha zvinogona kuverengerwa seinline zvinyorwa kana masitaera.

Kana iwe uchida kudzidza zvakawanda nezve izvi, pane zvatove nezvakawanda zvezvinyorwa zvakanaka nezvazvo:

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

Gara uchishandisa HTTPS

Webhusaiti yako inofanirwa kuwanikwa chete pamusoro peHTTPS yekubatanidza mukugadzira. HTTPS inovandudza kuchengetedzeka, kuvanzika, uye kuwanikwa kwemasaiti ese, uye hapana chinhu chakadai senge isina-sensitive web traffic . Matanho ekugadzirisa webhusaiti yako kuti ishandiswe chete pamusoro peHTTPS anosiyana zvakanyanya zvichienderana neako mavakirwo uye webhu saiti mupi, uye nekudaro ari kupfuura chiyero chemagwaro aya.

Masaiti anoshandirwa pamusoro peHTTPS anofanirwawo kuwana ese masitayera, zvinyorwa, uye zvimwe zvinhu pamusoro peHTTPS yekubatanidza. Zvikasadaro, iwe unenge uchitumira vashandisi zvakasanganiswa zvinoshanda zvemukati , zvichitungamira kune zvinogona kukanganisa apo saiti inogona kukanganisa nekuchinja kutsamira. Izvi zvinogona kutungamira kumatambudziko ekuchengetedza uye mu-browser yambiro inoratidzwa kune vashandisi. Kunyangwe iwe uri kutora Bootstrap kubva kuCDN kana kuzvishandira wega, ita shuwa kuti unongoiwana chete pamusoro peHTTPS yekubatanidza.