Font optimizations

packages/next/build/webpack-config.ts

@@ -52,7 +52,7 @@ import WebpackConformancePlugin, {
   ReactSyncScriptsConformanceCheck,
 } from './webpack/plugins/webpack-conformance-plugin'
 import { WellKnownErrorsPlugin } from './webpack/plugins/wellknown-errors-plugin'
-
+import FontStylesheetGatheringPlugin from './webpack/plugins/font-stylesheet-gathering-plugin'
 type ExcludesFalse = <T>(x: T | false) => x is T
 
 const isWebpack5 = parseInt(webpack.version!) === 5
@@ -862,6 +862,9 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_REACT_MODE': JSON.stringify(
           config.experimental.reactMode
         ),
+        'process.env.__NEXT_OPTIMIZE_FONTS': JSON.stringify(
+          config.experimental.optimizeFonts
+        ),
         'process.env.__NEXT_SCROLL_RESTORATION': JSON.stringify(
           config.experimental.scrollRestoration
         ),
@@ -967,6 +970,10 @@ export default async function getBaseWebpackConfig(
               inputChunkName.replace(/\.js$/, '.module.js'),
           })
         })(),
+      config.experimental.optimizeFonts &&
+        !dev &&
+        isServer &&
+        new FontStylesheetGatheringPlugin(),
       config.experimental.conformance &&
         !isWebpack5 &&
         !dev &&

packages/next/build/webpack/loaders/next-serverless-loader.ts

@@ -6,6 +6,7 @@ import { loader } from 'webpack'
 import { API_ROUTE } from '../../../lib/constants'
 import {
   BUILD_MANIFEST,
+  FONT_MANIFEST,
   REACT_LOADABLE_MANIFEST,
   ROUTES_MANIFEST,
 } from '../../../next-server/lib/constants'
@@ -56,6 +57,10 @@ const nextServerlessLoader: loader.Loader = function () {
     '/'
   )
   const routesManifest = join(distDir, ROUTES_MANIFEST).replace(/\\/g, '/')
+  const fontManifest = join(distDir, 'serverless', FONT_MANIFEST).replace(
+    /\\/g,
+    '/'
+  )
 
   const escapedBuildId = escapeRegexp(buildId)
   const pageIsDynamicRoute = isDynamicRoute(page)
@@ -264,7 +269,7 @@ const nextServerlessLoader: loader.Loader = function () {
     }
     const {parse} = require('url')
     const {parse: parseQs} = require('querystring')
-    const {renderToHTML} = require('next/dist/next-server/server/render');
+    const { renderToHTML } = require('next/dist/next-server/server/render');
     const { tryGetPreviewData } = require('next/dist/next-server/server/api-utils');
     const {sendHTML} = require('next/dist/next-server/server/send-html');
     const {sendPayload} = require('next/dist/next-server/server/send-payload');
