Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

StarShines's avatar

Asset reloading on every request in livewire 3

Hi,

I am using livewire 3. I see on every page request, in devtools, assets (css and javascript) are loaded.

popper.min.js bootstrap.min.js moment.min.js datepicker.min.js nprogress.min.js apexcharts.min.js notyf.min.js on-screen.umd.min.js nouislider.min.js smooth-scroll.polyfills.min.js chartist.min.js buttons.js

My layout.blade.php: `

@include('backend.partials.nav')

@livewire('components.sidenav')

<main class="content">

    @include('backend.partials.topbar')

    {{ $slot }}

    @include('backend.partials.footer')

</main>

@include('global.partials.script-links')

`

How to deal with this issue and load these once and not on every page navigation ?

Thanks

1 like
5 replies
vincent15000's avatar

@include('global.partials.script-links') is not the best way to load scripts.

You should rather use @push or @pushOnce.

https://laravel.com/docs/11.x/blade#the-once-directive

You first need to create a stack (for example in the layout).

<head>
	...
	@stack('scripts')
</head>

And then you can use @push or @pushOnce in any blade view.

<div>
	@pushOnce('scripts')
		// here your scripts
	@endPushOnce
</div>
Merklin's avatar

If you are talking about the assets in the <head></head>, of course, they will be loaded on every page load. That's the normal behaviour of a website.

You have some options here:

  1. Have you looked at what wire.navigate and @persist do? https://livewire.laravel.com/docs/navigate
  2. Configure Redis/Memcache to cache your static files and serve them from the cache.
  3. Another way is to configure via .htaccess the caching of static files in the browser. Something like:
<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault                          "access plus 0 seconds"

  # Favicon
  ExpiresByType image/x-icon              "access plus 1 month"

  # CSS and JavaScript
  ExpiresByType application/javascript    "access plus 1 month"
  ExpiresByType text/css                  "access plus 1 month"

# Webfonts
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
  ExpiresByType font/ttf                  "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType font/woff                 "access plus 1 month"
  ExpiresByType font/woff2                "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
</IfModule>

For assets that are rarely needed, or used only on a few pages, do not load them in the head but do what @vincent15000 suggested

1 like
StarShines's avatar

@vincent15000 @merklin I checked it on the documentation website, by right clicking the site itself and in dev tools, those CSS and JS assets are not loaded on every request whether we use wire:navigate or wire:navigate.hover

1 like

Please or to participate in this conversation.