باشترکردن

پڕۆژەکانت بە لاواز و وەڵامدەرەوە و پارێزگاری لێبگرە بۆ ئەوەی بتوانیت باشترین ئەزموون پێشکەش بکەیت و سەرنجت لەسەر کارە گرنگترەکان بێت.

لەم پەیجەدا

هاوردەکردنی لین ساس

لە کاتی بەکارهێنانی Sass لە بۆری سەروەت و سامانەکەتدا، دڵنیابە کە Bootstrap باشتر دەکەیت بە تەنها @importوەرگرتنی ئەو پێکهاتانەی کە پێویستت پێیانە. گەورەترین باشترکردنەکانت بە ئەگەرێکی زۆرەوە لە 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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

ئەگەر پێکهاتەیەک بەکارناهێنیت، کۆمێنت بکە یان بە تەواوی بیسڕەوە. بۆ نموونە ئەگەر کارۆسێلەکە بەکارناهێنیت، ئەو هاوردەکردنە لابەرە بۆ ئەوەی هەندێک قەبارەی پەڕگە لە CSS ی کۆکراوەتدا هەڵبگریت. لەبیرت بێت هەندێک وابەستەیی لە سەرانسەری هاوردەکردنی ساسدا هەیە کە ڕەنگە نەهێشتنی پەڕگەیەک قورستر بکات.

جاڤاسکڕێپت بەکاربهێنە

جاڤاسکڕێپتی بووتستراپ هەموو پێکهاتەیەک لە فایلە سەرەکییەکانی dist ی ئێمەدا لەخۆدەگرێت ( bootstrap.jsو bootstrap.min.js)، و تەنانەت وابەستەیی سەرەکیمان (Popper) لەگەڵ فایلە باندڵەکانمان ( bootstrap.bundle.jsو bootstrap.bundle.min.js). لە کاتێکدا کە تۆ لە ڕێگەی Sass خۆکارانە دەکەیت، دڵنیابە کە جاڤاسکڕێپتی پەیوەندیدار لا دەبەیت.

بۆ نموونە، بەگریمانەیەک کە تۆ باندلەری جاڤاسکڕێپتی خۆت وەک Webpack یان Rollup بەکاردەهێنیت، تەنها ئەو جاڤاسکڕێپتە هاوردە دەکەیت کە پلانت هەیە بەکاری بهێنیت. لەم نموونەیەی خوارەوەدا، ئێمە نیشان دەدەین کە چۆن تەنها جاڤاسکڕێپتی مۆداڵیمان بخەینە ناوەوە:

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

بەم شێوەیە، تۆ هیچ جاڤاسکڕێپتێک ناخەیتە ناوەوە کە بەنیازی بەکارهێنانی نییە بۆ پێکهاتەکانی وەک دوگمە و کارۆسێل و ئامرازەکان. ئەگەر خەریکی هاوردەکردنی درۆپداونەکان، ئامرازەکان یان پۆپۆڤەرەکان دەکەیت، دڵنیابە کە وابەستەیی Popper لە package.jsonفایلەکەتدا لیست دەکەیت.

هەناردەکردنی پێشوەختە

فایلەکانی bootstrap/js/distبەکارهێنراو هەناردەکردنی پێشوەختە , بۆیە ئەگەر بتەوێت یەکێکیان بەکاربهێنیت دەبێت ئەم کارانەی خوارەوە بکەیت:

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

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

پێشگرێکی ئۆتۆماتیکی .browserslistrc

Bootstrap پشت بە Autoprefixer دەبەستێت بۆ زیادکردنی پێشگرەکانی وێبگەڕ بە شێوەیەکی ئۆتۆماتیکی بۆ هەندێک تایبەتمەندی CSS. پێشگرەکان لەلایەن .browserslistrcفایلەکەمانەوە دیکتە دەکرێن، لە ڕەگی ڕیپۆی Bootstrap دا دەدۆزرێتەوە. خۆکارکردنی ئەم لیستەی وێبگەڕەکان و دووبارە کۆکردنەوەی ساس بە شێوەیەکی ئۆتۆماتیکی هەندێک CSS لە CSS ی کۆکراوەت لا دەبات، ئەگەر پێشگرەکانی فرۆشیار هەبن کە تایبەتن بەو وێبگەڕە یان وەشانە.

CSS بەکارنەهاتوو

یارمەتیت دەوێت لەم بەشەدا، تکایە بیر لە کردنەوەی PR بکەرەوە. سوپاس!

لە کاتێکدا ئێمە نموونەیەکی پێشوەختەمان نییە بۆ بەکارهێنانی PurgeCSS لەگەڵ Bootstrap، هەندێک بابەت و ڕێنمایی یارمەتیدەر هەن کە کۆمەڵگا نووسیویەتی. لێرەدا چەند بژاردەیەک دەخەینەڕوو:

