如何使用Webpack Encore和webfonts-加载器预加载字体？
我的项目建立在以下基础之上：
- Symfony / Webpack Encore丛
- 网页装载机
进行灯塔审计，提高绩效的第一个机会是：
考虑使用
<link rel=preload>对当前在页面加载.fonts/app.icons.e5d7e11.woff中请求的资源进行排序。
我如何自动插入链接标签与rel=“预加载”到这个文件？
回答 3
Stack Overflow用户
发布于 2021-01-18 22:58:21
如果您可以使用最新的Webpack Encore，这是直接支持通过webpack_encore.yaml，只需设置preload: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，您将需要安装web链接composer require symfony/web-link建议在另一个答案，并手动迭代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 %}Stack Overflow用户
发布于 2020-12-08 11:00:53
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。
Stack Overflow用户
发布于 2020-10-19 14:56:40
您可以使用symfony/web链接包中的预加载小枝函数。首先，用
composer require symfony/web-link然后，在您的代码中，例如：
<link rel="stylesheet" href="{{ preload('/app.css', { as: 'style' }) }}">来源：link.html
https://stackoverflow.com/questions/59937829
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号