[Bug]: Frontend assets load time problem
danie-ramdhani opened this issue · 8 comments
What happened?
Here's screenshot of my network request when i do hard reload browser or when the cache_assets
is false
:
I believe it doesn't make sense to load core.min.js
for one second (and 4s to load whole laravel-livewire-tables frontend assets) meanwhile livewire.js
only takes 800ms (fo thousands loc)
Even the assets is injected when the component doesn't using laravel-livewire-tables
Thanks for your time.
How to reproduce the bug
No response
Package Version
dev-v3-develop
PHP Version
8.2.x
Laravel Version
10
Alpine Version
3.13
Theme
Tailwind 3.x
Notes
No response
Error Message
No response
Leave it with me, its still alpha/beta, so the code is constantly being amended.
Do you see any difference on a subsequent refresh with browser caching? The 304 status is suggesting that your browser has determined that the asset hasn't been modified, so it may be your browser taking a few moments to determine whether to reload it or not, I'll double check the injected headers for the files to ensure that they're not causing any confusion
Very odd that it is taking so long to generate those files. On a random dev environment I'm seeing:
Also -If you are using a bundler, then there's a way to use that instead, and disable the injection. Let me know if you want to try that method as there's a couple of tweaks you'll need to make in the config.
here's the screenshots of all laravel-livewire-tables assets:
this isn't a big deal if I configure cache_assets
to true
. but it is a bit slow for me when I hard reload the browser or the cache_assets
value is false
.
this is the screenshot when i hard reload the browser or the cache_assets
value is false
:
and this is the screenshot when the cache_assets
value is true
:
Also have a test running at the mo where it wont inject the assets without a table component being present, just tinkering at the mo, so no real timeline other than soon.
Bundler is definitely an easier way
With cache_ assets set to false, it will always tell the browser that the file has expired.
It is more of a dev toggle than anything else
With it enabled, it'll cache the rappasoft assets for one hour (will be adjusted to match browser in next revisions)
This is all mostly just during dev, where the assets are all subject to change at short notice.
Full release will have
Publishable Option (Not recommended)
Bundled option (Encouraged)
Injected option (If bundled not available)
can we inject the assets using $this->js()
when the datatable is mounted?
( because i tried something like this and it's works XD )
public function mount()
{
$toastNotificationScriptPath = Vite::asset('node_modules/toast-notification-js/dist/toast-notification.min.js');
$toastNotificationStylePath = Vite::asset('node_modules/toast-notification-js/dist/toast-notification.min.css');
// Create the toast notification
$this->js(<<<JS
Promise.all([
import("$toastNotificationScriptPath"),
import("$toastNotificationStylePath"),
]).then(() => {
ToastNotification().create();
});
JS);
}
@danie-ramdhani - In theory - yes, an approach like that will work. In practice, sometimes what happens is the table loads before the assets make available their methods to Alpine, and then things go... missing?
If you have 15 minutes, I'm on the Official Discord at the moment, and there's a couple of alternatives that you can use (e.g. bundled elements) that will probably be much quicker for you.
This should be fixed in the v3.0.0-beta.1 Pre-release.
Please re-open if not!