spekkionu/assetcachebuster

使用唯一的哈希值前缀资产URL,这将允许浏览器缓存中的资产文件失效。

v3.4.0 2020-09-10 03:49 UTC

This package is auto-updated.

Last update: 2024-08-28 00:02:22 UTC


README

Build Status Scrutinizer Quality Score Code Coverage

资产缓存破坏者

此包使用MD5哈希值前缀资产URL,以便更改哈希值导致所有资产文件的URL更改。这迫使浏览器在浏览器缓存到期之前下载资产文件的新版本。

当使用设置文件远期过期头的CDN时,这特别有用。

它适用于任何静态文件,如样式表、JavaScript文件和图像。

安装

2.x分支仅与Laravel 5.x兼容。如果您需要Laravel 4.x兼容性,请使用1.x分支。

使用Composer将spekkionu\assetcachebuster添加为依赖项

composer require spekkionu\assetcachebuster

如果您已禁用自动包发现,您需要将服务提供程序注册到应用程序中。打开config/app.php并找到providers键。

'providers' => array(
    Spekkionu\Assetcachebuster\AssetcachebusterServiceProvider::class,
)

如果您已禁用自动包发现,您需要注册门面以生成资产URL。您可以通过config/app.php文件的aliases键注册门面。

'aliases' => array(
    'Asset' => Spekkionu\Assetcachebuster\Facades\Cachebuster::class
)

其他包希望注册资产门面。如果是这种情况,您可以更改Asset键以避免冲突。

为了使资产URL功能,需要在apache .htaccess文件中添加以下内容。在Laravel重写规则之前将以下内容添加到您的.htaccess文件中

# ------------------------------------------------------------------------------
# | Filename-based cache busting                                               |
# ------------------------------------------------------------------------------

# Rewrite assets/hash/file.js to assets/file.js
<IfModule mod_rewrite.c>
    RewriteEngine On

    # Remove prefix from asset files
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^[a-f0-9]{32}/(.*)$ $1 [L]

</IfModule>

对于Nginx,将以下内容添加到您的虚拟主机文件中

# ------------------------------------------------------------------------------
# | Filename-based cache busting                                               |
# ------------------------------------------------------------------------------
# Rewrite assets/hash/file.js to assets/file.js
location ~* "^\/[a-f0-9]{32}(\/*\.*(.*))$" {
    try_files $uri $1;
}

配置

为了生成新的哈希值以使缓存失效,您必须通过运行以下Artisan命令发布包配置。

php artisan vendor:publish --provider="Spekkionu\Assetcachebuster\AssetcachebusterServiceProvider" --tag=config

这将创建一个配置文件在config/assetcachebuster.php使用此文件来配置包。

将配置中的enabled标志设置为true以使资产URL前缀。

用法

对于您想要能够缓存的任何资产URL,您必须使用Asset::url($url)门面而不是直接输出URL。例如,如果您想要链接到位于/css/stylesheet.css的样式表,您会在视图中添加以下内容

<link rel="stylesheet" href="<?php echo Asset::url('/css/stylesheet.css');?>">

如果您使用blade模板,以下将起作用。

<link rel="stylesheet" href="{{ Asset::url('/css/stylesheet.css') }}">

使缓存失效

要生成新的哈希值以使缓存失效并强制浏览器下载资产文件的新版本,请运行以下Artisan命令。

php artisan assetcachebuster:generate

这将生成新的哈希值并更新配置文件。重要的是您不要手动更改配置文件中的哈希行,否则此命令可能不再工作。如果您必须手动更新哈希值,请确保它是一个有效的MD5哈希值,否则在生成哈希URL时将抛出异常。MD5哈希是仅包含字符0-9和a-f的32字符字符串。

与CDN一起使用

要使用CDN(如Cloudfront),请在配置中将cdn键设置为cdn URL。

现在,任何资产URL都将以cdn URL开头。

这仅适用于支持来源拉取的CDN,因为它不会将任何资产文件推送到CDN。

设置远期过期头

为了真正从包中获得好处,资产文件应设置远期过期头。

为此,请将以下内容添加到您的apache .htaccess文件中。

如果您正在使用CDN,可能需要配置CDN以设置这些头部信息。

# From the html5 boilerplate .htaccess
# https://raw.github.com/h5bp/html5-boilerplate/master/.htaccess

# ------------------------------------------------------------------------------
# | ETag removal                                                               |
# ------------------------------------------------------------------------------

# Since we're sending far-future expires headers (see below), ETags can
# be removed: http://developer.yahoo.com/performance/rules.html#etags.

# `FileETag None` is not enough for every server.
<IfModule mod_headers.c>
    Header unset ETag
</IfModule>

FileETag None

# ------------------------------------------------------------------------------
# | Expires headers (for better cache control)                                 |
# ------------------------------------------------------------------------------

# The following expires headers are set pretty far in the future. If you don't
# control versioning with filename-based cache busting, consider lowering the
# cache time for resources like CSS and JS to something like 1 week.

<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS
    ExpiresByType text/css                              "access plus 1 year"

  # Data interchange
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

  # Favicon (cannot be renamed!) and cursor images
    ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML components (HTCs)
    ExpiresByType text/x-component                      "access plus 1 month"

  # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

  # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"

  # Manifest files
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

  # Media
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

  # Web feeds
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

  # Web fonts
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"

</IfModule>

对于Nginx,将以下内容添加到您的虚拟主机文件中

# ------------------------------------------------------------------------------
# | Expires headers (for better cache control)                                 |
# ------------------------------------------------------------------------------

# Sets the expires header to 1 year in the furture for javascript, css, and images.

location ~* .(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    log_not_found off;
}