如何使用 Webpack Encore 和 webfonts-loader 预加载字体？答案

【问题标题】：How to preload a font with with Webpack Encore and webfonts-loader?如何使用 Webpack Encore 和 webfonts-loader 预加载字体？
【发布时间】：2020-01-27 19:42:22
【问题描述】：

我的项目建立在：

Symfony / Webpack Encore 包
webfonts-loader

运行 Lighthouse 审计，提高绩效的第一个机会是：

考虑使用<link rel=preload> 来确定获取资源的优先级当前在页面加载后期请求的 ...fonts/app.icons.e5d7e11....woff

如何自动插入带有 rel="preload" 的链接标签到这个文件？

【问题讨论】：

标签： webfonts preload webpack-encore

【解决方案1】：

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。

【讨论】：

【解决方案2】：

如果你可以使用最新的 Webpack Encore，这通过 webpack_encore.yaml 直接支持，只需在 webpack_encore: 键下设置 preload:true。

来源：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') }}

【讨论】：

【解决方案3】：

你可以使用 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

【讨论】：

您将如何预加载 '...fonts/app.icons.e5d7e11....woff'（来自您的问题）？ parts 来自 webpack，所以你不能只使用 'app.icons.woff'。