Responsive layout script loading — layout-level vs page-specific

Proje: Okul Platform · Hub: Okul Platform — Conventions

Responsive layout (responsive/layouts/master.blade.php) için iki katmanlı script yükleme pattern’i.

Kural

Layout-seviyesi (her responsive sayfada otomatik yüklenir) — master.blade.php içinde <script src="...">:

• ga-events.js — her sayfa GA event gönderir
• form-helpers.js — forms her sayfada olabilir (phone mask + email validator)
• footer-accordion.js — footer her sayfada var

Page-seviyesi (sadece ihtiyaç duyan sayfaya opt-in) — page blade’i @section('page_scripts') ile ekler:

• profiling.js (~128 KiB Alpine bundle) — sadece 4 profiling sayfası (test/index, result/index, finder/index, finder/result)

Master yapı

{{-- Layout-seviyesi (her responsive sayfada yüklenir) --}}
<script src="{{ secure_asset('assets/scripts/profiling/ga-events.js') }}" defer></script>
<script src="{{ secure_asset('assets/scripts/profiling/form-helpers.js') }}" defer></script>
<script src="{{ secure_asset('assets/scripts/profiling/footer-accordion.js') }}" defer></script>
 
{{-- Page-seviyesi opt-in --}}
@yield('page_scripts')

Page blade opt-in

@extends('responsive.layouts.master')
 
@section('content')
    {{-- HTML --}}
@endsection
 
@section('page_scripts')
<script src="{{ secure_asset('assets/scripts/profiling/profiling.js') }}" defer></script>
@endsection

Load order garantisi

Tüm script’ler defer attribute’lu → HTML parse sonrası document order’da çalışır.

@yield('page_scripts') master’da layout script’lerin SONRASINDA render edilir, dolayısıyla page script’ler son yüklenir. Alpine bundle’ı Alpine component’larından sonra init olsun, core helper’lar önce tanımlansın — doğru sıra.

Neden page-specific?

Responsive layout gelecekte profiling dışı sayfalarda (örn. statik landing, about page) kullanılırsa:

• Alpine gerektirmeyen sayfa için 128 KiB bundle boş yere yüklenmez
• Her sayfa ihtiyaç duyduğu scripts’e opt-in yapar

Related

• 2026-04-16-inline-script-extraction-guidelines — Hangi script’ler mix pipeline’a girer (pre-requisite)
• 2026-04-15-responsive-component-contract — Responsive Blade component sözleşmesi
• Okul Platform — Conventions