Konzani

Lean Sass yochokera kunja

Mukamagwiritsa ntchito Sass pamapaipi anu, onetsetsani kuti mwakulitsa Bootstrap pongoyika @importzinthu zomwe mukufuna. Kukhathamiritsa kwanu kwakukulu kudzachokera ku Layout & Componentsgawo lathu la 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";

Ngati simukugwiritsa ntchito chinthu, perekani ndemanga kapena chichotseni chonse. Mwachitsanzo, ngati simukugwiritsa ntchito carousel, chotsani kulowetsako kuti musunge kukula kwa fayilo mu CSS yanu yopangidwa. Kumbukirani kuti pali zinthu zina zomwe zimadalira kuchokera ku Sass zomwe zingapangitse kuti zikhale zovuta kuchotsa fayilo.

Tsatirani JavaScript

JavaScript ya Bootstrap imaphatikizapo chigawo chilichonse m'mafayilo athu oyambira ( bootstrap.jsndi bootstrap.min.js), komanso kudalira kwathu (Popper) ndi mafayilo athu ( bootstrap.bundle.jsndi bootstrap.bundle.min.js). Pamene mukukonzekera kudzera pa Sass, onetsetsani kuti mwachotsa JavaScript.

Mwachitsanzo, poganiza kuti mukugwiritsa ntchito JavaScript bundler yanu ngati Webpack kapena Rollup, mungangolowetsa JavaScript yomwe mukufuna kugwiritsa ntchito. Muchitsanzo chomwe chili pansipa, tikuwonetsa momwe mungaphatikizire JavaScript yathu:

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

Mwanjira iyi, simukuphatikiza JavaScript yomwe simukufuna kuigwiritsa ntchito pazinthu monga mabatani, ma carousels, ndi zida. Ngati mukulowetsa zotsitsa, zida kapena ma popover, onetsetsani kuti mwalemba kudalira kwa Popper mufayilo yanu package.json.

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

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

Autoprefixer .browserslistrc

Bootstrap imadalira Autoprefixer kuti ingowonjezera ma prefixes asakatuli kuzinthu zina za CSS. Ma prefixes amawunikidwa ndi .browserslistrcfayilo yathu, yomwe imapezeka muzu wa Bootstrap repo. Kukonza mndandanda wa asakatuliwa ndikubwezeretsanso Sass kudzachotsa CSS ina kuchokera ku CSS yanu yomwe mwapanga, ngati pali ma prefixes amalonda apadera a msakatuliyo kapena mtunduwo.

CSS yosagwiritsidwa ntchito

Thandizo lofunidwa ndi gawoli, chonde ganizirani kutsegula PR. Zikomo!

Ngakhale tilibe chitsanzo chomangidwiratu chogwiritsa ntchito PurgeCSS ndi Bootstrap, pali zolemba zothandiza ndi njira zomwe anthu ammudzi adalemba. Nazi zina zomwe mungachite:

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

Pomaliza, nkhaniyi ya CSS Tricks pa CSS yosagwiritsidwa ntchito ikuwonetsa momwe mungagwiritsire ntchito PurgeCSS ndi zida zina zofananira.

Minify ndi gzip

Ngati n'kotheka, onetsetsani kuti mwatsitsa ma code onse omwe mumapereka kwa alendo anu. Ngati mukugwiritsa ntchito mafayilo a Bootstrap dist, yesani kumamatira kumitundu yocheperako (yomwe ikuwonetsedwa ndi .min.csszowonjezera .min.js). Ngati mukupanga Bootstrap kuchokera kugwero ndi makina anu omanga, onetsetsani kuti mukukhazikitsa ma minifiers anu a HTML, CSS, ndi JS.

Mafayilo osatsekereza

Ngakhale kuchepetsa ndi kugwiritsa ntchito kukanikiza kungawoneke ngati kokwanira, kupanga mafayilo anu kukhala osatsekeka ndi gawo lalikulu pakupangitsa tsamba lanu kukhala lokonzedwa bwino komanso mwachangu mokwanira.

Ngati mukugwiritsa ntchito pulogalamu yowonjezera ya Lighthouse mu Google Chrome, mwina mwapunthwa ndi FCP. Metric Yoyamba Yokhala Yokhutiritsa imayesa nthawi kuyambira pomwe tsamba liyamba kutsitsa mpaka pomwe gawo lililonse latsambalo likuwonetsedwa pazenera.

Mutha kusintha FCP poletsa JavaScript kapena CSS yosafunikira. Zimatanthauza chiyani? Mwachidule, JavaScript kapena masitayelo omwe safunikira kukhalapo pa penti yoyamba yatsamba lanu akuyenera kukhala ndi chizindikiro asynckapena defermawonekedwe.

Izi zimatsimikizira kuti zinthu zosafunika kwenikweni zimakwezedwa pambuyo pake osati kutsekereza utoto woyamba. Kumbali inayi, zida zofunikira zitha kuphatikizidwa ngati zolemba zamkati kapena masitayelo.

Ngati mukufuna kudziwa zambiri za izi, pali kale nkhani zambiri zabwino za izi:

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

Gwiritsani ntchito HTTPS nthawi zonse

Tsamba lanu liyenera kupezeka pamalumikizidwe a HTTPS popanga. HTTPS imathandizira chitetezo, zinsinsi, ndi kupezeka kwa masamba onse, ndipo palibe chinthu ngati kuchuluka kwapaintaneti komwe sikukhudzidwa . Njira zosinthira tsamba lanu kuti liziperekedwa pa HTTPS zimasiyana mosiyanasiyana kutengera kapangidwe kanu ndi omwe amapereka mawebusayiti, motero sakupitirira malire a zolembazi.

Masamba omwe amatumizidwa pa HTTPS akuyeneranso kupeza masitayelo onse, zolemba, ndi zinthu zina pamalumikizidwe a HTTPS. Kupanda kutero, mukhala mukutumizira ogwiritsa ntchito zosakanikirana , zomwe zimabweretsa zovuta zomwe tsamba likhoza kusokonezedwa posintha kudalira. Izi zitha kubweretsa zovuta zachitetezo komanso machenjezo a msakatuli omwe amawonetsedwa kwa ogwiritsa ntchito. Kaya mukupeza Bootstrap kuchokera ku CDN kapena mukutumikira nokha, onetsetsani kuti mumangoyipeza kudzera pa HTTPS.