Optimize

Teachd a-steach Lean Sass

Nuair a bhios tu a’ cleachdadh Sass anns an loidhne-phìoban so-mhaoin agad, dèan cinnteach gun dèan thu an fheum as fheàrr de Bootstrap le bhith a’ toirt a-steach dìreach @importna pàirtean a tha a dhìth ort. Tha e coltach gun tig na optimizations as motha agad bhon Layout & Componentsroinn den fhaidhle 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";

Mura h-eil thu a’ cleachdadh co-phàirt, thoir beachd air no sguab às e gu tur. Mar eisimpleir, mura h-eil thu a’ cleachdadh an carousel, thoir air falbh an in-mhalairt sin gus beagan meud faidhle a shàbhaladh anns an CSS a chuir thu ri chèile. Cumaibh cuimhne gu bheil cuid de eisimeileachd ann an in-mhalairt Sass a dh’ fhaodadh a dhèanamh nas duilghe faidhle fhàgail air falbh.

JavaScript lean

Tha JavaScript Bootstrap a’ toirt a-steach a h-uile pàirt anns na prìomh fhaidhlichean dist againn ( bootstrap.jsagus bootstrap.min.js), agus eadhon ar prìomh eisimeileachd (Popper) leis na faidhlichean pasgan againn ( bootstrap.bundle.jsagus bootstrap.bundle.min.js). Fhad ‘s a tha thu a’ gnàthachadh tro Sass, bi cinnteach gun cuir thu air falbh JavaScript co-cheangailte.

Mar eisimpleir, a’ gabhail ris gu bheil thu a’ cleachdadh am pasgan JavaScript agad fhèin mar Webpack, Parcel, no Vite, cha bhiodh tu a’ toirt a-steach ach an JavaScript a tha thu an dùil a chleachdadh. Anns an eisimpleir gu h-ìosal, tha sinn a 'sealltainn mar a chuireas sinn a-steach ar 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';

San dòigh seo, chan eil thu a’ toirt a-steach JavaScript sam bith nach eil thu an dùil a chleachdadh airson co-phàirtean leithid putanan, carousels, agus molaidhean innealan. Ma tha thu a’ toirt a-steach dropdowns, molaidhean innealan no popovers, dèan cinnteach gun cuir thu liosta de eisimeileachd Popper san package.jsonfhaidhle agad.

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

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

Autoprefixer .browserslistrc

Tha Bootstrap an urra ri Autoprefixer gus ro-leasanan brobhsair a chuir gu fèin-ghluasadach gu cuid de thogalaichean CSS. Tha ro-leasachain air an òrdachadh leis an .browserslistrcfhaidhle againn, a lorgar ann am freumh an repo Bootstrap. Le bhith a’ gnàthachadh an liosta brobhsairean seo agus ag ath-chruinneachadh an Sass bheir sin air falbh cuid de CSS gu fèin-ghluasadach bhon CSS cruinnichte agad, ma tha ro-leasachain reiceadair ann gun samhail don bhrobhsair no dreach sin.

CSS gun chleachdadh

Cuideachadh ag iarraidh leis an roinn seo, smaoinich air fosgladh PR. Mòran taing!

Ged nach eil eisimpleir ro-thogte againn airson a bhith a’ cleachdadh PurgeCSS le Bootstrap, tha cuid de artaigilean feumail agus slighean coiseachd a tha a’ choimhearsnachd air a sgrìobhadh. Seo cuid de na roghainnean:

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

Mu dheireadh, tha an artaigil CSS Tricks seo air CSS nach deach a chleachdadh a ’sealltainn mar a chleachdas tu PurgeCSS agus innealan eile den aon seòrsa.

Mion-sgrùdadh agus gzip

Far an gabh sin dèanamh, dèan cinnteach gun dèan thu teannachadh air a’ chòd gu lèir a bheir thu don luchd-tadhail agad. Ma tha thu a’ cleachdadh faidhlichean dist Bootstrap, feuch ri cumail ris na dreachan beaga (air an comharrachadh leis an .min.cssagus .min.jsleudachain). Ma tha thu a’ togail Bootstrap bhon stòr leis an t-siostam togail agad fhèin, bi cinnteach gun cuir thu an gnìomh na mion-chomharran agad fhèin airson HTML, CSS, agus JS.

Faidhlichean gun bhacadh

Ged a dh’ fhaodadh coltas gu leòr a bhith a’ lughdachadh agus a’ cleachdadh teannachadh, tha a bhith a’ dèanamh na faidhlichean agad gun bhacadh cuideachd na cheum mòr ann a bhith a’ dèanamh do làrach-lìn làn-leasaichte agus luath gu leòr.

Ma tha thu a’ cleachdadh plugan Taigh- solais ann an Google Chrome, is dòcha gu bheil thu air tuiteam thairis air FCP. Bidh am meatrach First Contentful Paint a’ tomhas na h-ùine bho thòisicheas an duilleag a’ luchdachadh gu nuair a thèid pàirt sam bith de shusbaint na duilleige a thoirt seachad air an sgrion.

Faodaidh tu FCP a leasachadh le bhith a’ cur dheth JavaScript neo CSS neo-chudromach. Dè tha sin a’ ciallachadh? Gu sìmplidh, bu chòir JavaScript no duilleagan stoidhle nach fheum a bhith an làthair air a’ chiad pheant den duilleag agad a bhith air an comharrachadh le asyncno deferfeartan.

Bidh seo a 'dèanamh cinnteach gu bheil na goireasan nach eil cho cudromach air an luchdachadh nas fhaide air adhart agus gun a bhith a' cur bacadh air a 'chiad pheant. Air an làimh eile, faodar goireasan èiginneach a thoirt a-steach mar sgriobtaichean no stoidhlichean in-loidhne.

Ma tha thu airson barrachd ionnsachadh mu dheidhinn seo, tha tòrr artaigilean sgoinneil mu dheidhinn mu thràth:

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

Cleachd HTTPS an-còmhnaidh

Cha bu chòir don làrach-lìn agad a bhith ri fhaighinn ach thairis air ceanglaichean HTTPS ann an riochdachadh. Bidh HTTPS a’ leasachadh tèarainteachd, prìobhaideachd, agus cothrom air a h-uile làrach, agus chan eil leithid de rud ann ri trafaic lìn neo-mhothachail . Bidh na ceumannan gus an làrach-lìn agad a rèiteachadh airson a bhith air a fhrithealadh a-mhàin thairis air HTTPS ag atharrachadh gu farsaing a rèir an ailtireachd agus an solaraiche aoigheachd lìn agad, agus mar sin tha iad taobh a-muigh raon nan docaichean sin.

Bu chòir do làraich a tha air am frithealadh thairis air HTTPS cuideachd faighinn gu gach duilleag stoidhle, sgriobtaichean, agus maoin eile thairis air ceanglaichean HTTPS. Rud eile, bidh thu a’ cur susbaint gnìomhach measgaichte gu luchd-cleachdaidh , a’ leantainn gu so-leòntachd a dh’ fhaodadh a bhith ann far am faodar làrach a chuir an cunnart le bhith ag atharrachadh eisimeileachd. Faodaidh seo leantainn gu cùisean tèarainteachd agus rabhaidhean taobh a-staigh brobhsair air an taisbeanadh do luchd-cleachdaidh. Co-dhiù a tha thu a’ faighinn Bootstrap bho CDN no ga fhrithealadh leat fhèin, dèan cinnteach nach fhaigh thu cothrom air ach thairis air ceanglaichean HTTPS.