使用Spatie的laravel-mix-preload优化前端性能-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00034/article/details/139463212

使用Spatie的laravel-mix-preload优化前端性能

laravel-mix-preloadAdd preload and prefetch links based your Mix manifest项目地址:https://gitcode.com/gh_mirrors/la/laravel-mix-preload

Latest Version Total Downloads

【Spatie】的laravel-mix-preload是一个针对Laravel应用的巧妙工具，它允许你基于Mix manifest文件自动化地添加预加载（preload）和预获取（prefetch）链接，从而显著提升页面的加载速度和用户体验。

1、项目介绍

laravel-mix-preload提供了一个Blade指令@preload，可以便捷地在HTML <head> 标签中插入预加载或预获取资源的链接。这个包的核心思想是根据你的mix-manifest.json文件中的内容智能决定哪些资源应被预先处理，以此来优化页面性能。

2、项目技术分析

该包的工作原理是解析mix-manifest.json文件，寻找那些文件名中包含"preload"或"prefetch"的chunk，然后自动生成对应的<link>标签。例如：

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

将会生成如下的HTML代码：

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

3、项目及技术应用场景

在实际开发中，你可以通过在Webpack配置中为需要预处理的脚本创建新的条目，或者使用动态导入并指定自定义chunk名称来实现预加载和预获取。例如，如果你想预加载一个地图库，可以这样做：

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

对于预获取，只需将preload替换为prefetch即可。

此外，还可以通过WebPack的魔法注释webpackChunkName设置动态导入模块的chunk名称以进行预加载或预获取。

4、项目特点

简单易用 - 添加一个@preload Blade指令就可实现资源的预加载与预获取。
灵活性 - 只需在文件名中包含特定的关键词，就能控制是否进行预加载或预获取，支持动态导入。
性能优化 - 提前加载关键资源，显著改善页面加载速度，提高用户体验。

如何支持我们？

Spatie是一家投入大量资源开发高质量开源软件的公司，您可以通过购买我们的付费产品或发送明信片给我们表示支持。更多详情，请参见项目文档。

安装与使用

要安装laravel-mix-preload，执行以下命令：

composer require spatie/laravel-mix-preload

在布局文件中加入@preload指令，如：

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

然后，根据mix-manifest.json文件中的信息，laravel-mix-preload会自动处理预加载和预获取。

了解更多关于预加载和预获取的信息，可以阅读Addy Osmani的文章：Preload, Prefetch And Priorities in Chrome。

想要贡献？

查看CONTRIBUTING，了解如何参与项目贡献。

关于安全问题，请邮件至 security@spatie.be。

该项目遵循MIT许可。更多信息，请查阅LICENSE.md。

这个项目由Spatie团队倾心打造，如果你喜欢我们的开源软件，别忘了寄张来自你家乡的明信片哦！地址：Spatie, Kruikstraat 22, 2018 Antwerp, Belgium。我们会把收到的所有明信片展示在我们的网站上。

laravel-mix-preloadAdd preload and prefetch links based your Mix manifest项目地址:https://gitcode.com/gh_mirrors/la/laravel-mix-preload