PHPackages spatie/laravel-mix-preload - 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. spatie/laravel-mix-preload ActiveLibrary[Utility & Helpers](/categories/utility) spatie/laravel-mix-preload ========================== Add preload and prefetch links based your Mix manifest 1.5.0(2mo ago)169176.0k↓22.2%82MITPHPPHP ^7.3|^8.0CI failing Since Mar 20Pushed 2mo ago5 watchersCompare [ Source](https://github.com/spatie/laravel-mix-preload)[ Packagist](https://packagist.org/packages/spatie/laravel-mix-preload)[ Docs](https://github.com/spatie/laravel-mix-preload)[ Fund](https://spatie.be/open-source/support-us)[ Patreon](https://www.patreon.com/spatie)[ RSS](/packages/spatie-laravel-mix-preload/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (4)Versions (20)Used By (2) 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/c43162c06dc8ec5eb3b5b0cd489f40b82399dad12474c4243717a80360556e72/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7370617469652f6c61726176656c2d6d69782d7072656c6f61642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/spatie/laravel-mix-preload)[![Build Status](https://github.com/spatie/laravel-mix-preload/workflows/run-tests/badge.svg)](https://github.com/spatie/laravel-mix-preload/workflows/run-tests/badge.svg)[![Total Downloads](https://camo.githubusercontent.com/c9d831f192f623c54593cdd605da5d50f37e35d1fd2e30623923a2ad31f71401/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7370617469652f6c61726176656c2d6d69782d7072656c6f61642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/spatie/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). Support us ---------- [](#support-us) [![](https://camo.githubusercontent.com/00d31a96e197574f9d4628b12cc25ffbf559a40aa2d94cc17f0038b0e69eb94f/68747470733a2f2f6769746875622d6164732e73332e65752d63656e7472616c2d312e616d617a6f6e6177732e636f6d2f6c61726176656c2d6d69782d7072656c6f61642e6a70673f743d31)](https://spatie.be/github-ad-click/laravel-mix-preload) We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us). We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards). Installation ------------ [](#installation) You can install the package via composer: ``` composer require spatie/laravel-mix-preload ``` 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 ``` ### Changelog [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details. ### Security [](#security) If you've found a bug regarding security please mail instead of using the issue tracker. Postcardware ------------ [](#postcardware) You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium. We publish all received postcards [on our company website](https://spatie.be/en/opensource/postcards). 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 61 — FairBetter than 99% of packages Maintenance84 Actively maintained with recent releases Popularity47 Moderate usage in the ecosystem Community25 Small or concentrated contributor base Maturity74 Established project with proven stability 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 Every ~141 days Recently: every ~371 days Total 19 Last Release 82d ago Major Versions 0.1.7 → 1.0.02019-10-21 PHP version history (4 changes)0.1.0PHP ^7.1 1.1.0PHP ^7.2.5 1.2.2PHP ^7.2.5|^8.0 1.3.0PHP ^7.3|^8.0 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/7535935?v=4)[Spatie](/maintainers/spatie)[@spatie](https://github.com/spatie) --- Top Contributors [![sebastiandedeyne](https://avatars.githubusercontent.com/u/1561079?v=4)](https://github.com/sebastiandedeyne "sebastiandedeyne (20 commits)")[![freekmurze](https://avatars.githubusercontent.com/u/483853?v=4)](https://github.com/freekmurze "freekmurze (11 commits)")[![AdrianMrn](https://avatars.githubusercontent.com/u/12762044?v=4)](https://github.com/AdrianMrn "AdrianMrn (9 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (6 commits)")[![rubenvanassche](https://avatars.githubusercontent.com/u/619804?v=4)](https://github.com/rubenvanassche "rubenvanassche (4 commits)")[![mikemand](https://avatars.githubusercontent.com/u/745184?v=4)](https://github.com/mikemand "mikemand (2 commits)")[![AlexVanderbist](https://avatars.githubusercontent.com/u/6287961?v=4)](https://github.com/AlexVanderbist "AlexVanderbist (2 commits)")[![brendt](https://avatars.githubusercontent.com/u/6905297?v=4)](https://github.com/brendt "brendt (2 commits)")[![riasvdv](https://avatars.githubusercontent.com/u/3626559?v=4)](https://github.com/riasvdv "riasvdv (2 commits)")[![patrickomeara](https://avatars.githubusercontent.com/u/571773?v=4)](https://github.com/patrickomeara "patrickomeara (1 commits)")[![bumbummen99](https://avatars.githubusercontent.com/u/4533331?v=4)](https://github.com/bumbummen99 "bumbummen99 (1 commits)")[![vlradstake](https://avatars.githubusercontent.com/u/24358266?v=4)](https://github.com/vlradstake "vlradstake (1 commits)") --- Tags cssjavascriptlaravelmixperformancepreloadspatielaravel-mix-preload ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/spatie-laravel-mix-preload/health.svg) ``` [![Health](https://phpackages.com/badges/spatie-laravel-mix-preload/health.svg)](https://phpackages.com/packages/spatie-laravel-mix-preload) ``` ### Alternatives [spatie/laravel-collection-macros A set of useful Laravel collection macros 1.9k5.7M29](/packages/spatie-laravel-collection-macros)[spatie/laravel-cookie-consent Make your Laravel app comply with the crazy EU cookie law 1.5k4.7M20](/packages/spatie-laravel-cookie-consent)[spatie/laravel-enum Laravel Enum support 3655.4M31](/packages/spatie-laravel-enum)[spatie/laravel-multitenancy Make your Laravel app usable by multiple tenants 1.3k2.9M16](/packages/spatie-laravel-multitenancy)[spatie/laravel-html A fluent html builder 8376.4M72](/packages/spatie-laravel-html)[spatie/laravel-feed Generate rss feeds 9743.6M28](/packages/spatie-laravel-feed) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)