لە کۆتاییدا ئەم بابەتە CSS Tricks لەسەر CSS بەکارنەهاتوو چۆنیەتی بەکارهێنانی PurgeCSS و ئامرازە هاوشێوەکانی تر نیشان دەدات.

بچووککردنەوە و gzip

هەرکاتێک دەتوانیت دڵنیابە هەموو ئەو کۆدانەی کە خزمەت بە سەردانکەرەکانت دەکەیت پاڵپێوەناوە. ئەگەر پەڕگەکانی Bootstrap dist بەکاردەهێنیت، هەوڵبدە پابەند بیت بە وەشانی بچووککراوەوە (بە درێژکراوەکانی .min.cssو ئاماژەی پێکراوە). .min.jsئەگەر لە سەرچاوەوە بە سیستەمی دروستکردنی خۆت Bootstrap دروست دەکەیت، دڵنیابە کە بچووککەرەوەی تایبەت بە خۆت بۆ HTML و CSS و JS جێبەجێ دەکەیت.

فایلەکانی بلۆک نەکردن

لە کاتێکدا کە بچووککردنەوە و بەکارهێنانی پاڵپێوەنان ڕەنگە بەس دەرکەوێت، کردنی فایلەکانت بە فایلەکان کە بلۆک نەکەر بن، هەروەها هەنگاوێکی گەورەیە بۆ ئەوەی ماڵپەڕەکەت بە باشی باشتر بکرێت و بە ڕادەیەکی پێویست خێرا بێت.

ئەگەر لە گووگڵ کرۆمدا پێوەکراوێکی Lighthouse بەکاردەهێنیت ، لەوانەیە تووشی FCP بووبیت. پێوەرەکەی یەکەم بۆیاخکردنی ناوەڕۆک ئەو کاتە دەپێوێت کە لاپەڕەکە دەست دەکات بە بارکردن تا کاتێک هەر بەشێک لە ناوەڕۆکی لاپەڕەکە لەسەر شاشەکە ڕەندەر دەکرێت.

دەتوانیت FCP باشتر بکەیت بە دواخستنی جاڤاسکڕێپت یان CSS ی ناگرینگ. ئەمە مانای چیە? بە سادەیی، جاڤاسکڕێپت یان ستایل شیتەکان کە پێویست ناکات لە یەکەم بۆیەی لاپەڕەکەتدا ئامادەبن، پێویستە بە asyncیان deferتایبەتمەندی نیشانە بکرێن.

ئەمەش دڵنیای دەدات لەوەی کە سەرچاوە کەمتر گرنگەکان دواتر باردەکرێن و یەکەم بۆیاخ بلۆک ناکرێت. لە لایەکی دیکەوە دەتوانرێت سەرچاوە گرینگەکان وەک سکریپت یان ستایلەکانی ناو هێڵ بخرێتە ناوەوە.

ئەگەر دەتەوێت زیاتر لەم بارەیەوە بزانیت، لە ئێستاوە زۆر بابەت و بابەتی نایاب لەسەری هەیە:

هەمیشە HTTPS بەکاربهێنە

ماڵپەڕەکەت تەنها دەبێت لە ڕێگەی پەیوەندییەکانی HTTPS لە بەرهەمهێناندا بەردەست بێت. HTTPS ئاسایش و نهێنی و بەردەستبوونی هەموو ماڵپەڕەکان باشتر دەکات و شتێک نییە بە ناوی ترافیکی وێبی ناهەستیار . هەنگاوەکانی ڕێکخستنی ماڵپەڕەکەت بۆ ئەوەی بە تایبەتی لە ڕێگەی HTTPSەوە خزمەت بکرێت بە شێوەیەکی بەرفراوان دەگۆڕێت بەپێی بیناسازی و دابینکەری هۆستکردنی وێبەکەت، و بەمجۆرە لە دەرەوەی بازنەی ئەم دۆکیومێنتانەن.

هەروەها ئەو سایتانەی کە لە ڕێگەی HTTPS خزمەت دەکرێن دەبێ دەستیان بگات بە هەموو ستایلەکان، سکریپتەکان و سەروەت و سامانەکانی تر لە ڕێگەی پەیوەندییەکانی HTTPS. ئەگەرنا، تۆ ناوەڕۆکی چالاک تێکەڵاو دەنێری بۆ بەکارهێنەران ، کە دەبێتە هۆی لاوازی ئەگەری کە دەتوانرێت ماڵپەڕێک بە گۆڕینی وابەستەیییەک تێکبدرێت. ئەمەش دەتوانێت ببێتە هۆی کێشەی ئاسایش و ئاگادارکردنەوەی ناو وێبگەڕەکە کە بۆ بەکارهێنەران پیشان بدرێت. جا تۆ لە CDN ەوە Bootstrap وەردەگریت یان خۆت خزمەتی دەکەیت، دڵنیابە لەوەی کە تەنها لە ڕێگەی پەیوەندییەکانی HTTPSەوە دەستت پێی دەگات.