Pag-optimize

Mga import nga Lean Sass

Kung gigamit ang Sass sa imong pipeline sa asset, siguruha nga ma-optimize nimo ang Bootstrap pinaagi lamang @importsa mga sangkap nga kinahanglan nimo. Ang imong pinakadako nga pag-optimize lagmit magagikan sa Layout & Componentsseksyon sa among 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";

Kung wala ka mogamit usa ka sangkap, i-comment kini o i-delete kini sa hingpit. Pananglitan, kung wala ka mogamit sa carousel, kuhaa kana nga import aron matipigan ang pila ka gidak-on sa file sa imong giipon nga CSS. Hinumdomi nga adunay pipila ka mga dependency sa mga import sa Sass nga mahimong mas lisud ang pagtangtang sa usa ka file.

Lean nga JavaScript

Ang JavaScript sa Bootstrap naglakip sa matag component sa among nag-unang dist files ( bootstrap.jsug bootstrap.min.js), ug bisan ang among nag-unang dependency (Popper) sa among bundle files ( bootstrap.bundle.jsug bootstrap.bundle.min.js). Samtang nag-customize ka pinaagi sa Sass, siguroha nga tangtangon ang may kalabutan nga JavaScript.

Pananglitan, kung imong gigamit ang imong kaugalingon nga JavaScript bundler sama sa Webpack, Parcel, o Vite, imong i-import lang ang JavaScript nga imong giplano nga gamiton. Sa pananglitan sa ubos, gipakita namon kung giunsa ilakip ang among 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';

Niining paagiha, wala ka mag-apil sa bisan unsang JavaScript nga dili nimo gusto nga gamiton alang sa mga sangkap sama sa mga buton, carousel, ug tooltip. Kung nag-import ka ug mga dropdown, tooltip o popovers, siguruha nga ilista ang pagsalig sa Popper sa imong package.jsonfile.

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

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

Autoprefixer .browserslistrc

Ang Bootstrap nagdepende sa Autoprefixer aron awtomatiko nga idugang ang mga prefix sa browser sa pipila nga mga kabtangan sa CSS. Ang mga prefix gidikta sa among .browserslistrcfile, nga makita sa gamut sa Bootstrap repo. Ang pag-customize niini nga lista sa mga browser ug pag-recompile sa Sass awtomatik nga magtangtang sa pipila ka CSS gikan sa imong gihugpong nga CSS, kung adunay mga prefix sa vendor nga talagsaon sa maong browser o bersyon.

Wala gigamit nga CSS

Nanginahanglan og tabang sa kini nga seksyon, palihug hunahunaa ang pag-abli sa usa ka PR. Salamat!

Samtang wala kami usa ka prebuilt nga pananglitan alang sa paggamit sa PurgeCSS nga adunay Bootstrap, adunay pipila ka makatabang nga mga artikulo ug mga lakang nga gisulat sa komunidad. Ania ang pipila ka mga kapilian:

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

Katapusan, kini nga artikulo sa CSS Tricks sa wala magamit nga CSS nagpakita kung giunsa paggamit ang PurgeCSS ug uban pang parehas nga mga himan.

Minify ug gzip

Kung mahimo, siguruha nga i-compress ang tanan nga code nga imong giserbisyuhan sa imong mga bisita. Kung gigamit nimo ang mga file sa Bootstrap dist, sulayi nga magpabilin sa mga minified nga bersyon (gipakita sa .min.cssug mga .min.jsextension). Kung nagtukod ka sa Bootstrap gikan sa gigikanan gamit ang imong kaugalingon nga sistema sa pagtukod, siguruha nga ipatuman ang imong kaugalingon nga mga minifier alang sa HTML, CSS, ug JS.

Non-blocking files

Samtang ang pagminus ug paggamit sa compression ingon og igo na, ang paghimo sa imong mga file nga dili maka-block usa usab ka dako nga lakang sa paghimo sa imong site nga maayo nga na-optimize ug igo nga paspas.

Kung naggamit ka usa ka Lighthouse nga plugin sa Google Chrome, tingali napandol ka sa FCP. Ang sukatan sa First Contentful Paint nagsukod sa oras gikan sa pagsugod sa pagkarga sa panid hangtod kung ang bisan unsang bahin sa sulud sa panid ma-render sa screen.

Mahimo nimong pauswagon ang FCP pinaagi sa paglangan sa dili kritikal nga JavaScript o CSS. Unsay buot ipasabot niana? Sa yano, ang JavaScript o mga stylesheet nga dili kinahanglan nga naa sa una nga pintura sa imong panid kinahanglan markahan asynco defermga hiyas.

Kini nagsiguro nga ang dili kaayo importante nga mga kapanguhaan makarga sa ulahi ug dili makababag sa unang pintura. Sa laing bahin, ang mga kritikal nga kapanguhaan mahimong iapil isip inline nga mga script o estilo.

Kung gusto nimo mahibal-an ang dugang bahin niini, adunay daghan na nga maayong mga artikulo bahin niini:

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

Kanunay gamita ang HTTPS

Ang imong website kinahanglan nga magamit ra sa mga koneksyon sa HTTPS sa produksiyon. Gipauswag sa HTTPS ang seguridad, pagkapribado, ug pagkaanaa sa tanan nga mga site, ug wala’y butang nga dili sensitibo sa trapiko sa web . Ang mga lakang sa pag-configure sa imong website aron maserbisyuhan sa eksklusibo sa HTTPS magkalainlain depende sa imong arkitektura ug web hosting provider, ug sa ingon wala sa sulud sa kini nga mga dokumento.

Ang mga site nga giserbisyuhan sa HTTPS kinahanglan usab nga maka-access sa tanang stylesheet, script, ug uban pang mga asset sa HTTPS nga koneksyon. Kung dili, magpadala ka sa mga tiggamit nga nagsagol nga aktibo nga sulud , nga mosangput sa mga potensyal nga kahuyangan diin ang usa ka site mahimong makompromiso pinaagi sa pag-usab sa usa ka dependency. Mahimo kini nga hinungdan sa mga isyu sa seguridad ug mga pasidaan sa sulod sa browser nga gipakita sa mga tiggamit. Nagkuha ka man ug Bootstrap gikan sa usa ka CDN o nag-alagad niini sa imong kaugalingon, siguruha nga imong ma-access kini sa mga koneksyon sa HTTPS.