告别重复加载！如何使用digitallyhappy/assets优化Laravel页面资源管理

在现代 Laravel 应用开发中，我们倾向于将页面拆分成许多小组件，以提高代码复用性和可维护性。例如，你可能有一个 card.blade.php 组件，其中包含了卡片所需的 HTML 结构，以及一个 <script src="path/to/card.js"></script> 来处理卡片特有的交互逻辑。

一切看起来都很美好，直到你在一个页面上多次使用了这个 card 组件：

<pre class="brush:php;toolbar:false;"><!-- dashboard.blade.php -->
@include('components.card')
@include('components.card')
@include('components.card')

这时，你会发现 card.js 这个脚本在你的页面中被加载了三次！这不仅增加了用户的网络负担，还可能导致 JavaScript 变量冲突或重复事件绑定等问题。

Laravel 确实提供了一个 @once 指令来解决这个问题：

<pre class="brush:php;toolbar:false;"><!-- components/card.blade.php -->
<div class="card">
  ...
</div>

@once
<script src="path/to/card.js"></script>
@endonce

现在，即使 card.blade.php 被多次 include，card.js 也只会加载一次。但问题来了：如果你的 hero.blade.php 组件也需要加载 card.js（或者一个共享的 modal.js），而 hero.blade.php 和 card.blade.php 都被用在同一个页面上呢？此时，@once 指令就无能为力了，因为它们是独立作用于各自的 Blade 文件。你仍然会面临 card.js 或 modal.js 被重复加载的困境。

救星登场：digitallyhappy/assets

为了解决这种跨组件、跨文件的全局资源重复加载问题，digitallyhappy/assets 这个 Composer 包应运而生。它提供了一种“死简单”的方式，确保你的 CSS 或 JS 资源在整个页面中只被加载一次，无论它被多少个 Blade 文件引用。

如何使用 Composer 引入并解决问题

首先，通过 Composer 将 digitallyhappy/assets 添加到你的 Laravel 项目中：

<code class="bash">composer require digitallyhappy/assets</code>

安装完成后，你就可以在 Blade 模板中替换传统的 <script></script> 和 <link> 标签，使用 digitallyhappy/assets 提供的 @loadOnce() Blade 指令。

替换外部 CSS 和 JS 文件

假设你之前是这样加载资源的：

<pre class="brush:php;toolbar:false;"><!-- 之前 -->
<script src="{{ asset('path/to/file.js') }}"></script>
<link href="{{ asset('path/to/file.css') }}" rel="stylesheet" type="text/css">

现在，你只需要简单地替换为 @loadOnce()：

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

<pre class="brush:php;toolbar:false;"><!-- 之后 -->
@loadOnce('path/to/file.js')
@loadOnce('path/to/file.css')

就是这么简单！这个包会根据文件扩展名自动判断是 CSS 还是 JS，并在第一次调用时输出相应的 <link> 或 <script></script> 标签。之后，无论这个指令在页面的哪个地方、被调用多少次，它都不会再输出任何内容。这意味着，即使 path/to/file.js 被 card.blade.php 和 hero.blade.php 同时引用，它也只会在页面中出现一次。

处理内联 CSS 或 JS 代码块

有时候，你可能需要在组件内部直接嵌入一段 CSS 或 JS 代码。digitallyhappy/assets 也考虑到了这种情况，你可以使用 @loadOnce() 和 @endLoadOnce 块指令：

<pre class="brush:php;toolbar:false;">@loadOnce('unique_name_for_code_block')
    <script>
        // 你的组件特有 JavaScript 代码
        console.log('This script runs only once!');
    </script>

    <style>
        /* 你的组件特有 CSS 样式 */
        .my-component { color: blue; }
    </style>
@endLoadOnce

这里的 'unique_name_for_code_block' 是一个字符串标识符，用于告诉包这是一个需要全局只输出一次的代码块。同样，这段代码块内容只会在第一次被渲染时输出，之后会被忽略。

动态变量作为路径

如果你需要通过变量来传递资源路径，例如：

<pre class="brush:php;toolbar:false;">@php
    $pathToCssFile = 'path/to/dynamic_file.css';
    $pathToJsFile = 'path/to/another_dynamic_file.js';
@endphp

此时，@loadOnce($pathToCssFile) 无法自动判断文件类型。为此，digitallyhappy/assets 提供了 @loadStyleOnce() 和 @loadScriptOnce() 两个专用指令：

<pre class="brush:php;toolbar:false;">@loadStyleOnce($pathToCssFile)
@loadScriptOnce($pathToJsFile)

这样，即使路径是动态的，也能确保资源只被加载一次。

优势与实际应用效果

使用 digitallyhappy/assets 带来的好处是显而易见的：

1. 优化页面加载性能： 减少了不必要的网络请求，尤其是在大型应用中，这能显著提升用户体验。
2. 避免资源冲突： 确保同一脚本或样式只被加载一次，有效避免了因重复加载导致的 JavaScript 变量污染、函数重复定义或 CSS 样式优先级混乱等问题。
3. 更干净的 HTML 源码： 告别冗余的 <script></script> 和 <link> 标签，让页面的 DOM 结构更加简洁，方便调试和维护。
4. 提高开发效率： 开发者无需再为组件的资源加载而烦恼，可以更专注于业务逻辑的实现，而不必担心资源重复加载的问题。
5. 无缝集成： 作为 Composer 包，它能轻松集成到任何 Laravel 8+ 项目中，使用 Blade 指令的方式也符合 Laravel 开发者的习惯。

通过引入 digitallyhappy/assets，我们成功解决了 Laravel 应用中前端资源重复加载的痛点，将原本可能混乱不堪的页面资源管理变得井井有条。如果你正在为 Laravel 项目中的资源重复加载问题而头疼，不妨尝试一下这个优雅而实用的 Composer 包，它一定会让你的开发体验和应用性能都得到显著提升！

以上就是告别重复加载！如何使用digitallyhappy/assets优化Laravel页面资源管理的详细内容，更多请关注php中文网其它相关文章！