[5.x] Prevent multiple invocations of the {{ vite }} tag to eliminate asset duplication

[JoshSalway]

Description

This PR addresses the issue of duplicate CSS and JS asset links in the generated index.html caused by multiple invocations of the {{ vite }} tag during the Static Site Generation (SSG) process. By introducing a static flag within the Vite tag class, the {{ vite }} tag is now rendered only once per request, effectively eliminating redundant <link> and <script> tags.

Problem

Previously, the {{ vite }} tag was being called multiple times (approximately 10 times) during the SSG process. This resulted in duplicated CSS and JS asset links in the index.html file for every generated page. Such duplication can lead to increased page load times, redundant asset fetching, and potential conflicts in script execution.

Solution

• Introduced a Static Flag:

  • Added a private static $hasRendered property initialized to false to track whether the {{ vite }} tag has already been rendered.

• Modified the index() Method:

  • Implemented a check at the beginning of the index() method to determine if the {{ vite }} tag has been rendered previously.
  • If self::$hasRendered is true, the method returns an empty string, preventing further rendering of asset links.
  • After the first render, self::$hasRendered is set to true to block subsequent invocations.

• Enhanced Logging:

  • Added Log::info('Vite tag called with src: ' . implode(', ', $src)); to monitor the invocation of the {{ vite }} tag and ensure it is called only once.

Benefits
Performance Improvement:
Eliminates redundant asset loading by ensuring each CSS and JS file is linked only once, reducing page load times and bandwidth usage.

Maintainability:
Simplifies asset management within the SSG process, making the codebase cleaner and easier to maintain.

Debugging Ease:
Enhanced logging provides clear insights into the invocation of the {{ vite }} tag, facilitating easier troubleshooting in the future.

Testing

Add Logging for debugging purposes:
Log::info('Vite tag called with src: ' . implode(', ', $src));

Build Assets:
npm run build

Generate Static Site:
php please ssg:generate

Verify Logs:

Open storage/logs/laravel.log.

Ensure that the Vite tag is called only once:

[2024-12-21 15:52:56] local.INFO: Vite tag called with src: resources/css/site.css, resources/js/site.js

Inspect index.html:

Navigate to storage/app/static/index.html.
Confirm the absence of duplicated and <script> tags (may be unrelated):

<link rel="preload" as="style" href="https://yourdomain.com/build/assets/site-DWDe1f42.css" />
<link rel="modulepreload" href="https://yourdomain.com/build/assets/site-CNdXaVfx.js" />
<link rel="stylesheet" href="https://yourdomain.com/build/assets/site-DWDe1f42.css" data-navigate-track="reload" />
<script type="module" src="https://yourdomain.com/build/assets/site-CNdXaVfx.js" data-navigate-track="reload"></script>

Possible related issues:
https://github.com/statamic/cms/issues/11295

[ryanmitchell]

As it stands this will break sites where the tag is used multiple times with different src values. Eg one for css once for js.

[JoshSalway]

A sit stand this will break sites where the tag is used multiple times with different src values. Eg one for css once for js.

Perhaps there is a better way to implement the change if there is only 2 files it shouldn't get called 10 times.