README

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

    @preload
</head>

此包公开一个 @preload Blade 指令，根据 mix-manifest.json 中的内容渲染预加载和预取链接。声明应预加载或预取的内容很简单，只需确保 preload 或 prefetch 是包名的一部分。

如果这是您的 mix 清单

{
    "/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"
}

以下链接将被渲染

<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">

不确定这是什么？阅读 Addy Osmani 的文章 Chrome 中的预加载、预取和优先级。

除了上述内容外，您还应该适当地设置配置值，以添加或删除更多资产进行预加载/预取

支持

安装

您可以通过 composer 安装此包

composer require mkinyua53/laravel-mix-preload

发布配置

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

用法

将 @preload 指令添加到您的应用程序布局文件中。

<!doctype html>
<html>
    <head>
        ...
        @preload
    </head>
    <body>
        ...
    </body>
</html>

您可以通过确保 preload 或 prefetch 是其文件名的一部分来确定哪些脚本需要预加载或预取。您可以通过在 Mix 中创建新条目或使用动态导入来设置文件名。

添加第二个条目

默认情况下，Laravel 使用单个 app.js 条目设置 Mix。如果您有位于 app.js 之外的另一个脚本，希望对其进行预加载，确保 preload 是条目名的一部分。

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

如果您想预取脚本，确保 prefetch 是条目名的一部分。

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

使用自定义块名称的动态导入

如果您想预加载应用程序脚本的一部分，确保 preload 是块名的一部分。您可以使用 Webpack 的魔法 webpackChunkName 注释来设置模块的块名。

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

预取同样适用。

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

测试

composer test

致谢

许可

MIT 许可证 (MIT)。有关更多信息，请参阅许可文件。

mkinyua53 / laravel-mix-preloader

维护者

详细信息

README

支持

安装

用法

添加第二个条目

使用自定义块名称的动态导入

测试

致谢

许可