跳到内容

使用 Webpack Encore 进行资源版本控制

编辑此页

是否厌倦了部署后浏览器缓存旧版本的资源?通过调用 enableVersioning(),每个文件名现在都将包含一个哈希值,该哈希值在文件内容更改时发生变化(例如,app.123abc.js 而不是 app.js)。这允许您使用激进的缓存策略(例如,遥远的未来的 Expires),因为每当文件更改时,其哈希值都会更改,从而忽略任何现有缓存。

1
2
3
4
5
6
7
// webpack.config.js

  // ...
  Encore
      .setOutputPath('public/build/')
      // ...
+     .enableVersioning()

为了链接到这些资源,Encore 创建了两个文件 entrypoints.jsonmanifest.json

entrypoints.jsonmanifest.json 加载资源

每当您运行 Encore 时,都会在您的输出文件夹(默认位置:public/build/)中生成两个配置文件:entrypoints.jsonmanifest.json。每个文件都很相似,并且包含最终版本化文件名的映射。

第一个文件 – entrypoints.json – 由 encore_entry_script_tags()encore_entry_link_tags() Twig 助手使用。如果您正在使用这些助手,那么您的 CSS 和 JavaScript 文件将使用新的版本化文件名呈现。如果您没有使用 Symfony,您的应用程序将需要以类似的方式读取此文件。

manifest.json 文件仅用于获取其他文件的版本化文件名,例如字体文件或图像文件(尽管它也包含有关 CSS 和 JavaScript 文件的信息)

1
2
3
4
5
{
    "build/app.js": "/build/app.123abc.js",
    "build/dashboard.css": "/build/dashboard.a4bf2d.css",
    "build/images/logo.png": "/build/images/logo.3eed42.png"
}

在您的应用程序中,如果您希望能够链接(例如,通过 img 标签)到某些资源,则需要读取此文件。如果您正在使用 Symfony,只需激活 json_manifest_file 版本控制策略

1
2
3
4
5
# this file is added automatically when installing Encore with Symfony Flex
# config/packages/assets.yaml
framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

就是这样!请务必像往常一样将每个路径包裹在 Twig asset() 函数中

1
<img src="{{ asset('build/images/logo.png') }}" alt="ACME logo">

故障排除

资源版本控制和部署

当部署新版本的应用程序时,版本化资源将包含新的哈希值,从而使以前的资源不再可用。当使用滚动更新、蓝绿部署或符号链接策略部署应用程序时,这通常不是问题。

然而,即使应用这些技术,也可能存在一段时间,某些公共/私有缓存的响应请求先前版本的资源。如果您的应用程序无法承受提供任何损坏的资源,最好的解决方案是使用 CDN(或定制服务),将所有旧资源缓存一段时间。

这项工作,包括代码示例,根据 Creative Commons BY-SA 3.0 许可协议获得许可。
目录
    版本