From 8113795327a580f2e996a9798d4322bb81d866f8 Mon Sep 17 00:00:00 2001 From: Prateek Bhatnagar Date: Sun, 9 Aug 2020 21:26:49 -0700 Subject: [PATCH 1/4] webpack 5 compatibility and minification at build time --- .../font-stylesheet-gathering-plugin.ts | 46 +++++++++++++++---- packages/next/next-server/lib/post-process.ts | 5 +- 2 files changed, 38 insertions(+), 13 deletions(-) diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts index eaa224852d156..e891edb4cd4bd 100644 --- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts +++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts @@ -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 { @@ -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 { + return new Promise((resolve) => { + minify(css, { map: false }).then((res) => { + resolve(res.css) + }) + }) } export class FontStylesheetGatheringPlugin { @@ -132,19 +137,42 @@ export class FontStylesheetGatheringPlugin { this.manifestContent = [] for (let promiseIndex in fontDefinitionPromises) { + const css = await fontDefinitionPromises[promiseIndex] + const content = await minifyCss(css) + console.log({ content }) 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, ' ') + ) + } + ) + }) + } } } diff --git a/packages/next/next-server/lib/post-process.ts b/packages/next/next-server/lib/post-process.ts index 7917c9b7dbcdf..9021c95788459 100644 --- a/packages/next/next-server/lib/post-process.ts +++ b/packages/next/next-server/lib/post-process.ts @@ -142,10 +142,7 @@ class FontOptimizerMiddleware implements PostProcessMiddleware { const fontContent = options.getFontDefinition(url) result = result.replace( '', - `` + `` ) } return result From bc8f9d9cacc680965af8cf3db6d0f15390bde0e0 Mon Sep 17 00:00:00 2001 From: Prateek Bhatnagar Date: Sun, 9 Aug 2020 21:31:35 -0700 Subject: [PATCH 2/4] disable optimizeFonts for dev --- packages/next/next-server/server/next-server.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/next/next-server/server/next-server.ts b/packages/next/next-server/server/next-server.ts index 8a746d249495e..2cb9a6e79663f 100644 --- a/packages/next/next-server/server/next-server.ts +++ b/packages/next/next-server/server/next-server.ts @@ -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, } From f42905dd30b904d7cee5519d55541d2512a146bc Mon Sep 17 00:00:00 2001 From: Prateek Bhatnagar Date: Sun, 9 Aug 2020 22:46:23 -0700 Subject: [PATCH 3/4] disabling font optimizations for dev server --- packages/next/build/webpack-config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 4f15fd19d4157..41db97bb178f0 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -920,7 +920,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 From 3401ca20e51237483125fd01873bd2f8852cc574 Mon Sep 17 00:00:00 2001 From: Prateek Bhatnagar Date: Mon, 10 Aug 2020 00:47:35 -0700 Subject: [PATCH 4/4] Update packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts Co-authored-by: Tim Neutkens --- .../build/webpack/plugins/font-stylesheet-gathering-plugin.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts index e891edb4cd4bd..1a25c61f37dca 100644 --- a/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts +++ b/packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts @@ -139,7 +139,6 @@ export class FontStylesheetGatheringPlugin { for (let promiseIndex in fontDefinitionPromises) { const css = await fontDefinitionPromises[promiseIndex] const content = await minifyCss(css) - console.log({ content }) this.manifestContent.push({ url: this.gatheredStylesheets[promiseIndex], content,