Mu dara ju

Lean Sass agbewọle

Nigbati o ba nlo Sass ninu opo gigun ti epo dukia rẹ, rii daju pe o mu Bootstrap pọ si nipa @importlilo awọn paati ti o nilo nikan. Awọn iṣapeye ti o tobi julọ yoo ṣee ṣe lati Layout & Componentsabala ti wa 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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

Ti o ko ba lo paati kan, sọ asọye tabi paarẹ patapata. Fun apẹẹrẹ, ti o ko ba lo carousel, yọ agbewọle yẹn kuro lati ṣafipamọ iwọn faili diẹ ninu CSS ti o ṣajọ. Ranti pe diẹ ninu awọn igbẹkẹle wa kọja awọn agbewọle agbewọle Sass ti o le jẹ ki o nira sii lati fi faili silẹ.

JavaScript ti o tẹẹrẹ

Bootstrap's JavaScript pẹlu gbogbo paati ninu awọn faili dist akọkọ wa ( bootstrap.jsati bootstrap.min.js), ati paapaa igbẹkẹle akọkọ wa (Popper) pẹlu awọn faili lapapo ( bootstrap.bundle.jsati bootstrap.bundle.min.js). Lakoko ti o n ṣe isọdi nipasẹ Sass, rii daju lati yọ JavaScript ti o ni ibatan kuro.

Fun apẹẹrẹ, ti o ro pe o nlo lapapo JavaScript tirẹ bi Webpack tabi Rollup, iwọ yoo gbe JavaScript ti o gbero lori lilo nikan wọle. Ninu apẹẹrẹ ni isalẹ, a fihan bi a ṣe le ṣafikun modal JavaScript wa:

// 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

Ni ọna yii, iwọ ko pẹlu JavaScript eyikeyi ti o ko pinnu lati lo fun awọn paati bii awọn bọtini, carousels, ati awọn imọran irinṣẹ. Ti o ba n ṣe agbewọle awọn isọ silẹ, awọn imọran irinṣẹ tabi awọn agbejade, rii daju lati ṣe atokọ awọn igbẹkẹle Popper ninu package.jsonfaili rẹ.

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

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

Autoprefixer .browserslistrc

Bootstrap da lori Autoprefixer lati ṣafikun awọn asọtẹlẹ aṣawakiri laifọwọyi si awọn ohun-ini CSS kan. Awọn asọtẹlẹ jẹ titọ nipasẹ .browserslistrcfaili wa, ti a rii ni gbongbo Bootstrap repo. Ṣiṣatunṣe atokọ ti awọn aṣawakiri yii ati iṣakojọpọ Sass yoo yọ CSS diẹ kuro laifọwọyi lati CSS ti o ṣajọ, ti awọn ami-iṣaaju olutaja ti o yatọ si aṣawakiri tabi ẹya naa.

CSS ti ko lo

Iranlọwọ ti o fẹ pẹlu apakan yii, jọwọ ronu ṣiṣi PR kan. O ṣeun!

Lakoko ti a ko ni apẹẹrẹ ti a ti kọ tẹlẹ fun lilo PurgeCSS pẹlu Bootstrap, awọn nkan ti o ṣe iranlọwọ ati awọn irin-ajo wa ti agbegbe ti kọ. Eyi ni diẹ ninu awọn aṣayan:

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

Nikẹhin, nkan CSS Tricks yii lori CSS ti ko lo fihan bi o ṣe le lo PurgeCSS ati awọn irinṣẹ iru miiran.

Miniify ati gzip

Nigbakugba ti o ba ṣee ṣe, rii daju lati compress gbogbo koodu ti o ṣiṣẹ si awọn alejo rẹ. Ti o ba nlo awọn faili diststrap Bootstrap, gbiyanju lati Stick si awọn ẹya ti o dinku (itọkasi nipasẹ awọn .min.cssati awọn .min.jsamugbooro). Ti o ba n kọ Bootstrap lati orisun pẹlu eto kikọ tirẹ, rii daju lati ṣe awọn minififisonu tirẹ fun HTML, CSS, ati JS.

Awọn faili ti kii ṣe idinamọ

Lakoko ti o dinku ati lilo funmorawon le dabi pe o to, ṣiṣe awọn faili rẹ ti kii ṣe idinamọ tun jẹ igbesẹ nla ni ṣiṣe iṣapeye aaye rẹ daradara ati iyara to.

Ti o ba nlo itanna Lighthouse ni Google Chrome, o le ti kọsẹ lori FCP. Metiriki Kun Akoonu Akọkọ ṣe iwọn akoko lati igba ti oju-iwe naa ba bẹrẹ ikojọpọ si igba ti eyikeyi apakan akoonu oju-iwe naa jẹ jigbe loju iboju.

O le mu FCP dara si nipa didari JavaScript ti kii ṣe pataki tabi CSS. Kí ni ìyẹn túmọ̀ sí? Ni irọrun, JavaScript tabi awọn iwe aṣa ti ko nilo lati wa lori kikun akọkọ ti oju-iwe rẹ yẹ ki o samisi pẹlu asynctabi deferawọn abuda.

Eyi ṣe idaniloju pe awọn orisun ti ko ṣe pataki ti kojọpọ nigbamii ati kii ṣe idinamọ kikun kikun. Ni apa keji, awọn orisun pataki le wa pẹlu awọn iwe afọwọkọ inline tabi awọn ara.

Ti o ba fẹ kọ ẹkọ diẹ sii nipa eyi, ọpọlọpọ awọn nkan nla ti wa tẹlẹ nipa rẹ:

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

Lo HTTPS nigbagbogbo

Oju opo wẹẹbu rẹ yẹ ki o wa nikan lori awọn asopọ HTTPS ni iṣelọpọ. HTTPS ṣe ilọsiwaju aabo, aṣiri, ati wiwa ti gbogbo awọn aaye, ati pe ko si iru nkan bii ijabọ wẹẹbu ti kii ṣe akiyesi . Awọn igbesẹ lati tunto oju opo wẹẹbu rẹ lati ṣe iranṣẹ ni iyasọtọ lori HTTPS yatọ lọpọlọpọ da lori faaji rẹ ati olupese alejo gbigba wẹẹbu, ati nitorinaa o kọja opin ti awọn iwe aṣẹ wọnyi.

Awọn aaye ti o ṣiṣẹ lori HTTPS yẹ ki o tun wọle si gbogbo awọn iwe ara, awọn iwe afọwọkọ, ati awọn ohun-ini miiran lori awọn asopọ HTTPS. Bibẹẹkọ, iwọ yoo firanṣẹ awọn olumulo dapọ akoonu ti nṣiṣe lọwọ , ti o yori si awọn ailagbara ti o pọju nibiti aaye kan ti le gbogun nipasẹ yiyipada igbẹkẹle kan. Eyi le ja si awọn ọran aabo ati awọn ikilọ ẹrọ aṣawakiri ti o han si awọn olumulo. Boya o n gba Bootstrap lati CDN kan tabi ṣiṣẹsin funrararẹ, rii daju pe o wọle si lori awọn asopọ HTTPS nikan.