አመቻች

ምርጡን ተሞክሮ ለማቅረብ እና ይበልጥ አስፈላጊ በሆኑ ስራዎች ላይ እንዲያተኩሩ ፕሮጄክቶችዎ ዘንበል፣ ምላሽ ሰጪ እና ሊቆዩ የሚችሉ ያድርጓቸው።

በዚህ ገጽ ላይ

Lean Sass ማስመጣቶች

በንብረት ቧንቧ መስመርዎ ውስጥ Sassን ሲጠቀሙ የሚፈልጓቸውን ክፍሎች ብቻ በመጠቀም ቡትስትራፕን ማሳደግዎን ያረጋግጡ @import። Layout & Componentsየእርስዎ ትልቁ ማትባቶች ከኛ ክፍል የመጡ ሊሆኑ ይችላሉ 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";

አንድ አካል እየተጠቀሙ ካልሆኑ አስተያየት ይስጡት ወይም ሙሉ በሙሉ ይሰርዙት። ለምሳሌ፣ ካሮሴልን እየተጠቀሙ ካልሆኑ፣ በእርስዎ በተጠናቀረ CSS ውስጥ የተወሰነ የፋይል መጠን ለማስቀመጥ ያንን ማስመጣት ያስወግዱት። በ Sass ማስመጣቶች ላይ ፋይልን ማስቀረት የበለጠ አስቸጋሪ ሊያደርጉ የሚችሉ አንዳንድ ጥገኞች እንዳሉ ያስታውሱ።

ዘንበል ጃቫስክሪፕት

የቡትስትራፕ ጃቫ ስክሪፕት በዋና ዲስት ፋይሎቻችን ውስጥ ያሉትን ሁሉንም አካላት ( bootstrap.jsእና bootstrap.min.js) እና እንዲሁም የእኛ ዋና ጥገኝነት (ፖፐር) ከጥቅል ፋይሎቻችን ( bootstrap.bundle.jsእና bootstrap.bundle.min.js) ጋር ያካትታል። በ Sass በኩል በማበጀት ላይ እያሉ፣ ተዛማጅ ጃቫስክሪፕትን ማስወገድዎን ያረጋግጡ።

ለምሳሌ የእራስዎን የጃቫ ስክሪፕት ጥቅል እንደ ዌብፓክ፣ ፓርሴል ወይም ቪት እየተጠቀምክ ከሆነ ለመጠቀም ያሰብከውን ጃቫስክሪፕት ብቻ ነው የምታመጣው። ከታች ባለው ምሳሌ ላይ የእኛን ሞዳል ጃቫ ስክሪፕት እንዴት ማካተት እንዳለብን እናሳያለን፡

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

በዚህ መንገድ፣ እንደ አዝራሮች፣ ካሮሴሎች እና የመሳሪያ ምክሮች ላሉ ክፍሎች ለመጠቀም ያልፈለጉትን ማንኛውንም ጃቫ ስክሪፕት አያካትቱም። ተቆልቋይ፣ Tooltips ወይም popovers እያስመጡ ከሆነ በፋይልዎ ውስጥ ያለውን የፖፐር ጥገኝነት መዘርዘርዎን ያረጋግጡ package.json።

ነባሪ ወደ ውጭ መላክ

ፋይሎች በነባሪ ወደ ውጭ መላክbootstrap/js/dist ይጠቀማሉ ፣ ስለዚህ ከመካከላቸው አንዱን ለመጠቀም ከፈለጉ የሚከተሉትን ማድረግ አለብዎት።

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

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

ራስ-ቅድመ ቅጥያ .browserslistrc

የአሳሽ ቅድመ ቅጥያዎችን ወደ አንዳንድ የሲኤስኤስ ባህሪያት ለመጨመር ቡትስትራፕ በራስ-ሰር ቅድመ ቅጥያ ላይ ይወሰናል። ቅድመ-ቅጥያዎች .browserslistrcበ Bootstrap repo ስር በሚገኙት በእኛ ፋይል ነው የታዘዙት። ይህን የአሳሾች ዝርዝር ማበጀት እና Sassን እንደገና ማጠናቀር ለዚያ አሳሽ ወይም ስሪት ልዩ የሆኑ የአቅራቢዎች ቅድመ ቅጥያዎች ካሉ የተወሰኑ CSSን ከተቀናበረው CSSዎ ላይ በራስ ሰር ያስወግዳል።

ጥቅም ላይ ያልዋለ CSS

በዚህ ክፍል የሚፈለግ እገዛ፣ እባክዎን PR ለመክፈት ያስቡበት። አመሰግናለሁ!

PurgeCSS ን ከ Bootstrap ጋር ለመጠቀም አስቀድሞ የተሰራ ምሳሌ ባይኖረንም ፣ ማህበረሰቡ የጻፋቸው አንዳንድ አጋዥ ጽሑፎች እና አካሄዶች አሉ። አንዳንድ አማራጮች እነኚሁና፡

