在现代 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()：
<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 带来的好处是显而易见的：
- 优化页面加载性能： 减少了不必要的网络请求，尤其是在大型应用中，这能显著提升用户体验。
- 避免资源冲突： 确保同一脚本或样式只被加载一次，有效避免了因重复加载导致的 JavaScript 变量污染、函数重复定义或 CSS 样式优先级混乱等问题。
- 更干净的 HTML 源码： 告别冗余的
<script></script>和<link>标签，让页面的 dom 结构更加简洁，方便调试和维护。 - 提高开发效率： 开发者无需再为组件的资源加载而烦恼，可以更专注于业务逻辑的实现，而不必担心资源重复加载的问题。
- 无缝集成： 作为 Composer 包，它能轻松集成到任何 Laravel 8+ 项目中，使用 Blade 指令的方式也符合 Laravel 开发者的习惯。
通过引入 digitallyhappy/assets，我们成功解决了 Laravel 应用中前端资源重复加载的痛点，将原本可能混乱不堪的页面资源管理变得井井有条。如果你正在为 Laravel 项目中的资源重复加载问题而头疼，不妨尝试一下这个优雅而实用的 Composer 包，它一定会让你的开发体验和应用性能都得到显著提升！