Fix: fallback font tag repetition (#20382)
partially fixes #20341 - Makes sure that font fallback does not get repeated for every request. - Adds a test for the same.
This commit is contained in:
parent
5324e8b6ee
commit
16e9de3565
2 changed files with 15 additions and 5 deletions
|
@ -139,7 +139,11 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
|
||||||
}
|
}
|
||||||
for (const key in this.fontDefinitions) {
|
for (const key in this.fontDefinitions) {
|
||||||
const url = this.fontDefinitions[key]
|
const url = this.fontDefinitions[key]
|
||||||
if (result.indexOf(`<style data-href="${url}">`) > -1) {
|
const fallBackLinkTag = `<link rel="stylesheet" href="${url}"/>`
|
||||||
|
if (
|
||||||
|
result.indexOf(`<style data-href="${url}">`) > -1 ||
|
||||||
|
result.indexOf(fallBackLinkTag) > -1
|
||||||
|
) {
|
||||||
// The font is already optimized and probably the response is cached
|
// The font is already optimized and probably the response is cached
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
|
@ -148,10 +152,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
|
||||||
/**
|
/**
|
||||||
* In case of unreachable font definitions, fallback to default link tag.
|
* In case of unreachable font definitions, fallback to default link tag.
|
||||||
*/
|
*/
|
||||||
result = result.replace(
|
result = result.replace('</head>', `${fallBackLinkTag}</head>`)
|
||||||
'</head>',
|
|
||||||
`<link rel="stylesheet" href="${url}"/></head>`
|
|
||||||
)
|
|
||||||
} else {
|
} else {
|
||||||
result = result.replace(
|
result = result.replace(
|
||||||
'</head>',
|
'</head>',
|
||||||
|
|
|
@ -184,4 +184,13 @@ describe('Font optimization for unreachable font definitions.', () => {
|
||||||
'<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
|
'<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
it('should not inline multiple fallback link tag', async () => {
|
||||||
|
await renderViaHTTP(appPort, '/stars')
|
||||||
|
// second render to make sure that the page is requested more than once.
|
||||||
|
const html = await renderViaHTTP(appPort, '/stars')
|
||||||
|
expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
|
||||||
|
expect(html).not.toContain(
|
||||||
|
'<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Voces"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Voces"/><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@700"/>'
|
||||||
|
)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue