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
@@ -961,6 +961,7 @@ export default async function getBaseWebpackConfig(
               inputChunkName.replace(/\.js$/, '.module.js'),
           })
         })(),
+      !dev && isServer && new FontStylesheetGatheringPlugin(),
       config.experimental.conformance &&
         !dev &&
         new WebpackConformancePlugin({

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

@@ -251,6 +251,7 @@ const nextServerlessLoader: loader.Loader = function () {
     import initServer from 'next-plugin-loader?middleware=on-init-server!'
     import onError from 'next-plugin-loader?middleware=on-error-server!'
     import 'next/dist/next-server/server/node-polyfill-fetch'
+    import { requireFontManifest } from 'next/dist/next-server/server/require'
     const {isResSent} = require('next/dist/next-server/lib/utils');
 
     ${envLoading}
@@ -401,7 +402,18 @@ const nextServerlessLoader: loader.Loader = function () {
         // make sure to set renderOpts to the correct params e.g. _params
         // if provided from worker or params if we're parsing them here
         renderOpts.params = _params || params
+        renderOpts.getFontDefinition = (fontURL) => {
+          console.log('will dist dirrrr', "${distDir}", "${canonicalBase}", "${basePath}");
+          const manifest = requireFontManifest("${distDir}", true)
+          let fontContent = ''
+          manifest.forEach((font) => {
+            if (font && font.url === fontURL) {
+              fontContent = font.content
+            }
+          })
 
+          return fontContent
+        }
         const isFallback = parsedUrl.query.__nextFallback
 
         const previewData = tryGetPreviewData(req, res, options.previewProps)

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

@@ -0,0 +1,138 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { NodePath } from 'ast-types/lib/node-path'
+import { visit } from 'next/dist/compiled/recast'
+import { compilation as CompilationType, Compiler } from 'webpack'
+import { namedTypes } from 'ast-types'
+import { RawSource } from 'webpack-sources'
+
+const https = require('https')
+
+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) => {
+          var that = this
+          parser.hooks.program.tap(this.constructor.name, (ast: any) => {
+            // We will only optimize fonts from first party code.
+            if (parser?.state?.module?.resource.includes('node_modules')) {
+              return
+            }
+            visit(ast, {
+              visitCallExpression: function (path) {
+                const { node }: { node: namedTypes.CallExpression } = path
+                if (!node.arguments || node.arguments.length < 2) {
+                  return false
+                }
+                if (isNodeCreatingLinkElement(node)) {
+                  const propsNode = node
+                    .arguments[1] as namedTypes.ObjectExpression
+                  if (!propsNode.properties) {
+                    return false
+                  }
+                  const props: {
+                    [key: string]: string
+                  } = propsNode.properties.reduce(
+                    (originalProps, prop: any) => {
+                      // todo check the type of prop
+                      // @ts-ignore
+                      originalProps[prop.key.name] = prop.value.value
+                      return originalProps
+                    },
+                    {}
+                  )
+
+                  if (
+                    !props.rel ||
+                    props.rel !== 'stylesheet' ||
+                    !props.href ||
+                    !props.href.startsWith('https://')
+                  ) {
+                    return false
+                  }
+                  that.gatheredStylesheets.push(props.href)
+                }
+                this.traverse(path)
+                return false
+              },
+            })
+          })
+        })
+    }
+  }
+
+  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 (_, modulesFinished) => {
+          const allContent = this.gatheredStylesheets.map((url) => getFile(url))
+          const manifestContent = (await Promise.allSettled(allContent)).map(
+            (promise) => promise.value
+          )
+          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'
+}
+
+function getFile(url: string): Promise<string> {
+  return new Promise((resolve) => {
+    let rawData: any = ''
+    https.get(
+      url,
+      {
+        headers: {
+          'user-agent':
+            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36',
+        },
+      },
+      (res: any) => {
+        res.on('data', (chunk: any) => {
+          rawData += chunk
+        })
+        res.on('end', () => {
+          resolve({
+            url,
+            content: rawData.toString('utf8'),
+          })
+        })
+      }
+    )
+  })
+}

packages/next/export/worker.ts

@@ -13,6 +13,7 @@ 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'
 
 const envConfig = require('../next-server/lib/runtime-config')
 
@@ -60,6 +61,7 @@ interface RenderOpts {
   ampSkipValidation?: boolean
   hybridAmp?: boolean
   inAmpMode?: boolean
+  getFontDefinition?: (url: string) => string
 }
 
 type ComponentModule = ComponentType<{}> & {
@@ -83,6 +85,18 @@ export default async function exportPage({
     ampValidations: [],
   }
 
+  const getFontDefinition = (fontURL: string) => {
+    const manifest = requireFontManifest(distDir, serverless)
+    let fontContent = ''
+    manifest.forEach((font: any) => {
+      if (font && font.url === fontURL) {
+        fontContent = font.content
+      }
+    })
+
+    return fontContent
+  }
+
   try {
     const { query: originalQuery = {} } = pathMap
     const { page } = pathMap
@@ -213,7 +227,10 @@ export default async function exportPage({
           'export',
           { ampPath },
           // @ts-ignore
-          params
+          {
+            ...params,
+            getFontDefinition,
+          }
         )
         curRenderOpts = result.renderOpts || {}
         html = result.html
@@ -246,7 +263,13 @@ export default async function exportPage({
         html = components.Component
         queryWithAutoExportWarn()
       } else {
-        curRenderOpts = { ...components, ...renderOpts, ampPath, params }
+        curRenderOpts = {
+          ...components,
+          ...renderOpts,
+          ampPath,
+          params,
+          getFontDefinition,
+        }
         // @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'