Yɛ nea eye sen biara

Lean Sass nneɛma a wɔde ba amannɔne

Sɛ wode Sass redi dwuma wɔ w’agyapade pipeline mu a, hwɛ hu sɛ wobɛma Bootstrap ayɛ papa denam @importnneɛma a wuhia no nkutoo a wobɛfa so. Ɛda adi sɛ wo optimizations akɛse no befi Layout & Componentsyɛn 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";

Sɛ womfa component bi nni dwuma a, ka ho asɛm anaa popa no koraa. Sɛ nhwɛso no, sɛ womfa carousel no nni dwuma a, yi saa import no na fa fael kɛse bi sie wo CSS a woaboaboa ano no mu. Ma ɛntena w’adwene mu sɛ nneɛma bi wɔ hɔ a ɛde ne ho to so wɔ Sass imports nyinaa mu a ebetumi ama ayɛ den kɛse sɛ wubeyi fael bi afi mu.

Fa wo ho to JavaScript so

Bootstrap JavaScript no de biribiara a ɛwɔ yɛn dist fael a edi kan no mu ( bootstrap.jsne bootstrap.min.js), ne mpo yɛn ahofadi titiriw (Popper) a ɛwɔ yɛn bundle fael ahorow ( bootstrap.bundle.jsne bootstrap.bundle.min.js) no mu. Bere a woreyɛ nsakrae denam Sass so no, hwɛ hu sɛ wubeyi JavaScript a ɛfa ho no afi hɔ.

Sɛ nhwɛso no, sɛ yɛfa no sɛ wode w’ankasa JavaScript bundler te sɛ Webpack, Parcel, anaa Vite redi dwuma a, anka wode JavaScript a woayɛ nhyehyɛe sɛ wode bedi dwuma no nkutoo bɛba. Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, yɛkyerɛ sɛdeɛ yɛde yɛn modal JavaScript no bɛka ho ara kwa:

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

Saa kwan yi so no, woremfa JavaScript biara a wonyɛ w’adwene sɛ wode bedi dwuma ama nneɛma te sɛ buttons, carousels, ne adwinnade ho nsɛm nka ho. Sɛ worefa dropdowns, adwinnade ho nsɛm anaa popovers aba a, hwɛ hu sɛ wobɛkyerɛw Popper dependency no wɔ wo package.jsonfael no mu.

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

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

Autoprefixer .browserslistrc a wɔde di dwuma wɔ ɔkwan a ɛyɛ nwonwa so

Bootstrap gyina Autoprefixer so sɛ ɛde browser prefixes bɛka CSS agyapade ahorow bi ho ankasa. Prefixes no yɛ yɛn .browserslistrcfael no na ɛkyerɛ, wohu wɔ Bootstrap repo no ntini mu. Sɛ wo sesa browser ahorow yi din na wosan boaboa Sass no ano a, ɛno ara beyi CSS bi afi wo CSS a woaboaboa ano no mu, sɛ vendor prefix ahorow bi wɔ hɔ a ɛyɛ soronko wɔ saa browser anaa version no ho a.

CSS a wɔmfa nni dwuma

Mmoa a wopɛ wɔ ɔfã yi ho, yɛsrɛ wo susuw ho sɛ wubebue PR. Aseda!

Bere a yenni nhwɛso a wɔadi kan ayɛ a yɛde bedi dwuma de PurgeCSS ne Bootstrap adi dwuma no, nsɛm bi wɔ hɔ a ɛboa ne nantew a ɔmanfo no akyerɛw. Nneɛma bi a wubetumi apaw ni:

• https://medium.com/dwarves-fapem/yi-css-styles-a-wɔmfa nni dwuma-firi-bootstrap-a-de-purgecss-88395a2c5772-di dwuma
• https://lukelowrey.com/ɔno ara-yi-css-a-wɔde-di dwuma-firi-bootstrap-anaa-afã-afoforo-nhyɛaseɛ-mu/

Nea etwa to no, saa CSS Tricks asɛm yi a ɛfa CSS a wɔmfa nni dwuma ho no kyerɛ sɛnea wɔde PurgeCSS ne nnwinnade afoforo a ɛte saa di dwuma.

