އޮޕްޓިމައިޒް ކުރުން

ލީން ސާސް އިމްޕޯޓް ކުރެއެވެ

@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";

ކޮމްޕޮނެންޓެއް ބޭނުން ނުކުރާނަމަ ކޮމެންޓް ކޮށްލާ ނުވަތަ މުޅިން ޑިލީޓް ކޮށްލާށެވެ. މިސާލަކަށް ކެރޮސެލް ބޭނުން ނުކުރާނަމަ، ކޮމްޕައިލް ކޮށްފައިވާ ސީއެސްއެސްގައި ކޮންމެވެސް ފައިލް ސައިޒެއް ސޭވް ކުރުމަށްޓަކައި އެ އިމްޕޯޓް ނައްތާލާށެވެ. ހަނދާނުގައި ބަހައްޓަންވީ ސާސް އިމްޕޯޓްތަކުގެ ތެރެއިން ބައެއް ޑިޕެންޑެންސީތައް ހުރުމުން ފައިލްއެއް ދޫކޮށްލަން ދަތިވެދާނެތީ އެވެ.

ލީން ޖާވާސްކްރިޕްޓް

ބޫޓްސްޓްރެޕްގެ ޖާވާސްކްރިޕްޓްގައި އަޅުގަނޑުމެންގެ ޕްރައިމަރީ ޑިސްޓް ފައިލްތަކުގައިވާ ކޮންމެ ކޮމްޕޮނެންޓެއް ( bootstrap.jsއަދި bootstrap.min.js)، އަދި އަޅުގަނޑުމެންގެ ޕްރައިމަރީ ޑިޕެންޑެންސީ (ޕޮޕަރ) ވެސް އަޅުގަނޑުމެންގެ ބަންޑަލް ފައިލްތަކާއެކު ( bootstrap.bundle.jsއަދި bootstrap.bundle.min.js) ހިމެނެއެވެ. ސާސް މެދުވެރިކޮށް ކަސްޓަމައިޒް ކުރަމުންދާއިރު، ގުޅުންހުރި ޖާވާސްކްރިޕްޓް ނައްތާލުން ޔަގީން ކުރައްވާށެވެ.

މިސާލަކަށް ވެބްޕެކް، ޕާރސަލް، ނުވަތަ ވައިޓް ފަދަ އަމިއްލަ ޖާވާސްކްރިޕްޓް ބަންޑްލަރ ބޭނުން ކުރަމުންދާ ކަމަށް ގަބޫލުކޮށްފިނަމަ، އިމްޕޯޓް ކުރާނީ ހަމައެކަނި ބޭނުން ކުރަން ރާވާފައިވާ ޖާވާސްކްރިޕްޓް އެވެ. ތިރީގައިވާ މިސާލުގައި އަޅުގަނޑުމެން ދައްކާލަނީ ހަމައެކަނި އަޅުގަނޑުމެންގެ މޮޑަލް ޖާވާސްކްރިޕްޓް ހިމަނާނެ ގޮތެވެ:

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

މިގޮތަށް ބަލާއިރު، ބަޓަން، ކެރޮސެލް، އަދި ޓޫލްޓިޕްސް ފަދަ ކޮމްޕޯނެންޓްތަކަށް ބޭނުން ކުރަން ގަސްތު ނުކުރާ އެއްވެސް ޖާވާސްކްރިޕްޓެއް ހިމަނާފައެއް ނުވެއެވެ. ޑްރޮޕްޑައުންސް، ޓޫލްޓިޕްސް ނުވަތަ ޕޮޕޯވަރސް އިމްޕޯޓް ކުރައްވާނަމަ، ތިބާގެ package.jsonފައިލްގައި ޕޮޕަރ ޑިޕެންޑެންސީ ލިސްޓްކުރުން ޔަގީން ކުރައްވާށެވެ.

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

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

އޮޓޯޕްރިފިކްސަރ .browserslistrc

ބޫޓްސްޓްރަޕް ޑިޕެންޑް ކުރަނީ ވަކި ސީއެސްއެސް ޕްރޮޕަޓީތަކަށް އޮޓޮމެޓިކުން ބްރައުޒާ ޕްރިފިކްސް އިތުރުކުރުމަށް އޮޓޯޕްރިފިކްސަރަށެވެ. ޕްރިފިކްސްތައް ޑިކްޓޭޓް ކުރަނީ އަޅުގަނޑުމެންގެ .browserslistrcފައިލް އިން، ބޫޓްސްޓްރެޕް ރެޕޯގެ ރޫޓުން ފެންނަ ފައިލުންނެވެ. މި ބްރައުޒާތަކުގެ ލިސްޓް ކަސްޓަމައިޒްކޮށް، ސާސް އަލުން ކޮމްޕައިލް ކުރުމުން، އެ ބްރައުޒާ ނުވަތަ ވަރޝަނަށް ޚާއްޞަ ވެންޑަރ ޕްރިފިކްސްތައް ހުރިނަމަ، ކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސް އިން ބައެއް ސީއެސްއެސްތައް އޮޓޮމެޓިކުން ނައްތާލެވޭނެއެވެ.

