rosswintle/laravel-asset-cache

Laravel项目中包含非层次化JavaScript和CSS资产的本地缓存

v3.0 2022-04-03 19:25 UTC

This package is auto-updated.

Last update: 2024-09-30 01:49:43 UTC


README

一个自动从CDN下载CSS和JS资产以便本地托管的Laravel包。

我为什么要这样做? <- 长篇阅读!

安装

使用以下版本

  • v1.x 用于Laravel 5.7, 5.8, 6.0和7.0在PHP7上
  • v2.x 用于Laravel 8.x和PHP 8.0
  • v3.x 用于Laravel 8.x/9.x和PHP 8.1/8.1

使用composer安装包

composer require rosswintle/laravel-asset-cache

缓存的资源存储在并从public文件存储"磁盘"中提供服务。您需要按照Laravel文档使用以下方法将您的public/storage目录符号链接到storage/app/public

php artisan storage:link

务必在所有环境中这样做:本地、预发布和生成。

使用方法

Blade指令

如果您只想为JavaScript资产添加一个<script>标签,则可以使用Blade指令

@jscript(<package>, <version>, <file>)
  • package是npm包的名称(目前仅通过jsdelivr.net支持npm)
  • version是版本约束,例如1.9.0。假设语义版本。您可以使用1.9来获取最新的1.9.x版本,如jsdelivr文档中所述,但生产环境中不推荐这样做
  • file是您想要相对于包根目录的资产路径和文件名(包括扩展名)。例如dist/alpine.js

示例

@jscript('alpinejs', '1.9', 'dist/alpine.js')

方法调用

更灵活的方法是使用LaravelAssetCache类的静态cachedAssetUrl()方法,如下通过外观访问

<script defer src="{{ LaravelAssetCache::cachedAssetUrl(<package>, <version>, <file>) }}"></script>

参数定义与上面Blade指令中的相同。

这更灵活,因为您可以为引用资产的标签添加自己的属性。

<script defer src="{{ LaravelAssetCache::cachedAssetUrl('jquery', '3.4', 'dist/jquery.min.js') }}"></script>

您也可以为CSS使用此方法

<link rel="stylesheet" href="{{ LaravelAssetCache::cachedAssetUrl('tailwindcss', '1.1.4', 'dist/tailwind.min.css') }}">

这是做什么的?

使用Blade指令或cachedAssetUrl方法

  • 从jsdelivr.net下载资产
  • 将其缓存在您的应用public目录中
  • 返回缓存的本地资产的URL

这解决了什么问题?

我的博客上有一个完整的解释

如果您想在本地上托管资源,则无需手动下载资源并将其包含到项目中。

您可能出于各种原因想要这样做,例如避免用户被跟踪,避免依赖于第三方CDN,并且还有可能带来性能上的好处。

我还在致力于放弃npm并从简单的项目中构建构建过程,因此这一部分的自动化似乎很有用。

如果您敢指定一个不精确的版本约束,例如仅为1.9,您还可以获取依赖项的最新版本而无需做任何事情!但是所有大型CDN都建议不要这样做,因为它可能会破坏您的网站,所以请务必谨慎使用,并在生产环境中避免使用!!

兼容性

此包是为Laravel 6.x版本构建和测试的,但应该可以在更老和更新的版本上工作。

请注意,包自动发现仅在Laravel 5.5及以上版本中工作。在较旧版本中,您需要手动添加服务提供者和别名。我不提供说明,因为您应该使用更新的Laravel。

限制

这是我第一个公开的包。可能会有各种各样的问题!请多多包涵。

我尚未在大型文件上测试过,但它可以处理73kb的压缩TailwindCSS。

目前仅适用于npm包,并从cdn.jsdelivr.net拉取。

下载目前是同步的,因此如果最终用户遇到缓存操作,他们将看到页面加载速度较慢。

测试

我不是一个专家测试人员,所以我测试了包的一些方面,但没有测试CacheStorage的使用。

如果您知道如何,请随时贡献测试。

路线图

  • 更好地使用Guzzle - 它可以直接发送到文件吗?
  • 配置,例如缓存持续时间或使用不同的CDN。
  • 自动发现包的"main"文件。
  • 自动异步缓存刷新(这是可能的吗?)
  • 添加一些轻微的随机化(随机加减几分钟)的缓存时间,以便一个人不会在一次请求中重新缓存所有资源。
  • 用于异步缓存刷新的cron作业/cli。

致谢