Improvements - Font optimizations (#16031)

Co-authored-by: NTim Neutkens <tim@timneutkens.nl>
Co-authored-by: NJoe Haddad <joe.haddad@zeit.co>

packages/next/build/webpack-config.ts

@@ -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

packages/next/build/webpack/plugins/font-stylesheet-gathering-plugin.ts

-// 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<string> {
+  return new Promise((resolve) => {
+    minify(css, { map: false }).then((res) => {
+      resolve(res.css)
+    })
+  })
 }
 
 export class FontStylesheetGatheringPlugin {
@@ -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, '  ')
+            )
+          }
+        )
+      })
+    }
   }
 }
 

packages/next/next-server/lib/post-process.ts

@@ -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

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,
     }