ප්‍රශස්ත කරන්න

ලීන් සාස් ආනයනය

@importඔබේ වත්කම් නල මාර්ගයේ Sass භාවිතා කරන විට, ඔබට අවශ්‍ය සංරචක පමණක් භාවිතා කිරීමෙන් Bootstrap ප්‍රශස්ත කිරීමට වග බලා ගන්න . Layout & Componentsඔබගේ විශාලතම ප්‍රශස්තිකරණය බොහෝ විට අපගේ අංශයෙන් පැමිණෙනු ඇත 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";

ඔබ සංරචකයක් භාවිතා නොකරන්නේ නම්, එය අදහස් දක්වන්න හෝ සම්පූර්ණයෙන්ම මකන්න. උදාහරණයක් ලෙස, ඔබ කැරොසල් භාවිතා නොකරන්නේ නම්, ඔබේ සම්පාදනය කළ CSS හි යම් ගොනු ප්‍රමාණයක් සුරැකීමට එම ආයාත ඉවත් කරන්න. මතක තබා ගන්න Sass ආයාත හරහා සමහර පරායත්තතා ඇති අතර එමඟින් ගොනුවක් මඟ හැරීම වඩාත් අපහසු වේ.

Lean JavaScript

Bootstrap හි JavaScript අපගේ ප්‍රාථමික dist ගොනු ( bootstrap.jsසහ ) හි ඇති සෑම අංගයක්ම සහ අපගේ බණ්ඩල් ගොනු ( සහ ) bootstrap.min.jsසමඟ අපගේ මූලික පරායත්තතාව (Popper) පවා ඇතුළත් වේ . ඔබ Sass හරහා අභිරුචිකරණය කරන අතරතුර, අදාළ JavaScript ඉවත් කිරීමට වග බලා ගන්න.bootstrap.bundle.jsbootstrap.bundle.min.js

උදාහරණයක් ලෙස, ඔබ Webpack හෝ Rollup වැනි ඔබේම JavaScript බණ්ඩලයක් භාවිතා කරන්නේ යැයි උපකල්පනය කළහොත්, ඔබ ආනයනය කරන්නේ ඔබ භාවිතා කිරීමට අදහස් කරන JavaScript පමණි. පහත උදාහරණයේ දී, අපි අපගේ මාදිලියේ 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';

මේ ආකාරයට, ඔබ බොත්තම්, කැරොසල් සහ මෙවලම් ඉඟි වැනි සංරචක සඳහා භාවිතා කිරීමට අදහස් නොකරන ජාවාස්ක්‍රිප්ට් කිසිවක් ඇතුළත් නොකරයි. ඔබ පතනයන්, මෙවලම් ඉඟි හෝ popovers ආයාත කරන්නේ නම්, ඔබේ package.jsonගොනුවේ Popper පරායත්තතාවය ලැයිස්තුගත කිරීමට වග බලා ගන්න.

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

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

Autoprefixer .browserslistrc

ඇතැම් CSS ගුණාංගවලට බ්‍රවුසර උපසර්ග ස්වයංක්‍රීයව එක් කිරීමට Bootstrap Autoprefixer මත රඳා පවතී. Bootstrap repo හි මූලයේ ඇති අපගේ .browserslistrcගොනුව මගින් උපසර්ග නියම කරනු ලැබේ. මෙම බ්‍රව්සර් ලැයිස්තුව අභිරුචිකරණය කිරීම සහ Sass නැවත සම්පාදනය කිරීම එම බ්‍රවුසරයට හෝ අනුවාදයට අනන්‍ය වූ විකුණුම් උපසර්ග තිබේ නම්, ඔබේ සම්පාදනය කළ CSS වෙතින් සමහර CSS ස්වයංක්‍රීයව ඉවත් කරනු ඇත.

භාවිතයට නොගත් CSS

මෙම කොටස සමඟ උදව් අවශ්‍යයි, කරුණාකර PR එකක් විවෘත කිරීම සලකා බලන්න. ස්තුතියි!

බූට්ස්ට්‍රැප් සමඟ PurgeCSS භාවිතා කිරීම සඳහා අපට පූර්වයෙන් ගොඩනඟන ලද උදාහරණයක් නොමැති අතර, ප්‍රජාව විසින් ලියා ඇති ප්‍රයෝජනවත් ලිපි සහ ඇවිදීමේ ක්‍රම තිබේ. මෙන්න විකල්ප කිහිපයක්:

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

අවසාන වශයෙන්, භාවිතා නොකළ CSS පිළිබඳ මෙම CSS උපක්‍රම ලිපිය PurgeCSS සහ වෙනත් සමාන මෙවලම් භාවිතා කරන ආකාරය පෙන්වයි.

Minify සහ gzip