ބޭނުން ނުކުރާ ސީއެސްއެސް

މި ބައިގައި އެހީތެރިކަން ބޭނުންވާނަމަ ޕީއާރު ހުޅުވުމަށް ވިސްނާލައްވާށެވެ. ޝުކުރިއްޔާ!

ބޫޓްސްޓްރެޕް އާއި އެކު ޕާޖްސީއެސްއެސް ބޭނުން ކުރުމަށް ޕްރީބިލްޓް މިސާލެއް އަޅުގަނޑުމެންގެ އަތުގައި ނެތް ނަމަވެސް ، ކޮމިއުނިޓީން ލިޔެފައިވާ އެހީތެރި ބައެއް ލިޔުންތަކާއި ވޯކްތްރޫތައް އެބަހުއްޓެވެ. މިއީ ބައެއް ގޮތްތަކެވެ.

• https://medium.com/dwarves-foundation/ބޫޓްސްޓްރެޕް އިން-ބޭނުން ނުކުރާ-ސީއެސްއެސް-ސްޓައިލްތައް-ނައްތާލަން-ޕަރޖެކްސް-88395a2c5772
• https://lukelowrey.com/ބޫޓްސްޓްރެޕް-ނުވަތަ-އެހެން-ފްރޭމްވޯކްސް-އިން-އޮޓޮމެޓިކުން-ރިމޫވްއުސްޑް-ސީއެސްއެސް/

އެންމެ ފަހުން ބޭނުން ނުކުރާ ސީއެސްއެސްއާ ބެހޭ މި ސީއެސްއެސް ޓްރިކްސް ލިޔުމުގައި ޕާޖްސީއެސްއެސް އާއި މިފަދަ އެހެން ޓޫލްތައް ބޭނުންކުރާނެ ގޮތް ދައްކާލާފައިވެއެވެ.

މިނިފައި އާއި ޖީޒިޕް ކުރާށެވެ

ވީހާވެސް ގިނައިން ޒިޔާރަތްކުރާ ފަރާތްތަކަށް ފޯރުކޮށްދޭ ހުރިހާ ކޯޑެއް ކޮމްޕްރެސް ކުރުން ޔަގީން ކުރައްވާށެވެ. ބޫޓްސްޓްރެޕް ޑިސްޓް ފައިލްތައް ބޭނުންކުރާނަމަ، މިނިފައިޑް ވަރޝަންތަކުގައި ( .min.cssއަދި .min.jsއެކްސްޓެންޝަންތަކުން ދައްކާފައިވާ) ގައި ހިފަހައްޓަން މަސައްކަތް ކުރާށެވެ. އަމިއްލަ ބިލްޑް ސިސްޓަމަކާއެކު ސޯސް އިން ބޫޓްސްޓްރަޕް ބިލްޑް ކުރަމުންދާނަމަ، އެޗްޓީއެމްއެލް، ސީއެސްއެސް، އަދި ޖޭއެސް އަށް އަމިއްލައަށް މިނިފައިއަރސް ތަންފީޒުކުރުން ޔަގީން ކުރައްވާށެވެ.

ބްލޮކް ނުކުރާ ފައިލްތައް

ކޮމްޕްރެޝަން މިނިފައިކޮށް ބޭނުންކުރުމަކީ ފުދޭވަރުގެ ކަމެއް ކަމުގައި ހީވިޔަސް، ތިމާގެ ފައިލްތައް ބްލޮކް ނުކުރާ ފައިލްތަކަށް ހެދުމަކީ ވެސް ސައިޓް ރަނގަޅަށް އޮޕްޓިމައިޒްކޮށް ފުދޭވަރަކަށް އަވަސް ކުރުމަށް އެޅޭ ވަރަށް ބޮޑު ފިޔަވަޅެކެވެ.

ގޫގުލް ކްރޯމްގައި ލައިޓްހައުސް ޕްލަގިންއެއް ބޭނުން ކުރަމުންދާނަމަ އެފްސީޕީގެ ސަބަބުން ވެއްޓިފައި ހުރެދާނެ އެވެ. ފުރަތަމަ ކޮންޓެންޓްފުލް ޕެއިންޓް މެޓްރިކް އިން މިންކުރަނީ ޕޭޖް ލޯޑްވާން ފެށޭ ވަގުތުން ފެށިގެން ޕޭޖްގެ ކޮންޓެންޓްގެ އެއްވެސް ބައެއް ސްކްރީނުގައި ރެންޑަރ ކުރާ ވަގުތާ ހަމައަށެވެ.

