Optimize

Kenbe pwojè ou yo mèg, reponn, ak antretyen pou ou ka bay pi bon eksperyans nan epi konsantre sou travay ki pi enpòtan.

Nan paj sa a

Lean Sass enpòtasyon

Lè w ap itilize Sass nan tiyo avantaj ou a, asire w ke ou optimize Bootstrap lè w itilize sèlman @importeleman ou bezwen yo. Pi gwo optimize w yo ap gen anpil chans soti nan Layout & Componentsseksyon nou an 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";

Si w pa itilize yon eleman, kòmante li oswa efase li nèt. Pa egzanp, si w pa itilize Carousel la, retire enpòte sa a pou konsève pou kèk gwosè dosye nan CSS konpile w la. Kenbe nan tèt ou gen kèk depandans atravè enpòtasyon Sass ki ka fè li pi difisil pou omisyon yon dosye.

Lean JavaScript

JavaScript Bootstrap a gen ladan chak eleman nan dosye prensipal nou yo ( bootstrap.jsak bootstrap.min.js), e menm depandans prensipal nou an (Popper) ak fichye pake nou yo ( bootstrap.bundle.jsak bootstrap.bundle.min.js). Pandan w ap personnaliser via Sass, asire w ke w retire JavaScript ki gen rapò.

Pou egzanp, si w ap itilize pwòp JavaScript bundler ou tankou Webpack oswa Rollup, ou ta sèlman enpòte JavaScript ou planifye sou itilize a. Nan egzanp ki anba a, nou montre kijan pou jis enkli JavaScript modal nou an:

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

Nan fason sa a, ou pa enkli okenn JavaScript ou pa gen entansyon itilize pou eleman tankou bouton, karousèl, ak konsèy sou zouti. Si w ap enpòte dropdowns, tooltips oswa popovers, asire w ou mete depandans Popper la nan package.jsondosye w la.

Ekspòtasyon Default

Fichye yo bootstrap/js/distitilize ekspòtasyon defo a , kidonk si ou vle sèvi ak youn nan yo ou dwe fè sa ki annapre yo:

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

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

Autoprefixer .browserslistrc

Bootstrap depann de Autoprefixer pou ajoute otomatikman prefiks navigatè nan sèten pwopriyete CSS. Prefiks yo dikte pa .browserslistrcdosye nou an, yo jwenn nan rasin Bootstrap repo a. Pèsonalize lis navigatè sa yo ak rekonpile Sass la pral otomatikman retire kèk CSS nan CSS konpile ou a, si gen prefiks machann ki inik nan navigatè sa a oswa vèsyon.

CSS ki pa itilize

Èd ou vle ak seksyon sa a, tanpri konsidere louvri yon PR. Mèsi!

Pandan ke nou pa gen yon egzanp prekonstwi pou itilize PurgeCSS ak Bootstrap, gen kèk atik itil ak solisyon ke kominote a te ekri. Men kèk opsyon:

Anfen, atik CSS Tricks sa a sou CSS ki pa itilize yo montre kijan pou itilize PurgeCSS ak lòt zouti ki sanble.

Minify ak gzip

Chak fwa sa posib, asire w ke ou konprese tout kòd ou sèvi pou vizitè ou yo. Si w ap itilize dosye Bootstrap dist, eseye kenbe vèsyon yo minified (ki endike nan .min.cssak .min.jsekstansyon). Si w ap konstwi Bootstrap nan sous la ak pwòp sistèm bati ou, asire w ke w aplike pwòp minifiers ou pou HTML, CSS, ak JS.

Fichye ki pa bloke yo

Pandan ke minifying ak lè l sèvi avèk konpresyon ta ka sanble ase, fè dosye ou yo ki pa bloke se tou yon gwo etap nan fè sit ou byen optimize ak vit ase.

Si w ap itilize yon Plugin Lighthouse nan Google Chrome, ou ka bite sou FCP. Premye metrik Contentful Paint la mezire tan depi lè paj la kòmanse chaje ak lè nenpòt pati nan kontni paj la parèt sou ekran an.

Ou ka amelyore FCP lè w ranvwaye JavaScript oswa CSS ki pa kritik. Kisa sa vle di? Senpleman, JavaScript oswa stylesheets ki pa bezwen prezan sou premye penti paj ou a ta dwe make ak asyncoswa deferatribi.

Sa a asire ke resous yo mwens enpòtan yo chaje pita epi yo pa bloke premye penti a. Nan lòt men an, resous kritik yo ka enkli kòm scripts inline oswa estil.

Si ou vle aprann plis sou sa, gen deja yon anpil nan gwo atik sou li:

Toujou itilize HTTPS

Sit entènèt ou a ta dwe disponib sèlman sou koneksyon HTTPS nan pwodiksyon an. HTTPS amelyore sekirite, konfidansyalite, ak disponiblite tout sit, epi pa gen okenn bagay tankou trafik entènèt ki pa sansib . Etap yo pou konfigirasyon sit entènèt ou a pou sèvi sèlman sou HTTPS yo varye anpil depann sou achitekti ou ak founisè hosting entènèt, epi konsa yo pi lwen pase sijè ki abòde lan dokiman sa yo.

Sit yo sèvi sou HTTPS yo ta dwe tou jwenn aksè nan tout stylesheets, scripts, ak lòt byen sou koneksyon HTTPS. Sinon, ou pral voye itilizatè melanje kontni aktif , ki mennen nan frajilite potansyèl kote yon sit ka konpwomèt lè w chanje yon depandans. Sa a ka mennen nan pwoblèm sekirite ak avètisman nan navigatè parèt itilizatè yo. Si w ap resevwa Bootstrap nan yon CDN oswa sèvi li tèt ou, asire w ke ou sèlman jwenn aksè nan li sou koneksyon HTTPS.