Minify na gzip

Bere biara a ɛbɛyɛ yiye no, hwɛ hu sɛ wobɛmia code a wode ma wo nsrahwɛfo no nyinaa so. Sɛ wode Bootstrap dist fael ahorow redi dwuma a, bɔ mmɔden sɛ wobɛbata nkyerɛase ahorow a wɔayɛ no ketewaa no ho (a .min.cssne .min.jsntrɛwmu no kyerɛ). Sɛ worekyekye Bootstrap afiri source no mu de w'ankasa build system a, hwɛ sɛ wode w'ankasa minifiers bedi dwuma ama HTML, CSS, ne JS.

Fael ahorow a ɛnyɛ nea esiw kwan

Bere a ebia ɛbɛyɛ te sɛ nea compression a wobɛtew so na wode adi dwuma no dɔɔso no, wo fael ahorow a wobɛma ayɛ nea ɛnyɛ nea esiw kwan no nso yɛ anammɔn kɛse a ɛbɛma wo wɛbsaet no ayɛ yiye na ayɛ ntɛmntɛm sɛnea ɛsɛ.

Sɛ wode Lighthouse plugin redi dwuma wɔ Google Chrome mu a, ebia woahintiw wɔ FCP ho. First Contentful Paint metric no susu bere a efi bere a krataafa no fi ase load kosi bere a wɔde krataafa no mu nsɛm no fã biara kyerɛ wɔ screen no so.

Wubetumi ama FCP atu mpɔn denam JavaScript anaa CSS a ɛnyɛ nea ɛho hia a wobɛtwentwɛn so no so. Dɛn na ɛno kyerɛ? asyncNe tiawa mu no, ɛsɛ sɛ wɔde anaa defersu ahorow hyɛ JavaScript anaa stylesheets a enhia sɛ ɛwɔ wo krataafa no paint a edi kan no so agyirae .

Eyi hwɛ hu sɛ wɔde nneɛma a ɛho nhia pii no bɛhyɛ mu akyiri yi na ɛrensiw paint a edi kan no kwan. Ɔkwan foforo so no, wobetumi de nneɛma a ɛho hia aka ho sɛ inline scripts anaa styles.

Sɛ wopɛ sɛ wusua eyi ho ade pii a, nsɛm akɛse pii wɔ hɔ a ɛfa ho dedaw:

• https://web.dev/render-a-wɔasiw-nneɛma/
• https://web.dev/defer-css-a-ɛnyɛ-nsɛm-a-ɛyɛ-asɛm/

Fa HTTPS di dwuma bere nyinaa

Ɛsɛ sɛ wo wɛbsaet no nya HTTPS nkitahodi nkutoo so wɔ adwumayɛ mu. HTTPS ma ahobammɔ, kokoamsɛm, ne wɛbsaet ahorow nyinaa a ɛwɔ hɔ no tu mpɔn, na biribiara nni hɔ a wɔfrɛ no wɛbsaet akwantu a ɛnyɛ nea ɛho hia . Anamɔn a wobɛfa so asiesie wo wɛbsaet no ma wɔasom wɔ HTTPS nkutoo so no gu ahorow kɛse a egyina wo nhyehyɛe ne wɛb hosting provider so, na enti ɛboro saa docs yi so.

Ɛsɛ sɛ sait ahorow a wɔde HTTPS som no nso nya stylesheets, scripts, ne agyapade afoforo nyinaa wɔ HTTPS nkitahodi so. Sɛ ɛnte saa a, you’ll be sending users mixed active content , a ɛde ɔhaw ahorow a ebetumi aba a wobetumi asɛe sait bi denam nsakrae a wɔde gyina so no so. Eyi betumi ama ahobammɔ ho nsɛm aba na wɔde kɔkɔbɔ ahorow a ɛwɔ browser no mu akyerɛ wɔn a wɔde di dwuma no. Sɛ́ ebia worenya Bootstrap afi CDN mu anaasɛ w’ankasa woresom no, hwɛ hu sɛ wobɛfa HTTPS nkitahodi nkutoo so akɔ mu.