އެފްސީޕީ ރަނގަޅު ކުރެވޭނީ ނޮން ކްރިޓިކަލް ޖާވާސްކްރިޕްޓް ނުވަތަ ސީއެސްއެސް ޑިފެއާކޮށްގެންނެވެ. އޭގެ މާނައަކީ ކޮބައި ހެއްޔެވެ؟ ފަސޭހައިން ބުނާނަމަ، ތިބާގެ ޞަފްޙާގެ ފުރަތަމަ ކުލަ ޖަހާފައި ހުންނަން ނުޖެހޭ ޖާވާސްކްރިޕްޓް ނުވަތަ ސްޓައިލްޝީޓްތަކުގައި asyncނުވަތަ deferއެޓްރިބިއުޓްސް ޖަހާފައި ހުންނަންވާނެއެވެ.

މިއީ މުހިންމުކަން ކުޑަ ވަސީލަތްތައް ފަހުން ލޯޑްކޮށް ފުރަތަމަ ކުލަ ބްލޮކް ނުކުރެވޭނެކަން ކަށަވަރުކޮށްދޭ ކަމެކެވެ. އަނެއްކޮޅުން ކްރިޓިކަލް ރިސޯސްތައް އިންލައިން ސްކްރިޕްޓް ނުވަތަ ސްޓައިލްތަކުގެ ގޮތުގައި ހިމަނާލެވިދާނެއެވެ.

މިކަމާ ބެހޭގޮތުން އިތުރަށް ދަސްކުރަން ބޭނުންނަމަ، މިކަމާ ބެހޭގޮތުން މިހާރުވެސް ވަރަށް ގިނަ މޮޅު ލިޔުންތައް އެބަހުއްޓެވެ:

• https://web.dev/ރެންޑަރ-ބްލޮކިންގ-ރިސޯސަސް/
• https://web.dev/ޑިފަރ-ނޮން-ކްރިޓިކަލް-ސީއެސްއެސް/

އަބަދުވެސް އެޗްޓީޓީޕީއެސް ބޭނުން ކުރާށެވެ

ޕްރޮޑަކްޝަންގައި ތިޔަ ވެބްސައިޓް ލިބެންވާނީ ހަމައެކަނި އެޗްޓީޓީޕީއެސް ކަނެކްޝަންތަކުގެ ޒަރީއާއިންނެވެ. އެޗްޓީޓީޕީއެސް އިން ހުރިހާ ސައިޓްތަކެއްގެ ރައްކާތެރިކަމާއި، ޕްރައިވެސީއާއި، ލިބޭނެ ގޮތް ރަނގަޅުކޮށްދޭއިރު، ނާޒުކު ނޫން ވެބް ޓްރެފިކް ކިޔާ އެއްޗެއް ނެތެވެ . ހަމައެކަނި އެޗްޓީޓީޕީއެސް މެދުވެރިކޮށް ޚިދުމަތް ދިނުމަށް ވެބްސައިޓް ކޮންފިގްރޭޓް ކުރުމަށް އަޅަންޖެހޭ ފިޔަވަޅުތައް ތިބާގެ އަރކިޓެކްޗަރ އާއި ވެބް ހޯސްޓިންގ ޕްރޮވައިޑަރަށް ބަލާފައި ވަރަށް ބޮޑަށް ތަފާތުވެ، މިހެންވުމުން މި ޑޮކްސްތަކުގެ ދާއިރާއިން ބޭރުގައި އެޅޭ ފިޔަވަޅުތައް އެޅޭނެއެވެ.

އަދި އެޗްޓީޓީޕީއެސް މެދުވެރިކޮށް ހިދުމަތްދޭ ސައިޓްތަކުން އެޗްޓީޓީޕީއެސް ކަނެކްޝަންތަކުގެ ޒަރީއާއިން ހުރިހާ ސްޓައިލްޝީޓްތަކާއި ސްކްރިޕްޓްތަކާއި އެހެނިހެން އެސެޓްތަކަށް ވެސް އެކްސެސް ކުރަން ޖެހެ އެވެ. އެހެން ނޫންނަމަ، ތިބާ ފޮނުވާނީ ޔޫޒަރުންނަށް މިކްސްޑް އެކްޓިވް ކޮންޓެންޓް , ޑިޕެންޑެންސީއެއް ބަދަލުކޮށްގެން ސައިޓެއް ކޮމްޕްރޮމައިޒް ކުރެވިދާނެ ޕޮޓެންޝަލް ވަލްނަރެބިލިޓީސް އަށް މަގުފަހިކޮށްދެއެވެ. މިކަމުގެ ސަބަބުން ސެކިއުރިޓީ މައްސަލަތަކާއި އިން-ބްރައުޒާ އިންޒާރުތައް ޔޫޒަރުންނަށް ދައްކާލެވޭނެ އެވެ. ސީޑީއެން އިން ބޫޓްސްޓްރެޕް ހޯދަމުން ދިޔަޔަސް ނުވަތަ އަމިއްލައަށް ސާވިސް ކުރިޔަސް، އެއަށް އެކްސެސް ކުރެވޭނީ ހަމައެކަނި އެޗްޓީޓީޕީއެސް ކަނެކްޝަންތަކުންކަން ޔަގީން ކުރަން ޖެހެ އެވެ.