@@ -273,6 +278,7 @@ const nextServerlessLoader: loader.Loader = function () {
     const Document = require('${absoluteDocumentPath}').default;
     const Error = require('${absoluteErrorPath}').default;
     const App = require('${absoluteAppPath}').default;
+
     ${dynamicRouteImports}
     ${rewriteImports}
 
@@ -417,6 +423,11 @@ const nextServerlessLoader: loader.Loader = function () {
         const previewData = tryGetPreviewData(req, res, options.previewProps)
         const isPreviewMode = previewData !== false
 
+        if (process.env.__NEXT_OPTIMIZE_FONTS) {
+          renderOpts.optimizeFonts = true
+          renderOpts.fontManifest = require('${fontManifest}')
+          process.env['__NEXT_OPTIMIZE_FONT'+'S'] = true
+        }
         let result = await renderToHTML(req, res, "${page}", Object.assign({}, getStaticProps ? { ...(parsedUrl.query.amp ? { amp: '1' } : {}) } : parsedUrl.query, nowParams ? nowParams : params, _params, isFallback ? { __nextFallback: 'true' } : {}), renderOpts)
 
         if (!renderMode) {

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

@@ -0,0 +1,141 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { NodePath } from 'ast-types/lib/node-path'
+import { compilation as CompilationType, Compiler } from 'webpack'
+import { namedTypes } from 'ast-types'
+import { RawSource } from 'webpack-sources'
+import {
+  getFontDefinitionFromNetwork,
+  FontManifest,
+} from '../../../next-server/server/font-utils'
+// @ts-ignore
+import BasicEvaluatedExpression from 'webpack/lib/BasicEvaluatedExpression'
+import { OPTIMIZED_FONT_PROVIDERS } from '../../../next-server/lib/constants'
+
+interface VisitorMap {
+  [key: string]: (path: NodePath) => void
+}
+
+export default class FontStylesheetGatheringPlugin {
+  compiler?: Compiler
+  gatheredStylesheets: Array<string> = []
+
+  private parserHandler = (
+    factory: CompilationType.NormalModuleFactory
+  ): void => {
+    const JS_TYPES = ['auto', 'esm', 'dynamic']
+    // Do an extra walk per module and add interested visitors to the walk.
+    for (const type of JS_TYPES) {
+      factory.hooks.parser
+        .for('javascript/' + type)
+        .tap(this.constructor.name, (parser: any) => {
+          /**
+           * Webpack fun facts:
+           * `parser.hooks.call.for` cannot catch calls for user defined identifiers like `__jsx`
+           * it can only detect calls for native objects like `window`, `this`, `eval` etc.
+           * In order to be able to catch calls of variables like `__jsx`, first we need to catch them as
+           * Identifier and then return `BasicEvaluatedExpression` whose `id` and `type` webpack matches to
+           * invoke hook for call.
+           * See: https://github.com/webpack/webpack/blob/webpack-4/lib/Parser.js#L1931-L1932.
+           */
+          parser.hooks.evaluate
+            .for('Identifier')
+            .tap(this.constructor.name, (node: namedTypes.Identifier) => {
+              // We will only optimize fonts from first party code.
+              if (parser?.state?.module?.resource.includes('node_modules')) {
+                return
+              }
+              return node.name === '__jsx'
+                ? new BasicEvaluatedExpression()
+                    //@ts-ignore
+                    .setRange(node.range)
+                    .setExpression(node)
+                    .setIdentifier('__jsx')
+                : undefined
+            })
+
+          parser.hooks.call
+            .for('__jsx')
+            .tap(this.constructor.name, (node: namedTypes.CallExpression) => {
+              if (node.arguments.length !== 2) {
+                // A font link tag has only two arguments rel=stylesheet and href='...'
+                return
+              }
+              if (!isNodeCreatingLinkElement(node)) {
+                return
+              }
+
+              // node.arguments[0] is the name of the tag and [1] are the props.
+              const propsNode = node.arguments[1] as namedTypes.ObjectExpression
+              const props: { [key: string]: string } = {}
+              propsNode.properties.forEach((prop) => {
+                if (prop.type !== 'Property') {
+                  return
+                }
+                if (
+                  prop.key.type === 'Identifier' &&
+                  prop.value.type === 'Literal'
+                ) {
+                  props[prop.key.name] = prop.value.value as string
+                }
+              })
+              if (
+                !props.rel ||
+                props.rel !== 'stylesheet' ||
+                !props.href ||
+                !OPTIMIZED_FONT_PROVIDERS.some((url) =>
+                  props.href.startsWith(url)
+                )
+              ) {
+                return false
+              }
+
+              this.gatheredStylesheets.push(props.href)
+            })
+        })
+    }
+  }
+
+  public apply(compiler: Compiler) {
+    this.compiler = compiler
+    compiler.hooks.normalModuleFactory.tap(
+      this.constructor.name,
+      this.parserHandler
+    )
+    compiler.hooks.make.tapAsync(this.constructor.name, (compilation, cb) => {
+      compilation.hooks.finishModules.tapAsync(
+        this.constructor.name,
+        async (_: any, modulesFinished: Function) => {
+          const fontDefinitionPromises = this.gatheredStylesheets.map((url) =>
+            getFontDefinitionFromNetwork(url)
+          )
+          let manifestContent: FontManifest = []
+
+          for (let promiseIndex in fontDefinitionPromises) {
+            manifestContent.push({
+              url: this.gatheredStylesheets[promiseIndex],
+              content: await fontDefinitionPromises[promiseIndex],
+            })
+          }
+          compilation.assets['font-manifest.json'] = new RawSource(
+            JSON.stringify(manifestContent, null, '  ')
+          )
+          modulesFinished()
+        }
+      )
+      cb()
+    })
+  }
+}
+
+function isNodeCreatingLinkElement(node: namedTypes.CallExpression) {
+  const callee = node.callee as namedTypes.Identifier
+  if (callee.type !== 'Identifier') {
+    return false
+  }
+  const componentNode = node.arguments[0] as namedTypes.Literal
+  if (componentNode.type !== 'Literal') {
+    return false
+  }
+  // Next has pragma: __jsx.
+  return callee.name === '__jsx' && componentNode.value === 'link'
+}

packages/next/export/index.ts

@@ -388,6 +388,7 @@ export default async function exportApp(
         subFolders,
         buildExport: options.buildExport,
         serverless: isTargetLikeServerless(nextConfig.target),
+        optimizeFonts: nextConfig.experimental.optimizeFonts,
       })
 
       for (const validation of result.ampValidations || []) {

packages/next/export/worker.ts

@@ -13,6 +13,8 @@ import 'next/dist/next-server/server/node-polyfill-fetch'
 import { IncomingMessage, ServerResponse } from 'http'
 import { ComponentType } from 'react'
 import { GetStaticProps } from '../types'
+import { requireFontManifest } from '../next-server/server/require'
+import { FontManifest } from '../next-server/server/font-utils'
 
 const envConfig = require('../next-server/lib/runtime-config')
 
@@ -44,6 +46,7 @@ interface ExportPageInput {
   serverRuntimeConfig: string
   subFolders: string
   serverless: boolean
+  optimizeFonts: boolean
 }
 
 interface ExportPageResults {
@@ -60,6 +63,8 @@ interface RenderOpts {
   ampSkipValidation?: boolean
   hybridAmp?: boolean
   inAmpMode?: boolean
+  optimizeFonts?: boolean
+  fontManifest?: FontManifest
 }
 
 type ComponentModule = ComponentType<{}> & {
@@ -78,6 +83,7 @@ export default async function exportPage({
   serverRuntimeConfig,
   subFolders,
   serverless,
+  optimizeFonts,
 }: ExportPageInput): Promise<ExportPageResults> {
   let results: ExportPageResults = {
     ampValidations: [],
@@ -211,7 +217,14 @@ export default async function exportPage({
           req,
           res,
           'export',
-          { ampPath },
+          {
+            ampPath,
+            /// @ts-ignore
+            optimizeFonts,
+            fontManifest: optimizeFonts
+              ? requireFontManifest(distDir, serverless)
+              : null,
+          },
           // @ts-ignore
           params
         )
@@ -246,7 +259,25 @@ export default async function exportPage({
         html = components.Component
         queryWithAutoExportWarn()
       } else {
-        curRenderOpts = { ...components, ...renderOpts, ampPath, params }
+        /**
+         * This sets environment variable to be used at the time of static export by head.tsx.
+         * Using this from process.env allows targetting both serverless and SSR by calling
+         * `process.env.__NEXT_OPTIMIZE_FONTS`.
+         * TODO(prateekbh@): Remove this when experimental.optimizeFonts are being clened up.
+         */
+        if (optimizeFonts) {
+          process.env.__NEXT_OPTIMIZE_FONTS = JSON.stringify(true)
+        }
+        curRenderOpts = {
+          ...components,
+          ...renderOpts,
+          ampPath,
+          params,
+          optimizeFonts,
+          fontManifest: optimizeFonts
+            ? requireFontManifest(distDir, serverless)
+            : null,
+        }
         // @ts-ignore
         html = await renderMethod(req, res, page, query, curRenderOpts)
       }

packages/next/next-server/lib/constants.ts

@@ -9,6 +9,7 @@ export const EXPORT_DETAIL = 'export-detail.json'
 export const PRERENDER_MANIFEST = 'prerender-manifest.json'
 export const ROUTES_MANIFEST = 'routes-manifest.json'
 export const REACT_LOADABLE_MANIFEST = 'react-loadable-manifest.json'
+export const FONT_MANIFEST = 'font-manifest.json'
 export const SERVER_DIRECTORY = 'server'
 export const SERVERLESS_DIRECTORY = 'serverless'
 export const CONFIG_FILE = 'next.config.js'
@@ -33,3 +34,4 @@ export const TEMPORARY_REDIRECT_STATUS = 307
 export const PERMANENT_REDIRECT_STATUS = 308
 export const STATIC_PROPS_ID = '__N_SSG'
 export const SERVER_PROPS_ID = '__N_SSP'
+export const OPTIMIZED_FONT_PROVIDERS = ['https://fonts.googleapis.com/css']

packages/next/next-server/lib/head.tsx

@@ -136,6 +136,21 @@ function reduceComponents(
     .reverse()
     .map((c: React.ReactElement<any>, i: number) => {
       const key = c.key || i
+      if (process.env.__NEXT_OPTIMIZE_FONTS) {
+        if (
+          c.type === 'link' &&
+          c.props['href'] &&
+          // TODO(prateekbh@): Replace this with const from `constants` when the tree shaking works.
+          ['https://fonts.googleapis.com/css'].some((url) =>
+            c.props['href'].startsWith(url)
+          )
+        ) {
+          const newProps = { ...(c.props || {}) }
+          newProps['data-href'] = newProps['href']
+          newProps['href'] = undefined
+          return React.cloneElement(c, newProps)
+        }
+      }
       return React.cloneElement(c, { key })
     })
 }