හැකි සෑම විටම, ඔබ ඔබේ අමුත්තන්ට සපයන සියලුම කේතය සම්පීඩනය කිරීමට වග බලා ගන්න. ඔබ Bootstrap dist ගොනු භාවිතා කරන්නේ නම්, minified අනුවාදවලට ඇලී සිටීමට උත්සාහ කරන්න (මෙම .min.cssසහ .min.jsදිගු වලින් දක්වා ඇත). ඔබ ඔබේම ගොඩනැගීමේ පද්ධතිය සමඟ මූලාශ්‍රයෙන් Bootstrap ගොඩනඟන්නේ නම්, HTML, CSS, සහ JS සඳහා ඔබේම minifiers ක්‍රියාත්මක කිරීමට වග බලා ගන්න.

අවහිර නොවන ගොනු

සංකෝචනය කුඩා කිරීම සහ භාවිතා කිරීම ප්‍රමාණවත් සේ පෙනෙන අතර, ඔබේ ගොනු අවහිර නොවන ඒවා බවට පත් කිරීම ඔබේ වෙබ් අඩවිය හොඳින් ප්‍රශස්ත කිරීමට සහ ප්‍රමාණවත් තරම් වේගවත් කිරීමට විශාල පියවරකි.

ඔබ Google Chrome හි ප්‍රදීපාගාර ප්ලගිනයක් භාවිතා කරන්නේ නම්, ඔබ FCP මත පැකිලෙන්නට ඇත. පළමු අන්තර්ගත තීන්ත ප්‍රමිතිකය පිටුව පූරණය වීමට පටන් ගන්නා වේලාවේ සිට පිටුවේ අන්තර්ගතයේ කිසියම් කොටසක් තිරය මත විදැහුම් කරන කාලය දක්වා මනිනු ලබයි.

ඔබට විවේචනාත්මක නොවන JavaScript හෝ CSS කල් දැමීමෙන් FCP වැඩිදියුණු කළ හැක. ඒ කියන්නේ මොකද්ද? සරළව, ඔබේ පිටුවේ පළමු තීන්තයේ තිබීමට අවශ්‍ය නොවන JavaScript හෝ මෝස්තර පත්‍ර asyncහෝ deferගුණාංගවලින් සලකුණු කළ යුතුය.

මෙය අඩු වැදගත් සම්පත් පසුව පටවනු ලබන අතර පළමු තීන්ත අවහිර නොකරන බව සහතික කරයි. අනෙක් අතට, තීරණාත්මක සම්පත් පේළිගත ස්ක්‍රිප්ට් හෝ මෝස්තර ලෙස ඇතුළත් කළ හැක.

ඔබට මේ ගැන වැඩි විස්තර දැන ගැනීමට අවශ්‍ය නම්, ඒ ගැන දැනටමත් හොඳ ලිපි රාශියක් ඇත:

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

සෑම විටම HTTPS භාවිතා කරන්න

ඔබේ වෙබ් අඩවිය ලබා ගත හැක්කේ නිෂ්පාදනයේදී HTTPS සම්බන්ධතා හරහා පමණි. HTTPS සියලු වෙබ් අඩවි වල ආරක්ෂාව, පෞද්ගලිකත්වය සහ ලබා ගත හැකි බව වැඩි දියුණු කරන අතර, සංවේදී නොවන වෙබ් ගමනාගමනය වැනි දෙයක් නොමැත . ඔබේ වෙබ් අඩවිය HTTPS හරහා පමණක් සේවය කිරීම සඳහා වින්‍යාස කිරීමේ පියවර ඔබේ ගෘහ නිර්මාණ ශිල්පය සහ වෙබ් සත්කාරක සපයන්නා මත පදනම්ව පුළුල් ලෙස වෙනස් වන අතර එමඟින් මෙම ලේඛනවල විෂය පථයෙන් ඔබ්බට වේ.

HTTPS හරහා සේවා සපයන අඩවි ද HTTPS සම්බන්ධතා හරහා සියලුම මෝස්තර පත්‍ර, ස්ක්‍රිප්ට් සහ අනෙකුත් වත්කම් වෙත ප්‍රවේශ විය යුතුය. එසේ නොමැතිනම්, ඔබ පරිශීලකයින්ට මිශ්‍ර සක්‍රිය අන්තර්ගතයක් යවනු ඇත, එය යැපීම වෙනස් කිරීමෙන් වෙබ් අඩවියක් අවදානමට ලක්විය හැකි අවදානම් වලට තුඩු දෙයි. මෙය ආරක්ෂක ගැටළු වලට තුඩු දිය හැකි අතර පරිශීලකයින්ට බ්‍රවුසරයේ අනතුරු ඇඟවීම් පෙන්වයි. ඔබ සීඩීඑන් එකකින් බූට්ස්ට්‍රැප් ලබා ගන්නේද නැතහොත් එය ඔබටම සේවය කරන්නේද, ඔබ එයට ප්‍රවේශ වන්නේ HTTPS සම්බන්ධතා හරහා පමණක් බව සහතික කර ගන්න.