我的项目基于：
- Symfony / Webpack Encore软件包
- webfonts-loader
运行Lighthouse审核，提高绩效的第一个机会是：
考虑使用
<link rel=preload>优先分配资源 当前在页面加载中稍后请求的 ... fonts / app.icons.e5d7e11 .... woff
如何自动将带有rel =“ preload”的链接标记插入此文件？
如何使用Webpack Encore和webfonts-loader预加载字体？
•
问答
alarate 回答：如何使用Webpack Encore和webfonts-loader预加载字体？
Encore捆绑包会自动安装和配置Asset组件（如果使用Symfony Flex），然后您可以使用asset()来检索版本化的字体文件。
假设您已配置Webpack Encore生成文件到public/build/：
// In base.html.twig <head>:
<link rel="preload" href="{{ asset('build/fonts/some-font.woff2') }}" as="font" crossOrigin="anonymous" />
这将导致呈现以下标记：
<link rel="preload" href="/build/fonts/some-font.6f75f467.woff2" as="font" crossorigin="anonymous">
在内部，asset()使用Webpack生成的manifest.json。
您可以使用symfony / web-link软件包中的preload twig功能。 首先，使用
安装软件包composer require symfony/web-link
然后，在您的代码中，例如：
<link rel="stylesheet" href="{{ preload('/app.css',{ as: 'style' }) }}">
来源：https://symfony.com/doc/current/web_link.html
,如果您可以使用最新的 Webpack Encore，可以通过 webpack_encore.yaml 直接支持，只需在 preload:true 键下设置 webpack_encore:。
来源：https://github.com/symfony/webpack-encore-bundle
如果您有旧版本的 Encore，则需要按照另一个答案中的建议安装 web-link composer require symfony/web-link，并使用 encore 文件助手而不是典型的 encore 标签助手手动迭代 webpack 文件.
示例：
{% for file in encore_entry_css_files('my_entry_point') %}
<link rel="stylesheet" href="{{ preload(asset(file),{as: 'style'}) }}">
{% endfor %}
{% for file in encore_entry_js_files('my_entry_point') %}
<script src="{{ preload(asset(file),{as: 'script'}) }}"></script>
{% endfor %}
代替：
{{ encore_entry_link_tags('my_entry_point') }}
{{ encore_entry_script_tags('my_entry_point') }}