gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 13:40:36 25 4
gpt4 key购买 nike

我的项目建立在:

  • Symfony/Webpack Encore 包
  • webfonts-loader

  • 运行 Lighthouse 审计,提高性能的第一个机会是:

    Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load ...fonts/app.icons.e5d7e11....woff



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

    最佳答案

    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。

    关于webfonts - 如何使用 Webpack Encore 和 webfonts-loader 预加载字体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59937829/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com