Skip to content

Commit

Permalink
Improvements - Font optimizations (#16031)
Browse files Browse the repository at this point in the history
Co-authored-by: Tim Neutkens <[email protected]>
Co-authored-by: Joe Haddad <[email protected]>
  • Loading branch information
3 people authored Aug 10, 2020
1 parent bd70354 commit 2ddfd84
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 18 deletions.
2 changes: 1 addition & 1 deletion packages/next/build/webpack-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -929,7 +929,7 @@ export default async function getBaseWebpackConfig(
config.experimental.reactMode
),
'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
config.experimental.optimizeFonts
config.experimental.optimizeFonts && !dev
),
'process.env.__NEXT_OPTIMIZE_IMAGES': JSON.stringify(
config.experimental.optimizeImages
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { NodePath } from 'ast-types/lib/node-path'
import { compilation as CompilationType, Compiler } from 'webpack'
import webpack, { compilation as CompilationType, Compiler } from 'webpack'
import { namedTypes } from 'ast-types'
import { RawSource } from 'webpack-sources'
import {
Expand All @@ -9,10 +7,17 @@ import {
} from '../../../next-server/server/font-utils'
// @ts-ignore
import BasicEvaluatedExpression from 'webpack/lib/BasicEvaluatedExpression'
import { process as minify } from 'cssnano-simple'
import { OPTIMIZED_FONT_PROVIDERS } from '../../../next-server/lib/constants'

interface VisitorMap {
[key: string]: (path: NodePath) => void
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)
})
})
}

export class FontStylesheetGatheringPlugin {
Expand Down Expand Up @@ -132,19 +137,41 @@ export class FontStylesheetGatheringPlugin {

this.manifestContent = []
for (let promiseIndex in fontDefinitionPromises) {
const css = await fontDefinitionPromises[promiseIndex]
const content = await minifyCss(css)
this.manifestContent.push({
url: this.gatheredStylesheets[promiseIndex],
content: await fontDefinitionPromises[promiseIndex],
content,
})
}
compilation.assets['font-manifest.json'] = new RawSource(
JSON.stringify(this.manifestContent, null, ' ')
)
if (!isWebpack5) {
compilation.assets['font-manifest.json'] = new RawSource(
JSON.stringify(this.manifestContent, null, ' ')
)
}
modulesFinished()
}
)
cb()
})

if (isWebpack5) {
compiler.hooks.make.tap(this.constructor.name, (compilation) => {
// @ts-ignore TODO: Remove ignore when webpack 5 is stable
compilation.hooks.processAssets.tap(
{
name: this.constructor.name,
// @ts-ignore TODO: Remove ignore when webpack 5 is stable
stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
},
(assets: any) => {
assets['font-manifest.json'] = new RawSource(
JSON.stringify(this.manifestContent, null, ' ')
)
}
)
})
}
}
}

Expand Down
5 changes: 1 addition & 4 deletions packages/next/next-server/lib/post-process.ts
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware {
const fontContent = options.getFontDefinition(url)
result = result.replace(
'</head>',
`<style data-href="${url}">${fontContent.replace(
/(\n)/g,
''
)}</style></head>`
`<style data-href="${url}">${fontContent}</style></head>`
)
}
return result
Expand Down
9 changes: 5 additions & 4 deletions packages/next/next-server/server/next-server.ts
Original file line number Diff line number Diff line change
Expand Up @@ -169,10 +169,11 @@ export default class Server {
customServer: customServer === true ? true : undefined,
ampOptimizerConfig: this.nextConfig.experimental.amp?.optimizer,
basePath: this.nextConfig.basePath,
optimizeFonts: this.nextConfig.experimental.optimizeFonts,
fontManifest: this.nextConfig.experimental.optimizeFonts
? requireFontManifest(this.distDir, this._isLikeServerless)
: null,
optimizeFonts: this.nextConfig.experimental.optimizeFonts && !dev,
fontManifest:
this.nextConfig.experimental.optimizeFonts && !dev
? requireFontManifest(this.distDir, this._isLikeServerless)
: null,
optimizeImages: this.nextConfig.experimental.optimizeImages,
}

Expand Down

0 comments on commit 2ddfd84

Please sign in to comment.