Optimize kɛ

Aw ye aw ka porozew to u ka kɛ fɛn ye min ka nɔgɔn, ka jaabi di, ani ka u mara walasa aw ka se ka dɔnniya ɲuman di ani ka aw sinsin baara nafamabaw kan.

Nin ɲɛ in kan

Lean Sass ka fɛnw don jamana kɔnɔ

Ni aw bɛ baara kɛ ni Sass ye aw ka nafolomafɛnw pipeline kɔnɔ, aw ye aw jija ka Bootstrap ɲɛnabɔ ni @importaw mago bɛ fɛnw dɔrɔn de la. a ka c' a la , aw ka ɲɛtaa belebelebaw bɛna bɔ Layout & Componentsan ka yɔrɔ la 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";

N’i tɛ baara kɛ ni yɔrɔ dɔ ye, i k’a fɔ walima k’a bɔ yen pewu. Misali la, n’i tɛ baara Kɛ ni carousel ye, i k’o import (donni) Bɔ walasa ka filen hakɛ dɔw mara i ka CSS lajɛlen kɔnɔ. Aw k’a to aw hakili la ko danyɔrɔ dɔw bɛ Sass imports (donni) bɛɛ la minnu bɛ se ka gɛlɛya don ka dosiye dɔ bɔ yen.

Aw bɛ JavaScript sinsin

Bootstrap ka JavaScript bɛ an ka dist file fɔlɔw kɔnɔ yɔrɔ bɛɛ lajɛlen don ( bootstrap.jsani bootstrap.min.js), ani hali an ka dependency fɔlɔ (Popper) n’an ka bundle filew ( bootstrap.bundle.jsani bootstrap.bundle.min.js) ye. Ni aw bɛ ka fɛnw labɛn Sass fɛ, aw ye aw jija ka JavaScript min bɛ tali kɛ o la, o bɔ yen.

Misali la, n’i y’a jate Minɛ ko i bɛ baara Kɛ n’i yɛrɛ ka JavaScript bundler ye i n’a fɔ Webpack, Parcel, walima Vite, i b’a fɛ ka baara Kɛ ni JavaScript min ye, i bɛna o dɔrɔn de Ladon. Misali min bɛ duguma, an b’a jira cogo min na an bɛ se ka an ka JavaScript modal dɔrɔn de don a kɔnɔ:

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

O cogo la, i tɛ JavaScript si Dòn i la i t’a fɛ ka baara Kɛ ni min ye yɔrɔw la i n’a fɔ butɔni, karɔsili ani baarakɛminɛnw. N’i bɛ ka fɛnw ladon, baarakɛminɛnw walima popovers, i jija ka Popper dependency sɛbɛn i ka package.jsonfile kɔnɔ.

Default Exports (Jɛkulu ka bɔ jamana kɔkan).

Files in bootstrap/js/distuse the default export , o la n’i b’a fɛ ka baara Kɛ n’u dɔ ye i ka kan ka ninnu Kɛ:

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

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

Yɔrɔ-fɔcogo .browserslistrc

Bootstrap bɛ da Autoprefixer kan walasa ka navigatɔrɔn ɲɛbilaw fara a yɛrɛma CSS nafama dɔw kan. Prefixes (daɲɛ fɔlɔw) bɛ Dictated (fɔlikan) an ka .browserslistrcfile (dosiye) fɛ, min bɛ Sɔrɔ Bootstrap repo ju la. Ni i ye nin navigatɔrɔw lisɛli kɛ ka kɛɲɛ ni i yɛrɛ sago ye ani ka Sass lajɛ kokura, o bɛna CSS dɔw bɔ i yɛrɛ la i ka CSS lajɛlen kɔnɔ, ni feerekɛlaw ka daɲɛw bɛ yen minnu tɛ kelen ye o navigatɔrɔ walima o bɔko la.

CSS min tɛ baara kɛ ni a ye

Dɛmɛ ɲininen bɛ nin yɔrɔ in na, aw ye jateminɛ kɛ ka PR da wuli. Barika!

Hali n’an tɛ misali jɔlen sɔrɔ ka kɔn PurgeCSS baara kɛ ni Bootstrap ye, barokun dɔw bɛ yen minnu bɛ se ka dɛmɛ don ani taamasenɲɛ minnu bɛ sigidamɔgɔw fɛ. Sugandili dɔw filɛ nin ye:

A laban na, nin CSS Tricks barokun in min bɛ CSS baarabali kan , o bɛ PurgeCSS ni o ɲɔgɔnna baarakɛminɛn wɛrɛw baaracogo jira.