በመጨረሻ፣ ይህ የ CSS Tricks ጽሁፍ ባልተጠቀመበት CSS ላይ PurgeCSS እና ሌሎች ተመሳሳይ መሳሪያዎችን እንዴት መጠቀም እንደሚቻል ያሳያል።

አሳንስ እና gzip

በሚቻልበት ጊዜ ሁሉ ለጎብኚዎችዎ የሚያቀርቡትን ኮድ መጭመቅዎን ያረጋግጡ። የBootstrap ዲስክ ፋይሎችን እየተጠቀሙ ከሆነ፣ ከተቀነሱት ስሪቶች (በእና ቅጥያዎች የተጠቆሙ) .min.cssላይ ለመቆየት ይሞክሩ። .min.jsቡትስትራፕን ከምንጩ በእራስዎ የግንባታ ስርዓት እየገነቡ ከሆነ ለኤችቲኤምኤል፣ ለሲኤስኤስ እና ለጄኤስ የእራስዎን ሚኒፊየሮች መተግበርዎን ያረጋግጡ።

የማይታገዱ ፋይሎች

መጭመቅን መቀነስ እና መጠቀም በቂ መስሎ ቢታይም ፋይሎችዎን እንዳይታገዱ ማድረግ ጣቢያዎን በሚገባ የተመቻቸ እና ፈጣን ለማድረግ ትልቅ እርምጃ ነው።

በጎግል ክሮም ውስጥ የ Lighthouse ፕለጊን እየተጠቀሙ ከሆነ በFCP ላይ ተሰናክለው ሊሆን ይችላል። የመጀመሪያው ይዘት ያለው የቀለም መለኪያ ገፁ መጫን ከጀመረበት ጊዜ አንስቶ ማንኛውም የገጹ ይዘት በስክሪኑ ላይ እስከተሰራበት ድረስ ያለውን ጊዜ ይለካል።

ወሳኝ ያልሆኑ ጃቫስክሪፕት ወይም ሲኤስኤስን በማዘግየት FCP ማሻሻል ይችላሉ። ያ ማለት ምን ማለት ነው? በቃ፣ በገጽህ የመጀመሪያ ቀለም ላይ መገኘት የማያስፈልጋቸው ጃቫስክሪፕት ወይም የቅጥ ሉሆች በባህሪያት ወይም በባህሪያት ምልክት ሊደረግባቸው asyncይገባል defer።

ይህ በጣም አስፈላጊ ያልሆኑ ሀብቶች በኋላ ላይ እንዲጫኑ እና የመጀመሪያውን ቀለም እንዳይከለክሉ ያረጋግጣል. በሌላ በኩል፣ ወሳኝ ግብአቶች እንደ የመስመር ውስጥ ስክሪፕቶች ወይም ቅጦች ሊካተቱ ይችላሉ።

ስለዚህ ጉዳይ የበለጠ ለማወቅ ከፈለጉ ስለ እሱ ብዙ ጥሩ መጣጥፎች ቀድሞውኑ አሉ።

ሁልጊዜ HTTPS ተጠቀም

የእርስዎ ድር ጣቢያ በምርት ላይ በኤችቲቲፒኤስ ግንኙነቶች ብቻ መገኘት አለበት። HTTPS የሁሉንም ጣቢያዎች ደህንነት፣ ግላዊነት እና ተገኝነት ያሻሽላል፣ እና ምንም የማይነካ የድር ትራፊክ የሚባል ነገር የለም ። ድር ጣቢያዎን በኤችቲቲፒኤስ ብቻ እንዲቀርብ የማዋቀር እርምጃዎች በእርስዎ አርክቴክቸር እና በድር ማስተናገጃ አቅራቢ ላይ ተመስርተው ይለያያሉ፣ እና ስለዚህ ከእነዚህ ሰነዶች ወሰን በላይ ናቸው።

በኤችቲቲፒኤስ የሚቀርቡ ጣቢያዎች ሁሉንም የቅጥ ሉሆች፣ ስክሪፕቶች እና ሌሎች ንብረቶችን በኤችቲቲፒኤስ ግንኙነቶች መድረስ አለባቸው። ያለበለዚያ ለተጠቃሚዎች ድብልቅ ገባሪ ይዘትን ትልካለህ ፣ ይህም አንድ ጣቢያ ጥገኝነትን በመቀየር ሊጎዳ ወደሚችል ተጋላጭነቶች ይመራል። ይህ ወደ የደህንነት ችግሮች እና የአሳሽ ማስጠንቀቂያዎች ለተጠቃሚዎች እንዲታዩ ያደርጋል። Bootstrapን ከሲዲኤን እያገኙም ይሁኑ እራስዎ የሚያገለግሉት በ HTTPS ግንኙነቶች ብቻ መሆኑን ያረጋግጡ።