{"id":13828319,"url":"https://github.com/spatie/laravel-mix-preload","last_synced_at":"2025-04-04T14:09:03.484Z","repository":{"id":55384947,"uuid":"176735338","full_name":"spatie/laravel-mix-preload","owner":"spatie","description":"Add preload and prefetch links based your Mix manifest","archived":false,"fork":false,"pushed_at":"2024-02-29T08:57:43.000Z","size":39,"stargazers_count":167,"open_issues_count":0,"forks_count":9,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-05-09T22:23:26.248Z","etag":null,"topics":["css","javascript","laravel","mix","performance","preload"],"latest_commit_sha":null,"homepage":"https://spatie.be/open-source","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spatie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"spatie","custom":"https://spatie.be/open-source/support-us"}},"created_at":"2019-03-20T13:04:16.000Z","updated_at":"2024-06-18T16:53:08.613Z","dependencies_parsed_at":"2024-06-18T16:53:06.063Z","dependency_job_id":"3bfabe9d-d3be-4f96-bcab-58cda7655ec7","html_url":"https://github.com/spatie/laravel-mix-preload","commit_stats":{"total_commits":46,"total_committers":14,"mean_commits":"3.2857142857142856","dds":0.6521739130434783,"last_synced_commit":"2f8e8b30e4ec60b9b61beb5820f95d7d6fb04103"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Flaravel-mix-preload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Flaravel-mix-preload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Flaravel-mix-preload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Flaravel-mix-preload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spatie","download_url":"https://codeload.github.com/spatie/laravel-mix-preload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190252,"owners_count":20898702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","javascript","laravel","mix","performance","preload"],"created_at":"2024-08-04T09:02:41.205Z","updated_at":"2025-04-04T14:09:03.468Z","avatar_url":"https://github.com/spatie.png","language":"PHP","funding_links":["https://patreon.com/spatie","https://spatie.be/open-source/support-us"],"categories":["PHP"],"sub_categories":[],"readme":"# Add preload and prefetch links based your Mix manifest\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/spatie/laravel-mix-preload.svg?style=flat-square)](https://packagist.org/packages/spatie/laravel-mix-preload)\n![Build Status](https://github.com/spatie/laravel-mix-preload/workflows/run-tests/badge.svg)\n[![Total Downloads](https://img.shields.io/packagist/dt/spatie/laravel-mix-preload.svg?style=flat-square)](https://packagist.org/packages/spatie/laravel-mix-preload)\n\n```blade\n\u003chead\u003e\n    \u003ctitle\u003ePreloading things\u003c/title\u003e\n\n    @preload\n\u003c/head\u003e\n```\n\nThis 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.\n\nIf this is your mix manifest:\n\n```json\n{\n    \"/js/app.js\": \"/js/app.js\",\n    \"/css/app.css\": \"/css/app.css\",\n    \"/css/prefetch-otherpagecss.css\": \"/css/prefetch-otherpagecss.css\",\n    \"/js/preload-biglibrary.js\": \"/js/preload-biglibrary.js\",\n    \"/js/vendors~preload-biglibrary.js\": \"/js/vendors~preload-biglibrary.js\"\n}\n```\n\nThe following links will be rendered:\n\n```html\n\u003clink rel=\"prefetch\" href=\"/css/prefetch-otherpagecss.css\" as=\"style\"\u003e\n\u003clink rel=\"preload\" href=\"/js/preload-biglibrary.js\" as=\"script\"\u003e\n\u003clink rel=\"preload\" href=\"/js/vendors~preload-biglibrary.js\" as=\"script\"\u003e\n```\n\nNot 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).\n\n## Support us\n\n[\u003cimg src=\"https://github-ads.s3.eu-central-1.amazonaws.com/laravel-mix-preload.jpg?t=1\" width=\"419px\" /\u003e](https://spatie.be/github-ad-click/laravel-mix-preload)\n\nWe 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).\n\nWe 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).\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require spatie/laravel-mix-preload\n```\n\n## Usage\n\nAdd a `@preload` directive to your applications layout file(s).\n\n```blade\n\u003c!doctype html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        ...\n        @preload\n    \u003c/head\u003e\n    \u003cbody\u003e\n        ...\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou 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.\n\n### Adding a second entry\n\nBy 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.\n\n```js\nmix\n    .js('resources/js/app.js', 'public/js');\n    .js('resources/js/preload-maps.js', 'public/js');\n```\n\nIf you want to prefetch the script instead, make sure `prefetch` is part of the entry name.\n\n```js\nmix\n    .js('resources/js/app.js', 'public/js');\n    .js('resources/js/prefetch-maps.js', 'public/js');\n```\n\n### Using dynamic imports with custom chunk names\n\nIf 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.\n\n```js\nimport('./maps' /* webpackChunkName: \"preload-maps\" */).then(maps =\u003e {\n    maps.init();\n});\n```\n\nThe same applies to prefetching.\n\n```js\nimport('./maps' /* webpackChunkName: \"prefetch-maps\" */).then(maps =\u003e {\n    maps.init();\n});\n```\n\n### Testing\n\n``` bash\ncomposer test\n```\n\n### Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.\n\n### Security\n\nIf you've found a bug regarding security please mail [security@spatie.be](mailto:security@spatie.be) instead of using the issue tracker.\n\n## Postcardware\n\nYou'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.\n\nOur address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.\n\nWe publish all received postcards [on our company website](https://spatie.be/en/opensource/postcards).\n\n## Credits\n\n- [Sebastian De Deyne](https://github.com/sebastiandedeyne)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Flaravel-mix-preload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspatie%2Flaravel-mix-preload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Flaravel-mix-preload/lists"}