Skip to content

N
next.js

CoCo_Code_Op2 / next.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
N
next.js

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 6c9dd6c3 编写于 作者: P Prateek Bhatnagar 提交者： GitHub
浏览文件
操作

AMP compatibility for Font optimization (#16208) 

- Upgrades cssnano to 1.2.0
- Only removes whitespaces from downloaded font declarations
- Disables Font optimization for AMP pages
上级 3f35b473
隐藏空白更改
内联 并排
Showing with 79 addition and 19 deletion
packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts
浏览文件 @ 6c9dd6c3
......@@ -7,17 +7,26 @@ import {
} from '../../../next-server/server/font-utils'
// @ts-ignore
import BasicEvaluatedExpression from 'webpack/lib/BasicEvaluatedExpression'
import { process as minify } from 'cssnano-simple'
import postcss from 'postcss'
import minifier from 'cssnano-simple'
import { OPTIMIZED_FONT_PROVIDERS } from '../../../next-server/lib/constants'
const isWebpack5 = parseInt(webpack.version!) === 5
async function minifyCss(css: string): Promise<string> {
return new Promise((resolve) => {
minify(css, { map: false }).then((res) => {
resolve(res.css)
})
})
return new Promise((resolve) =>
postcss([
minifier({
excludeAll: true,
discardComments: true,
normalizeWhitespace: { exclude: false },
}),
])
.process(css, { from: undefined })
.then((res) => {
resolve(res.css)
})
)
}
export class FontStylesheetGatheringPlugin {
......
packages/next/next-server/lib/head.tsx
浏览文件 @ 6c9dd6c3
......@@ -136,7 +136,7 @@ function reduceComponents(
.reverse()
.map((c: React.ReactElement<any>, i: number) => {
const key = c.key || i
if (process.env.__NEXT_OPTIMIZE_FONTS) {
if (process.env.__NEXT_OPTIMIZE_FONTS && !props.inAmpMode) {
if (
c.type === 'link' &&
c.props['href'] &&
......
packages/next/package.json
浏览文件 @ 6c9dd6c3
......@@ -90,7 +90,7 @@
"chokidar": "2.1.8",
"crypto-browserify": "3.12.0",
"css-loader": "3.5.3",
"cssnano-simple": "1.0.7",
"cssnano-simple": "1.2.0",
"find-cache-dir": "3.3.1",
"jest-worker": "24.9.0",
"loader-utils": "2.0.0",
......
packages/next/pages/_document.tsx
浏览文件 @ 6c9dd6c3
......@@ -316,7 +316,7 @@ export class Head extends Component<
)
}
if (process.env.__NEXT_OPTIMIZE_FONTS) {
if (process.env.__NEXT_OPTIMIZE_FONTS && !inAmpMode) {
children = this.makeStylesheetInert(children)
}
......
test/integration/font-optimization/next.config.js 已删除 100644 → 0
浏览文件 @ 3f35b473
module.exports = { target: 'serverless', experimental: { optimizeFonts: true } }
test/integration/font-optimization/pages/amp.js 0 → 100644
浏览文件 @ 6c9dd6c3
import React from 'react'
const Page = () => {
return <div>Hi!</div>
}
export const config = { amp: true }
export default Page
test/integration/font-optimization/test/index.test.js
浏览文件 @ 6c9dd6c3
......@@ -73,6 +73,35 @@ function runTests() {
/<style data-href="https:\/\/fonts\.googleapis\.com\/css2\?family=Roboto:wght@700">.*<\/style>/
)
})
it('should skip this optimization for AMP pages', async () => {
const html = await renderViaHTTP(appPort, '/amp')
expect(await fsExists(builtPage('font-manifest.json'))).toBe(true)
expect(html).toContain(
'<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Voces">'
)
})
it('should minify the css', async () => {
const snapshotJson = JSON.parse(
await fs.readFile(join(__dirname, 'manifest-snapshot.json'), {
encoding: 'utf-8',
})
)
const testJson = JSON.parse(
await fs.readFile(builtPage('font-manifest.json'), { encoding: 'utf-8' })
)
const testCss = {}
testJson.forEach((fontDefinition) => {
testCss[fontDefinition.url] = fontDefinition.content
})
const snapshotCss = {}
snapshotJson.forEach((fontDefinition) => {
snapshotCss[fontDefinition.url] = fontDefinition.content
})
expect(testCss).toStrictEqual(snapshotCss)
})
}
describe('Font optimization for SSR apps', () => {
......
test/integration/font-optimization/test/manifest-snapshot.json 0 → 100644
浏览文件 @ 6c9dd6c3
[
{
"url": "https://fonts.googleapis.com/css2?family=Modak",
"content": "@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEsnME.woff) format('woff')}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMB-hR77LKVTy8.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF6,U+1CF8-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FB}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMO-hR77LKVTy8.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Modak';font-style:normal;font-weight:400;src:local('Modak'),url(https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMA-hR77LKV.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}"
},
{
"url": "https://fonts.googleapis.com/css?family=Voces",
"content": "@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDmk.woff) format('woff')}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PIDm_6pClI_ik.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Voces';font-style:normal;font-weight:400;src:local('Voces Regular'),local('Voces-Regular'),url(https://fonts.gstatic.com/s/voces/v10/-F6_fjJyLyU8d7PGDm_6pClI.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}"
},
{
"url": "https://fonts.googleapis.com/css2?family=Roboto:wght@700",
"content": "@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlvAA.woff) format('woff')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}"
}
]
yarn.lock
浏览文件 @ 6c9dd6c3
......@@ -6488,10 +6488,10 @@ cssnano-preset-simple@1.1.4:
dependencies:
postcss "^7.0.32"
cssnano-preset-simple@1.1.7:
version "1.1.7"
resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-1.1.7.tgz#38378118f156b3f4bf85c38a0b2fd06a1bdc7228"
integrity sha512-GVOJVQ1l5KI5sRaM9HOXCwYn78dmsLYoyJTYJcORhl9Tz44xDlP8Al6EvBdFIOvH6+wZlHcsMftlh1pwswuLeA==
cssnano-preset-simple@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-1.2.0.tgz#afcf13eb076e8ebd91c4f311cd449781c14c7371"
integrity sha512-zojGlY+KasFeQT/SnD/WqYXHcKddz2XHRDtIwxrWpGqGHp5IyLWsWFS3UW7pOf3AWvfkpYSRdxOSlYuJPz8j8g==
dependencies:
caniuse-lite "^1.0.30001093"
postcss "^7.0.32"
......@@ -6504,12 +6504,12 @@ cssnano-simple@1.0.5:
cssnano-preset-simple "1.1.4"
postcss "^7.0.32"
cssnano-simple@1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-1.0.7.tgz#a812571ee6ae25817434d4b926d5e83ea4b0e7dd"
integrity sha512-jjmSazE36Bl77zBcNQ9efcUdxQevKkrqkE5FqgHbcb3GQASnWrOU3PLF+DR3c7lDZxi1vtLvuJMtfL5QLkCGdw==
cssnano-simple@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-1.2.0.tgz#b8cc5f52c2a52e6513b4636d0da165ec9d48d327"
integrity sha512-pton9cZ70/wOCWMAbEGHO1ACsW1KggTB6Ikj7k71uOEsz6SfByH++86+WAmXjRSc9q/g9gxkpFP9bDX9vRotdA==
dependencies:
cssnano-preset-simple "1.1.7"
cssnano-preset-simple "1.2.0"
postcss "^7.0.32"
cssnano-util-get-arguments@^4.0.0:
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或