README

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

    @preload
</head>

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

如果这是您的 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 spatie/laravel-mix-preload

使用

将 @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');

使用自定义 chunk 名称动态导入

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

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

预取也适用同样的规则。

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

测试

composer test

变更日志

有关最近更改的更多信息，请参阅 CHANGELOG。

贡献

有关详细信息，请参阅 CONTRIBUTING。

安全性

如果您发现了关于安全性的问题，请通过邮件发送到 security@spatie.be，而不是使用问题跟踪器。

明信片软件

您可以使用此包，但如果它进入您的生产环境，我们非常感谢您从家乡寄给我们一张明信片，说明您正在使用我们的哪些包。

我们的地址是：Spatie，Kruikstraat 22，2018 安特卫普，比利时。

我们将所有收到的明信片发布在我们的公司网站上。

致谢

许可证

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

spatie / laravel-mix-preload

维护者

详细信息