Minify ani gzip

Ni aw bɛ se tuma o tuma, aw bɛ kode minnu bɛɛ di aw ka taamakɛlaw ma, aw ye aw jija ka olu bɛɛ sɛgɛsɛgɛ. N’i bɛ baara kɛ ni Bootstrap dist filew ye, i k’a ɲini ka nɔrɔ a bɔcogo fitininw na (a jiralen bɛ ni .min.cssand .min.jsextensions ye). N'i bɛ Bootstrap jɔ ka Bɔ 'sèn na n'i yɛrɛ ka jɔli-sistɛm ye, i k'i jija k'i yɛrɛ ka minisiriw waleya HTML, CSS ani JS kama.

Filenw minnu tɛ bloki ye

Hali n’a bɛ Se ka Kɛ ko compression (daɲɛw) dɔgɔyali n’u baara bɛ Se ka Kɛ i n’a fɔ a bɛ Se ka Kɛ, k’i ka dosiyew Kɛ minnu tɛ balilanw ye, o fana ye fɛɛrɛba ye walasa k’i ka yɔrɔ Kɛ ka ɲɛ ani ka teliya.

N’i bɛ baara Kɛ ni Lighthouse plugin ye Google Chrome kɔnɔ, n’a sɔrɔla i ye FCP Sɔrɔ. Penti fɔlɔ kɔnɔkow jateminɛ bɛ waati suman k’a ta ɲɛ bɛ doni daminɛ waati min na ka se ɲɛ kɔnɔko yɔrɔ dɔ jirali ma ɛkran kan.

Aw bɛ se ka FCP ɲɛ ka taa a fɛ ni aw ye JavaScript walima CSS min tɛ kɔrɔfɔ ye, o bila kɔfɛ. O kɔrɔ ye mun ye? Nɔgɔya la, JavaScript walima stylesheets minnu man kan ka kɛ i ka ɲɛ penti fɔlɔ kan, olu ka kan ka taamasiyɛn kɛ ni asyncwalima deferattributes ye.

O b’a to nafolo minnu nafa ka bon kosɛbɛ, olu bɛ doni kɔfɛ ani ka penti fɔlɔ bali. Faan wɛrɛ fɛ, nafolo kɔrɔlenw bɛ se ka don a kɔnɔ i n’a fɔ inline scripts walima styles.

N’i b’a fɛ ka kunnafoni wɛrɛw sɔrɔ nin ko in kan, barokun ɲuman caman bɛ yen kaban a kan:

Baara kɛ ni HTTPS ye tuma bɛɛ

I ka siti ka kan ka sɔrɔ HTTPS ɲɔgɔndanw dɔrɔn de fɛ a dilanni na. HTTPS bɛ site web bɛɛ lakanani, u danbe ani u sɔrɔcogo ɲɛ ka taa a fɛ, wa fɛn si tɛ yen min bɛ wele ko ɛntɛrinɛti taamasiyɛnw . Fɛɛrɛ minnu bɛ kɛ walasa k’i ka siti in labɛn walasa a ka baara kɛ HTTPS dɔrɔn fɛ, olu bɛ danfaraba la ka kɛɲɛ ni i ka fɛn dilanni n’i ka siti jatigila dilanbaga ye, wa o la, u tɛ o sɛbɛnw kɔnɔ.

Siti minnu bɛ baara kɛ HTTPS fɛ, olu fana ka kan ka se ka stylesheets, scripts ani nafolo wɛrɛw bɛɛ sɔrɔ HTTPS ɲɔgɔndanw fɛ. N’o tɛ, i bɛna kunnafoni baarakɛtaw ɲagaminenw ci baarakɛlaw ma , o bɛ na ni fɛn dɔw ye minnu bɛ se ka kɛ sababu ye ka yɔrɔ dɔ tiɲɛ yɔrɔ min na, o bɛ se ka tiɲɛ ni dannaya dɔ caman caman cili ye. O bɛ se ka kɛ sababu ye ka lakana koɲɛw sɔrɔ ani ka lasɔminiw jira baarakɛlaw la minnu bɛ sɔrɔ navigatɛri kɔnɔ. I mana Bootstrap sɔrɔ CDN fɛ wo, i yɛrɛ bɛ baara kɛ n’a ye wo, i k’a lajɛ ko i bɛ se k’a sɔrɔ HTTPS ɲɔgɔndanw dɔrɔn de fɛ.