Lazy Loading of blade [css/js] files

[qontori]

My app has grown quite "large" and I am trying to make the loading of the course pages fast. Then, only when I need to use the css/js for custom models load them.

I have a "@include(backpack_view('custom_modals'))" inside blank.blade.php which loads up my blade file [which is big].

I do not want to split the code up and then just have multiple @includes because this only makes it easier to maintain the code but does nothing about the page load performance.

I read that in laravel we can do things like:

1. We can use includeif and use the router in the condition [we have a lot of routes so annoying and troublesome
2. We can use a variable passed from the controller
3. Using @stack inside the blank.blade.php and @Push

But subsequently told these do not work in backpage.

A) Is it true we cannot do the above?
B) What is the recommended way to only load the modals (css,js) when I need it or at minimum using a lazy load on the specific page? Note: Note the modals are more than just a simple OK, Cancel, they have full interactivity with the DB and are jquery based

Thanks in advance for your assistance.

[backpack-ai-bot[bot]]

A) Is it true we cannot do the above (includeIf, controller variables, @stack/@Push) in Backpack?

No, it is not true that you cannot use these Blade features in Backpack. Backpack is built on top of Laravel and supports standard Blade features like @includeIf, passing variables from controllers, and using @stack/@Push for scripts and styles. In fact, Backpack encourages the use of @stack and @Push for managing CSS and JS assets, and even extends this with its own widgets and asset management tools for more flexibility and performance.

B) What is the recommended way to only load the modals (css,js) when needed, or at minimum, lazy load on the specific page?

The recommended way in Backpack 6.x is to use the Widget system or the new Basset asset loader to conditionally load CSS and JS only on the pages where they are needed:

1. Using Widgets for CSS/JS:
You can add CSS or JS assets only for specific operations or pages by adding a script or style widget in your CrudController. For example:

// In your CrudController, inside the operation method (e.g., setupListOperation)
Widget::add()->type('script')->content('assets/js/custom-modal.js');
Widget::add()->type('style')->content('assets/css/custom-modal.css');

This ensures the assets are only loaded when that operation/page is rendered. You can also use integrity and crossorigin if loading from a CDN. For more details, see the Backpack Widgets documentation.

2. Using Basset for Asset Loading:
Backpack 6.x introduces Basset, which allows you to load assets from local or remote sources, and ensures they are only loaded once per page. For example:

@basset('https://example.com/link/to/asset.js')
@basset('public_path("assets/js/custom-modal.js")')

This is recommended for both performance and privacy, as Basset caches and serves assets efficiently. See the Basset documentation for more info.

3. Limiting Asset Scope:

• Add the Widget or @basset call inside the relevant CrudController method (e.g., setupListOperation) to limit loading to that operation.
• If you want the asset on all CRUD pages, add it in setup().
• For global loading (all pages), add it in config/backpack/base.php under scripts/styles.

4. About @stack and @Push:
You can still use @stack and @Push in your custom views or layouts. Backpack's own fields and widgets use these mechanisms under the hood, so your custom code will integrate smoothly.

Summary:
You do not need to split your Blade files or use multiple @includes just for asset management. Use Widgets or Basset to load your modal's CSS/JS only when needed, and leverage @stack/@Push as usual. This approach is both maintainable and performant in Backpack 6.x Docs: How to add CSS or JS to a page or operation Release Notes: Basset.

If your modals are complex and interactive, this approach will ensure their assets are only loaded when required, improving your page load performance.

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Github Issue (closed): [5.0] The same CSS and JS assets can be loaded multiple times
Upgrade Guide|CSS & JS Assets
Github Issue (closed): Remove CSS & JS from Composer package
FAQs for CRUDs|How to add CSS or JS to a page or operation Part 2
Github Issue (closed): [Feature Request] A way to add Javascript or CSS to just one Operation page, for a particular CRUD
Github Issue (closed): [Bug] Loading CSS or JS file for a particular Operation stopped working
Github Issue (closed): [4.0][Proposal] Load Js/css assets from a PHP array
Github Issue (closed): How to deploy Laravel+Backpack to Laravel Vapor
Release Notes|Basset - a better way to load CSS and JS assets
[4.2][Idea] Automatically localize CDN assets
[4.2.x] Fix CSS / JS assets loaded multiple times
add script and style widgets

[karandatwani92]

Hey @qontori

Following two guides may help you here:

• Add CSS or JS per page or operation
• Add CSS or JS to complete admin panel pages

[qontori]

This is great. thanks very much