使用 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.json
和 manifest.json
。
从 entrypoints.json
和 manifest.json
加载资源
每当您运行 Encore 时,都会在您的输出文件夹(默认位置:public/build/
)中生成两个配置文件:entrypoints.json
和 manifest.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">
这项工作,包括代码示例,根据 Creative Commons BY-SA 3.0 许可协议获得许可。