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

Question

我的项目建立在：

• Symfony / Webpack Encore 包
• webfonts-loader

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

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

如何将带有 rel="preload" 的 Link 标签自动插入到此文件中？

Answer 1

如果你可以使用最新的Webpack Encore，这是通过webpack_encore.yaml直接支持的，只需在keypreload:true下设置即可webpack_encore:。在这种情况下，您可以使用标准辅助方法。

例子：

{{ encore_entry_link_tags('my_entry_point') }}
{{ encore_entry_script_tags('my_entry_point') }}

来源： https: //github.com/symfony/webpack-encore-bundle

但是，如果您有旧版本的 Encore，则需要composer require symfony/web-link按照另一个答案中的建议安装 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 %}

Answer 2

您可以使用 symfony/web-link 包中的预加载 twig 函数。首先，安装软件包

composer require symfony/web-link

然后，在您的代码中，例如：

<link rel="stylesheet" href="{{ preload('/app.css', { as: 'style' }) }}">

来源： https: //symfony.com/doc/current/web_link.html