spatie / laravel-mix-preload Goto Github PK
View Code? Open in Web Editor NEWAdd preload and prefetch links based your Mix manifest
Home Page: https://spatie.be/open-source
License: MIT License
Add preload and prefetch links based your Mix manifest
Home Page: https://spatie.be/open-source
License: MIT License
Hi, thank you very much for this wonderful package!
Just wanted to ask if this supports Dynamic Imports? I see from the readme that it does, but wondering if anything's changed on the newer versions of Laravel / Laravel Mix, because @preload
for me currently generates nothing
Right off the bat, I think the root cause is Laravel Mix doesn't add chunks to mix-manifest.json
. I have a project with this webpack.config.js:
const path = require('path')
module.exports = {
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
},
output: {
publicPath: '/',
chunkFilename: 'js/chunks/prefetch-[name].js?ver=[chunkhash]',
},
}
So if I follow the readme, it should be generating prefetch links since it has prefetch in its name, but currently @preload
generates nothing, and looking at the code it looks like it's because the chunks are not in mix-manifest.json
. Below are the contents of my mix-manifest.json:
{
"/js/app.js": "/js/app.js?id=c85f193bc1e82c1aabfe",
"/css/app.css": "/css/app.css?id=efa1051801c9d36d1161"
}
Here is my webpack.mix.js
, it's pretty standard:
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('postcss-nested'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'))
if (mix.inProduction()) {
mix.version()
}
Here are versions:
PHP: 8.0.2
Laravel: 8.28.1
Laravel Mix: 6.0.6
Laravel Mix Preload: 1.2.2
If this is because the behavior has changed for newer Laravel Mix, would you happen to know any workarounds?
My use case for not relying on webpack's built-in preloading is to support dynamic route-based preloading. On the server, I would want to check the requested route and map that to the top-level component for that page, dynamically adding a preload link for it. This feature would reduce the number of roundtrips removing any cost associated with chunking out the landing pages.
So I would have:
const HomePage = Loadable(() => import(
/* webpackChunkName: "preload-HomePage" */
'./HomePage'
));
Route to component json
{
"/home": "preload-HomePage"
}
And then in my blade:
<head>
...
@preload($routeToComponentMap[$path])
</head>
I know @preload
already takes a parameter, so we would have to figure out a slightly different pattern. Maybe an additional directive, so missing paths can be handled gracefully as well?
Happy to take an initial pass at adding this if it is desirable to be part of this package, and you can give me some guidance on how to solve the previous paragraph. If not, do you have a suggestion for a different library that would help solve this? Thanks!
I publish all assets in a separate directory inside the public directory by using the following Laravel Mix config:
mix.setPublicPath("../public/build");
mix.setResourceRoot("/build");
Needless to say, I am getting the following error:
Facade\Ignition\Exceptions\ViewException
file_get_contents(/var/www/html/public/mix-manifest.json): failed to open stream: No such file or directory (View: /var/www/html/resources/views/app-bootstrapper.blade.php)
My public dir looks like:
public/build/mix-manifest.json
public/build/css/app.css
public/build/js/app.js
public/build/js/0.js
It would be nice to have a configurable option or a way to detect the public dir from the webpack.mix.js file.
Composer throws this error:
Your requirements could not be resolved to an installable set of packages.
Problem 1
- Conclusion: remove laravel/framework v7.3.0
- Conclusion: don't install laravel/framework v7.3.0
- spatie/laravel-mix-preload 1.0.0 requires illuminate/support ^6.0 -> satisfiable by illuminate/support[6.x-dev, v6.0.0, v6.0.1, v6.0.2, v6.0.3, v6.0.4, v6.1.0, v6.10.0, v6.11.0, v6.12.0, v6.13.0, v6.13.1, v6.14.0, v6.15.0, v6.15.1, v6.16.0, v6.17.0, v6.17.1, v6.18.0, v6.18.1, v6.18.2, v6.18.3, v6.2.0, v6.3.0, v6.4.1, v6.5.0, v6.5.1, v6.5.2, v6.6.0, v6.6.1, v6.6.2, v6.7.0, v6.8.0].
- spatie/laravel-mix-preload 1.0.1 requires illuminate/support ^6.0 -> satisfiable by illuminate/support[6.x-dev, v6.0.0, v6.0.1, v6.0.2, v6.0.3, v6.0.4, v6.1.0, v6.10.0, v6.11.0, v6.12.0, v6.13.0, v6.13.1, v6.14.0, v6.15.0, v6.15.1, v6.16.0, v6.17.0, v6.17.1, v6.18.0, v6.18.1, v6.18.2, v6.18.3, v6.2.0, v6.3.0, v6.4.1, v6.5.0, v6.5.1, v6.5.2, v6.6.0, v6.6.1, v6.6.2, v6.7.0, v6.8.0].
- don't install illuminate/support 6.x-dev|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.0.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.0.1|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.0.2|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.0.3|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.0.4|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.1.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.10.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.11.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.12.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.13.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.13.1|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.14.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.15.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.15.1|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.16.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.17.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.17.1|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.18.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.18.1|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.18.2|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.18.3|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.2.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.3.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.4.1|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.5.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.5.1|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.5.2|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.6.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.6.1|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.6.2|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.7.0|don't install laravel/framework v7.3.0
- don't install illuminate/support v6.8.0|don't install laravel/framework v7.3.0
- Installation request for laravel/framework (locked at v7.3.0, required as ^7.0) -> satisfiable by laravel/framework[v7.3.0].
- Installation request for spatie/laravel-mix-preload ^1.0 -> satisfiable by spatie/laravel-mix-preload[1.0.0, 1.0.1].
Installation failed, reverting ./composer.json to its original content.
and this my composer.json:
{
"name": "laravel/laravel",
"type": "project",
"description": "The Laravel Framework.",
"keywords": [
"framework",
"laravel"
],
"license": "MIT",
"require": {
"php": "^7.2.5",
"fideloper/proxy": "^4.2",
"fruitcake/laravel-cors": "^1.0",
"guzzlehttp/guzzle": "^6.5",
"laravel/framework": "^7.0",
"laravel/tinker": "^2.0",
"laravel/ui": "^2.0",
"orangehill/iseed": "^2.6",
"spatie/laravel-fractal": "^5.7"
},
"require-dev": {
"facade/ignition": "^2.0",
"fzaninotto/faker": "^1.9.1",
"mockery/mockery": "^1.3.1",
"nunomaduro/collision": "^4.1",
"phpunit/phpunit": "^8.5"
},
"config": {
"optimize-autoloader": true,
"preferred-install": "dist",
"sort-packages": true
},
"extra": {
"laravel": {
"dont-discover": []
}
},
"autoload": {
"psr-4": {
"App\\": "app/"
},
"classmap": [
"database/seeds",
"database/factories"
]
},
"autoload-dev": {
"psr-4": {
"Tests\\": "tests/"
}
},
"minimum-stability": "dev",
"prefer-stable": true,
"scripts": {
"post-autoload-dump": [
"Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
"@php artisan package:discover --ansi"
],
"post-root-package-install": [
"@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
"@php artisan key:generate --ansi"
]
}
}
How can I achieve the installation?
Hello there,
I am using Tailwindcss to style my website. One part of it is the import of fonts right in app.css
. Those fonts are purged if not needed and moved to public/fonts
. Is it possible to use @preload
to preload all these fonts, even if they do not include the preload
string in the filename?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.