Bazen laravel projemizde birden fazla layout tasarlamak ve bu layout ların her bir css yada js dosyalarını ayrırmak web yükleme performansı açısından önemlidir.

Vite:

Vite, modern web projeleri için geliştirilmiş bir yapılandırma gerektirmeyen ön yüz geliştirme aracıdır. Geleneksel web paketleyicilerden (bundler) farklı olarak, modülleri ön işleme için bir paketleyici kullanmak yerine, modüllerin tarayıcılar tarafından doğrudan kullanılabilir hale getirilmesini sağlayan ES modülleri üzerine kuruludur. Vite, geliştirme sürecini hızlandıran HMR (Hot Module Replacement) gibi özellikler sunar ve production için optimize edilmiş bir build çıkışı sağlar.

Vite, Vue.js framework'ünün yaratıcısı Evan You tarafından başlatılmıştır ve Vue, React, Svelte gibi popüler frontend çatılarını ve kütüphanelerini destekler. Proje yapılandırması basittir ve modern JavaScript özelliklerini, CSS ve diğer web kaynaklarını doğrudan destekler. Geliştirme süresince yüksek performans sunan Vite, sayfa yenileme gerektirmeyen hızlı güncellemeler ve anında modül yükleme gibi özelliklerle geliştiricilerin verimliliğini artırır.

Vite'nin sağladığı avantajlardan bazıları şunlardır:

Hızlı Soğuk Başlatma: Büyük projelerde bile ilk sayfa yüklemesi hızlıdır.

Anında HMR: Kaynak kodunda yapılan değişiklikler anında tarayıcıda görüntülenir, bu da geliştirme sürecini önemli ölçüde hızlandırır.

Optimize Edilmiş Production Build: Rollup üzerine kurulu production build süreci, kodunuzu efektif bir şekilde optimize eder.

Vite, modern web geliştirme akışını basitleştirerek, geliştiricilere hız ve esneklik sunar.

vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { globSync } from "glob";

export default defineConfig({
    plugins: [
        laravel({
            input: globSync("resources/{css,js}/**/*.*", {
                ignore: "resources/js/bootstrap.js",
            }),
            refresh: true,
        }),
    ],
});

Burada glob kullanılmış olup;

JavaScript'te "glob" terimi, belirli bir kalıba uygun dosya veya klasör isimlerini eşleştirmek için kullanılan bir tür joker karakter dizisidir. Glob kalıpları, özellikle dosya sistemlerinde, belirli bir klasör altındaki dosyaları filtrelemek için kullanılır. Ancak, JavaScript'in kendisi bu tür bir işlevsellik doğrudan sağlamaz; bu işlevsellik genellikle Node.js gibi bir sunucu tarafı ortamı veya çeşitli build araçları ve paket yöneticileri tarafından sağlanır.

npm i glob

JavaScript veya Node.js projelerinde glob kalıplarını kullanmak istiyorsanız, genellikle glob adlı popüler bir npm paketini kullanırsınız. Bu paket, belirtilen glob kalıplarına uygun dosya yollarını senkron veya asenkron olarak aramanıza olanak tanır.

Örneğin, bir proje içindeki tüm .js uzantılı dosyaları listelemek için glob paketini kullanabilirsiniz:

glob paketi, daha karmaşık dosya ve klasör kalıplarıyla çalışabilmeniz için joker karakterler (*, **, ?, [...]) gibi çeşitli özellikler sunar. Örneğin, ** karakteri, tüm alt dizinlerdeki dosyaları eşleştirmek için kullanılır: