I-optimize

Lean Sass import

Kapag gumagamit ng Sass sa pipeline ng iyong asset, tiyaking na-optimize mo ang Bootstrap sa pamamagitan lamang @importng mga sangkap na kailangan mo. Ang iyong pinakamalaking pag-optimize ay malamang na magmumula sa Layout & Componentsseksyon ng aming 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";

Kung hindi ka gumagamit ng isang bahagi, ikomento ito o tanggalin ito nang buo. Halimbawa, kung hindi mo ginagamit ang carousel, alisin ang pag-import na iyon upang makatipid ng ilang laki ng file sa iyong pinagsama-samang CSS. Tandaan na may ilang dependency sa mga pag-import ng Sass na maaaring maging mas mahirap na alisin ang isang file.

Lean JavaScript

Kasama sa JavaScript ng Bootstrap ang bawat bahagi sa aming mga pangunahing dist file ( bootstrap.jsat bootstrap.min.js), at maging ang aming pangunahing dependency (Popper) sa aming mga bundle na file ( bootstrap.bundle.jsat bootstrap.bundle.min.js). Habang nagko-customize ka sa pamamagitan ng Sass, tiyaking alisin ang nauugnay na JavaScript.

Halimbawa, sa pag-aakalang ginagamit mo ang iyong sariling JavaScript bundler tulad ng Webpack o Rollup, ii-import mo lang ang JavaScript na pinaplano mong gamitin. Sa halimbawa sa ibaba, ipinapakita namin kung paano isama ang aming 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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

Sa ganitong paraan, hindi ka nagsasama ng anumang JavaScript na hindi mo nilalayong gamitin para sa mga bahagi tulad ng mga button, carousel, at tooltip. Kung nag-i-import ka ng mga dropdown, tooltip o popover, tiyaking ilista ang dependency ng Popper sa iyong package.jsonfile.

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

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

Autoprefixer .browserslistrc

Nakadepende ang Bootstrap sa Autoprefixer upang awtomatikong magdagdag ng mga prefix ng browser sa ilang partikular na katangian ng CSS. Ang mga prefix ay idinidikta ng aming .browserslistrcfile, na matatagpuan sa ugat ng Bootstrap repo. Ang pag-customize sa listahang ito ng mga browser at muling pag-compile sa Sass ay awtomatikong mag-aalis ng ilang CSS mula sa iyong pinagsama-samang CSS, kung mayroong mga prefix ng vendor na natatangi sa browser o bersyong iyon.

Hindi nagamit na CSS

Gusto ng tulong sa seksyong ito, mangyaring isaalang-alang ang pagbubukas ng PR. Salamat!

Bagama't wala kaming prebuilt na halimbawa para sa paggamit ng PurgeCSS sa Bootstrap, may ilang kapaki-pakinabang na artikulo at walkthrough na isinulat ng komunidad. Narito ang ilang mga opsyon:

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

Panghuli, ang artikulong ito ng CSS Tricks sa hindi nagamit na CSS ay nagpapakita kung paano gamitin ang PurgeCSS at iba pang katulad na mga tool.

I-minify at gzip

Hangga't maaari, tiyaking i-compress ang lahat ng code na ihahatid mo sa iyong mga bisita. Kung gumagamit ka ng Bootstrap dist file, subukang manatili sa mga pinaliit na bersyon (ipinahiwatig ng .min.cssat mga .min.jsextension). Kung bubuo ka ng Bootstrap mula sa pinagmulan gamit ang sarili mong build system, tiyaking ipatupad ang sarili mong mga minifier para sa HTML, CSS, at JS.

Hindi naka-block ang mga file

Bagama't mukhang sapat na ang pagpapaliit at paggamit ng compression, ang paggawa ng mga hindi naka-block na mga file ay isa ring malaking hakbang sa paggawa ng iyong site na mahusay na na-optimize at sapat na mabilis.

Kung gumagamit ka ng Lighthouse plugin sa Google Chrome, maaaring natisod ka sa FCP. Sinusukat ng sukatan ng First Contentful Paint ang oras mula nang magsimulang mag-load ang page hanggang sa kung kailan nai-render sa screen ang anumang bahagi ng content ng page.

Mapapabuti mo ang FCP sa pamamagitan ng pagpapaliban sa hindi kritikal na JavaScript o CSS. Anong ibig sabihin niyan? Simple lang, ang JavaScript o mga stylesheet na hindi kailangang naroroon sa unang pintura ng iyong pahina ay dapat markahan ng asynco mga deferkatangian.

Tinitiyak nito na ang hindi gaanong mahalagang mga mapagkukunan ay na-load sa ibang pagkakataon at hindi nakaharang sa unang pintura. Sa kabilang banda, maaaring isama ang mga kritikal na mapagkukunan bilang mga inline na script o istilo.

Kung gusto mong matuto nang higit pa tungkol dito, marami nang magagandang artikulo tungkol dito:

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

Laging gumamit ng HTTPS

Dapat na available lang ang iyong website sa mga koneksyon sa HTTPS sa produksyon. Pinapabuti ng HTTPS ang seguridad, privacy, at availability ng lahat ng site, at walang bagay na hindi sensitibo sa trapiko sa web . Ang mga hakbang upang i-configure ang iyong website upang maihatid nang eksklusibo sa HTTPS ay malawak na nag-iiba depende sa iyong arkitektura at web hosting provider, at sa gayon ay lampas sa saklaw ng mga dokumentong ito.

Dapat ding i-access ng mga site na inihahatid sa HTTPS ang lahat ng stylesheet, script, at iba pang asset sa mga koneksyon sa HTTPS. Kung hindi, magpapadala ka sa mga user ng pinaghalong aktibong nilalaman , na humahantong sa mga potensyal na kahinaan kung saan maaaring makompromiso ang isang site sa pamamagitan ng pagbabago ng dependency. Maaari itong humantong sa mga isyu sa seguridad at mga babala sa browser na ipinapakita sa mga user. Kung nakakakuha ka man ng Bootstrap mula sa isang CDN o ihahatid ito mismo, tiyaking maa-access mo lamang ito sa pamamagitan ng mga koneksyon sa HTTPS.