Laravel Mix Preload

Laravel Mix Preload

Laravel Mix Preload is a Laravel package by Sebastian De Deyne and Spatie that adds preload and prefetch links based on your Mix manifest file. This package exposes a blade directive that renders links based on chunks names with “preload” and “prefetch”.

Here’s the gist of what you need in your layout template:

<head>
    <title>Preloading things</title>

    @preload
</head>

Which would render something like the following depending on the chunk names in the mix-manifest.json file:

<link rel="prefetch" href="/css/prefetch-otherpagecss.css" as="style">
<link rel="preload" href="/js/preload-biglibrary.js" as="script">
<link rel="preload" href="/js/vendors~preload-biglibrary.js" as="script">

As mentioned in the project’s readme, if you are unfamiliar with the concepts around prefetch and preload, check out Addy Osmani’s article Preload, Prefetch And Priorities in Chrome. Although you should read through the article, I like the following summary for when you should preload vs. prefetch:

Preload resources you have high-confidence will be used in the current page. Prefetch resources likely to be used for future navigations across multiple navigation boundaries.

You can learn more about this package, get full installation instructions, and view the source code on GitHub at spatie/laravel-mix-preload.


Filed in: News


Newsletter

Join the weekly newsletter and never miss out on new tips, tutorials, and more.

Laravel News Partners

Laravel Jobs

PHP Data Engineer
Remote (US)
FBS
Software Developer
Remote (US & Canada)
Alley
Backend Software Engineer
Remote (UTC +/- 5)
Smartbnb
Programmer
Remote (Overlap w/ Continental US Time Zones)
Tighten
Senior Backend Engineer
Remote
64 Robots
Senior Laravel Developer
Atlanta, GA
Helium LLC
Full-Stack Developer (JS - Vue.js, PHP - Laravel)
US Remote / Telecommute
TTEC Digital