Optamaigh

Allmhairí Lean Sass

Agus Sass á úsáid agat i do phíblíne sócmhainne, déan cinnte go ndéanann tú Bootstrap a bharrfheabhsú trí @importna comhpháirteanna a theastaíonn uait a chur isteach. Is dócha go dtiocfaidh do leas iomlán a bhaint as an Layout & Componentsrannóg dár 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";

Mura bhfuil comhpháirt in úsáid agat, déan trácht uirthi nó scrios go hiomlán í. Mar shampla, mura bhfuil an timpeallán á úsáid agat, bain an t-iompórtáil sin chun méid comhaid éigin a shábháil i do CSS tiomsaithe. Coinnigh i gcuimhne go bhfuil roinnt spleáchais ar allmhairí Sass a d'fhéadfadh go mbeadh sé níos deacra comhad a fhágáil ar lár.

JavaScript lean

Cuimsíonn JavaScript Bootstrap gach comhpháirt inár gcomhaid dist bunscoile ( bootstrap.jsagus bootstrap.min.js), agus fiú ár spleáchas príomhúil (Popper) lenár gcomhaid bundle ( bootstrap.bundle.jsagus bootstrap.bundle.min.js). Cé go bhfuil tú ag saincheaptha trí Sass, bí cinnte go mbainfidh tú JavaScript gaolmhar.

Mar shampla, ag glacadh leis go bhfuil tú ag baint úsáide as do bheartán JavaScript féin ar nós Webpack nó Rollup, ní dhéanfá ach an JavaScript atá beartaithe agat a úsáid a allmhairiú. Sa sampla thíos, léirímid conas ár JavaScript módúil a chur san áireamh:

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

Ar an mbealach seo, níl aon JavaScript agat nach bhfuil sé ar intinn agat a úsáid le haghaidh comhpháirteanna mar cnaipí, timpealláin agus leideanna uirlisí. Má tá anuas, leideanna uirlisí nó popovers á n-iompórtáil agat, déan cinnte an spleáchas ar phopper a liostáil i do package.jsonchomhad.

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

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

Uath-réamhshocrú .browserslistrc

Braitheann Bootstrap ar Autoprefixer chun réimíreanna brabhsálaí a chur le hairíonna áirithe CSS go huathoibríoch. Déanann ár gcomhad na réimíreanna a dheachtú .browserslistrc, agus iad le fáil i bhfréamh an repo Bootstrap. Má dhéantar an liosta brabhsálaithe seo a shaincheapadh agus má dhéantar an Sass a ath-thiomsú, bainfear roinnt CSS de do CSS tiomsaithe go huathoibríoch, má tá réimíreanna díoltóirí ann atá uathúil don bhrabhsálaí nó don leagan sin.

CSS gan úsáid

Cabhair uait leis an rannán seo, smaoinigh le do thoil ar PR a oscailt. Go raibh maith agat!

Cé nach bhfuil sampla réamhthógtha againn maidir le húsáid PurgeCSS le Bootstrap, tá roinnt altanna cabhracha agus treoracha atá scríofa ag an bpobal. Seo roinnt roghanna:

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

Ar deireadh, léiríonn an t-alt seo CSS Tricks ar CSS neamhúsáidte conas PurgeCSS agus uirlisí eile dá samhail a úsáid.

Minify agus gzip

Nuair is féidir, déan cinnte an cód go léir a fhreastalaíonn tú ar do chuairteoirí a chomhbhrú. Má tá comhaid dist Bootstrap á n-úsáid agat, déan iarracht cloí leis na leaganacha mionaithe (arna léiriú ag an .min.cssagus na .min.jssíntí). Má tá tú ag tógáil Bootstrap ón bhfoinse le do chóras tógála féin, bí cinnte go gcuirfidh tú do mhionaitheoirí féin i bhfeidhm le haghaidh HTML, CSS, agus JS.

Comhaid neamh-blocála

Cé gur cosúil gur leor comhbhrú a íoslaghdú agus a úsáid, is céim mhór é do chuid comhad a dhéanamh gan bac a chur ar do shuíomh chun do shuíomh a dhéanamh optamaithe go maith agus tapa go leor.

Má tá breiseán Teach Solais in úsáid agat in Google Chrome, b’fhéidir gur thit tú thar FCP. Tomhaiseann méadrach an Chéad Phéint Inneachair an t-am ón uair a thosaíonn an leathanach á luchtú go dtí an uair a rindreáiltear aon chuid d’ábhar an leathanaigh ar an scáileán.

Is féidir leat FCP a fheabhsú trí JavaScript nó CSS ​​neamhchriticiúil a chur siar. Cad is brí le sin? Go simplí, ba chóir JavaScript nó stílbhileoga nach gá a bheith i láthair ar an gcéad phéinteáil de do leathanach a mharcáil le tréithe asyncnó defertréithe.

Cinntíonn sé seo go bhfuil na hacmhainní nach lú tábhacht luchtaithe níos déanaí agus nach bhfuil bac ar an chéad péint. Ar an láimh eile, is féidir acmhainní ríthábhachtacha a áireamh mar scripteanna nó stíleanna inlíne.

Más mian leat níos mó a fhoghlaim faoi seo, tá go leor alt iontach faoi seo cheana féin:

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

Bain úsáid as HTTPS i gcónaí

Níor cheart go mbeadh do shuíomh Gréasáin ar fáil ach thar naisc HTTPS i dtáirgeadh. Feabhsaíonn HTTPS slándáil, príobháideacht agus infhaighteacht gach láithreán, agus níl a leithéid de rud ann agus trácht gréasáin neamhíogair . Athraíonn na céimeanna chun do shuíomh Gréasáin a chumrú le freastal air go heisiach thar HTTPS ag brath ar do ailtireacht agus do sholáthraí óstála gréasáin, agus mar sin tá siad lasmuigh de raon feidhme na ndoiciméad seo.

Ba cheart go mbeadh rochtain ag suíomhanna a ndéantar freastal orthu thar HTTPS ar gach stílbhileog, script agus sócmhainní eile thar naisc HTTPS. Seachas sin, beidh ábhar gníomhach measctha á sheoladh agat chuig úsáideoirí , rud a fhágann go mbeidh leochaileachtaí féideartha ann nuair is féidir suíomh a chur i mbaol trí spleáchas a athrú. D'fhéadfadh saincheisteanna slándála agus rabhaidh in-bhrabhsálaí a thaispeáint d'úsáideoirí a bheith mar thoradh air seo. Cibé an bhfuil Bootstrap á fháil agat ó CDN nó ag freastal air féin, cinntigh nach bhfuil rochtain agat air ach thar naisc HTTPS.