PHPackages                             mkinyua53/laravel-mix-preloader - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. mkinyua53/laravel-mix-preloader

ActiveLibrary[Utility & Helpers](/categories/utility)

mkinyua53/laravel-mix-preloader
===============================

Add preload and prefetch links based your Mix manifest and additional config. Based on spatie/laravel-mix-preload

0.2.0(3y ago)0541MITPHPPHP ^7.3|^8.0

Since Aug 31Pushed 3y agoCompare

[ Source](https://github.com/mkinyua53/laravel-mix-preloader)[ Packagist](https://packagist.org/packages/mkinyua53/laravel-mix-preloader)[ Docs](https://github.com/mkinyua53/laravel-mix-preload)[ RSS](/packages/mkinyua53-laravel-mix-preloader/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (2)Versions (2)Used By (0)

Add preload and prefetch links based your Mix manifest
======================================================

[](#add-preload-and-prefetch-links-based-your-mix-manifest)

[![Latest Version on Packagist](https://camo.githubusercontent.com/571f98b107149e7f9d3072fc14a845bb3d67b6755118609c337968604820c93b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d6b696e79756135332f6c61726176656c2d6d69782d7072656c6f61642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mkinyua53/laravel-mix-preload)[![Build Status](https://github.com/mkinyua53/laravel-mix-preload/workflows/run-tests/badge.svg)](https://github.com/mkinyua53/laravel-mix-preload/workflows/run-tests/badge.svg)[![Total Downloads](https://camo.githubusercontent.com/bd9e2087f21087dbe63f2bef8a87fad8ad11d6248bc78c1bbd3c12f0348ad592/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d6b696e79756135332f6c61726176656c2d6d69782d7072656c6f61642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mkinyua53/laravel-mix-preload)

```

    Preloading things

    @preload

```

This package exposes a `@preload` Blade directive that renders preload and prefetch links based on the contents in `mix-manifest.json`. Declaring what should be preloaded or prefetched is simple, just make sure `preload` or `prefetch` is part of the chunk name.

If this is your mix manifest:

```
{
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css",
    "/css/prefetch-otherpagecss.css": "/css/prefetch-otherpagecss.css",
    "/js/preload-biglibrary.js": "/js/preload-biglibrary.js",
    "/js/vendors~preload-biglibrary.js": "/js/vendors~preload-biglibrary.js"
}
```

The following links will be rendered:

```

```

Not sure what this is about? Read Addy Osmani's article [Preload, Prefetch And Priorities in Chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf).

In addition to the above, you should set your config values appropriately to add or remove more assets from preload/prefetch

Support
-------

[](#support)

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require mkinyua53/laravel-mix-preload
```

Publish the config

```
php artisan vendor:publish --tag=preloader-config
```

Usage
-----

[](#usage)

Add a `@preload` directive to your applications layout file(s).

```

        ...
        @preload

        ...

```

You can determine which scripts need to be preloaded or prefetched by making sure `preload` or `prefetch` is part of their file names. You can set the file name by creating a new entry in Mix, or by using dynamic imports.

### Adding a second entry

[](#adding-a-second-entry)

By default, Laravel sets up Mix with a single `app.js` entry. If you have another script outside of `app.js` that you want to have preloaded, make sure `preload` is part of the entry name.

```
mix
    .js('resources/js/app.js', 'public/js');
    .js('resources/js/preload-maps.js', 'public/js');
```

If you want to prefetch the script instead, make sure `prefetch` is part of the entry name.

```
mix
    .js('resources/js/app.js', 'public/js');
    .js('resources/js/prefetch-maps.js', 'public/js');
```

### Using dynamic imports with custom chunk names

[](#using-dynamic-imports-with-custom-chunk-names)

If you want to preload a chunk of your application scripts, make sure `preload` is part of the chunk name. You can use Webpack's magic `webpackChunkName` comment to set the module's chunk name.

```
import('./maps' /* webpackChunkName: "preload-maps" */).then(maps => {
    maps.init();
});
```

The same applies to prefetching.

```
import('./maps' /* webpackChunkName: "prefetch-maps" */).then(maps => {
    maps.init();
});
```

### Testing

[](#testing)

```
composer test
```

Credits
-------

[](#credits)

- [Sebastian De Deyne](https://github.com/sebastiandedeyne)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

23

—

LowBetter than 27% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity42

Maturing project, gaining track record

 Bus Factor2

2 contributors hold 50%+ of commits

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1351d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/72d060a7fe5b3d3abdae4d8fe2d9f85c4997ecc77fd614e4e0e94279aa136d36?d=identicon)[mkinyua53](/maintainers/mkinyua53)

---

Top Contributors

[![sebastiandedeyne](https://avatars.githubusercontent.com/u/1561079?v=4)](https://github.com/sebastiandedeyne "sebastiandedeyne (20 commits)")[![AdrianMrn](https://avatars.githubusercontent.com/u/12762044?v=4)](https://github.com/AdrianMrn "AdrianMrn (9 commits)")[![rubenvanassche](https://avatars.githubusercontent.com/u/619804?v=4)](https://github.com/rubenvanassche "rubenvanassche (4 commits)")[![mkinyua53](https://avatars.githubusercontent.com/u/20754792?v=4)](https://github.com/mkinyua53 "mkinyua53 (2 commits)")[![brendt](https://avatars.githubusercontent.com/u/6905297?v=4)](https://github.com/brendt "brendt (2 commits)")[![mikemand](https://avatars.githubusercontent.com/u/745184?v=4)](https://github.com/mikemand "mikemand (2 commits)")[![riasvdv](https://avatars.githubusercontent.com/u/3626559?v=4)](https://github.com/riasvdv "riasvdv (2 commits)")[![vlradstake](https://avatars.githubusercontent.com/u/24358266?v=4)](https://github.com/vlradstake "vlradstake (1 commits)")[![freekmurze](https://avatars.githubusercontent.com/u/483853?v=4)](https://github.com/freekmurze "freekmurze (1 commits)")[![bumbummen99](https://avatars.githubusercontent.com/u/4533331?v=4)](https://github.com/bumbummen99 "bumbummen99 (1 commits)")[![patrickomeara](https://avatars.githubusercontent.com/u/571773?v=4)](https://github.com/patrickomeara "patrickomeara (1 commits)")

---

Tags

laravel-mix-preloadmkinyua53

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/mkinyua53-laravel-mix-preloader/health.svg)

```
[![Health](https://phpackages.com/badges/mkinyua53-laravel-mix-preloader/health.svg)](https://phpackages.com/packages/mkinyua53-laravel-mix-preloader)
```

###  Alternatives

[barryvdh/laravel-ide-helper

Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion.

14.9k123.0M687](/packages/barryvdh-laravel-ide-helper)[illuminate/pipeline

The Illuminate Pipeline package.

9446.6M213](/packages/illuminate-pipeline)[illuminate/pagination

The Illuminate Pagination package.

10532.5M862](/packages/illuminate-pagination)[spatie/laravel-mix-preload

Add preload and prefetch links based your Mix manifest

169176.0k2](/packages/spatie-laravel-mix-preload)[spatie/laravel-pjax

A pjax middleware for Laravel 5

513371.8k11](/packages/spatie-laravel-pjax)[illuminate/cookie

The Illuminate Cookie package.

224.3M122](/packages/illuminate-cookie)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)