optimize et

Yalın Sass ithalatı

@importVarlık ardışık düzeninizde Sass kullanırken, yalnızca ihtiyacınız olan bileşenleri seçerek Bootstrap'i optimize ettiğinizden emin olun . En büyük optimizasyonlarınız muhtemelen Layout & Componentsbizim bölümden gelecektir 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";

Bir bileşen kullanmıyorsanız, onu yorumlayın veya tamamen silin. Örneğin, atlıkarınca kullanmıyorsanız, derlenmiş CSS'nizde bazı dosya boyutlarını kaydetmek için bu içe aktarmayı kaldırın. Sass içe aktarmalarında bir dosyayı atlamayı zorlaştırabilecek bazı bağımlılıklar olduğunu unutmayın.

Yalın JavaScript

bootstrap.jsBootstrap'ın JavaScript'i, birincil dağıtım dosyalarımızdaki ( ve ) her bileşeni ve hatta paket dosyalarımızla ( ve ) bootstrap.min.jsbirincil bağımlılığımızı (Popper ) içerir . Sass üzerinden özelleştirme yaparken ilgili JavaScript'i kaldırdığınızdan emin olun.bootstrap.bundle.jsbootstrap.bundle.min.js

Örneğin, Webpack veya Rollup gibi kendi JavaScript paketleyicinizi kullandığınızı varsayarsak, yalnızca kullanmayı planladığınız JavaScript'i içe aktarırsınız. Aşağıdaki örnekte, kalıcı JavaScript'imizi nasıl ekleyeceğinizi gösteriyoruz:

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

Bu şekilde, düğmeler, karuseller ve araç ipuçları gibi bileşenler için kullanmayı düşünmediğiniz JavaScript'leri dahil etmiyorsunuz. Açılır listeleri, araç ipuçlarını veya açılır pencereleri içe aktarıyorsanız, dosyanızda Popper bağımlılığını listelediğinizden emin olun package.json.

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

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

Otomatik ön ekleyici .browserslistrc

Bootstrap, belirli CSS özelliklerine tarayıcı öneklerini otomatik olarak eklemek için Otomatik Ön Düzeltici'ye bağlıdır. .browserslistrcÖn ekler , Bootstrap deposunun kökünde bulunan dosyamız tarafından belirlenir . Bu tarayıcı listesini özelleştirmek ve Sass'ı yeniden derlemek, o tarayıcıya veya sürüme özgü satıcı önekleri varsa, derlenmiş CSS'nizden bazı CSS'leri otomatik olarak kaldıracaktır.

Kullanılmayan CSS

Bu bölümle ilgili yardım aranıyor, lütfen bir PR açmayı düşünün. Teşekkürler!

PurgeCSS'yi Bootstrap ile kullanmak için önceden oluşturulmuş bir örneğimiz olmasa da, topluluğun yazdığı bazı yararlı makaleler ve izlenecek yollar var. İşte bazı seçenekler:

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

Son olarak, kullanılmayan CSS ile ilgili bu CSS Püf Noktaları makalesi, PurgeCSS ve diğer benzer araçların nasıl kullanılacağını gösterir.

Küçült ve gzip

Mümkün olduğunda, ziyaretçilerinize sunduğunuz tüm kodu sıkıştırdığınızdan emin olun. Bootstrap dağıtım dosyaları kullanıyorsanız, küçültülmüş sürümlere bağlı kalmaya çalışın ( .min.cssve .min.jsuzantılarıyla belirtilir). Kendi derleme sisteminizle kaynaktan Bootstrap oluşturuyorsanız, HTML, CSS ve JS için kendi küçültücülerinizi uyguladığınızdan emin olun.

Engellenmeyen dosyalar

Sıkıştırmayı küçültmek ve kullanmak yeterli gibi görünse de, dosyalarınızı engellemeyen dosyalar yapmak sitenizi iyi optimize edilmiş ve yeterince hızlı hale getirmek için büyük bir adımdır.

Google Chrome'da bir Lighthouse eklentisi kullanıyorsanız , FCP'ye rastlamış olabilirsiniz. First Contentful Paint metriği, sayfanın yüklenmeye başladığı andan sayfa içeriğinin herhangi bir bölümünün ekranda görüntülendiği ana kadar geçen süreyi ölçer.

Kritik olmayan JavaScript veya CSS'yi erteleyerek FCP'yi iyileştirebilirsiniz. Bu ne anlama geliyor? Basitçe, sayfanızın ilk boyasında bulunması gerekmeyen JavaScript veya stil sayfaları asyncveya deferözellikleri ile işaretlenmelidir.

Bu, daha az önemli kaynakların daha sonra yüklenmesini ve ilk boyayı engellememesini sağlar. Öte yandan, kritik kaynaklar satır içi komut dosyaları veya stiller olarak dahil edilebilir.

Bununla ilgili daha fazla bilgi edinmek istiyorsanız, zaten bununla ilgili birçok harika makale var:

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

Her zaman HTTPS kullan

Web siteniz yalnızca üretimde HTTPS bağlantıları üzerinden kullanılabilir olmalıdır. HTTPS, tüm sitelerin güvenliğini, gizliliğini ve kullanılabilirliğini artırır ve hassas olmayan web trafiği diye bir şey yoktur . Web sitenizi yalnızca HTTPS üzerinden sunulacak şekilde yapılandırma adımları, mimarinize ve web barındırma sağlayıcınıza bağlı olarak büyük ölçüde değişir ve bu nedenle bu belgelerin kapsamı dışındadır.

HTTPS üzerinden sunulan siteler ayrıca tüm stil sayfalarına, komut dosyalarına ve diğer varlıklara HTTPS bağlantıları üzerinden erişmelidir. Aksi takdirde, kullanıcılara karışık aktif içerik göndererek , bir sitenin bir bağımlılığı değiştirerek güvenliğinin ihlal edilebileceği potansiyel güvenlik açıklarına yol açacaksınız. Bu, güvenlik sorunlarına ve kullanıcılara görüntülenen tarayıcı içi uyarılara yol açabilir. Bootstrap'i bir CDN'den alıyor veya kendiniz sunuyor olsanız da, ona yalnızca HTTPS bağlantıları üzerinden eriştiğinizden emin olun.