Add nccing AMP optimizer (#21980)

This adds ncc'ing the AMP optimizer package to speed up install times and cache the runtime. Closes: #20404
vercel · Feb 11, 2021 · 5febe21 · 5febe21
1 parent 3f94f33
commit 5febe21
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 7 deletions.
diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
@@ -787,7 +787,11 @@ export default async function build(
         path.relative(
           dir,
           path.join(
-            path.dirname(require.resolve('@ampproject/toolbox-optimizer')),
+            path.dirname(
+              require.resolve(
+                'next/dist/compiled/@ampproject/toolbox-optimizer'
+              )
+            ),
             '**/*'
           )
         )

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -763,7 +763,7 @@ export default async function getBaseWebpackConfig(
       : [
           // When the 'serverless' target is used all node_modules will be compiled into the output bundles
           // So that the 'serverless' bundles have 0 runtime dependencies
-          '@ampproject/toolbox-optimizer', // except this one
+          'next/dist/compiled/@ampproject/toolbox-optimizer', // except this one
 
           // Mark this as external if not enabled so it doesn't cause a
           // webpack error from being missing

diff --git a/packages/next/next-server/server/optimize-amp.ts b/packages/next/next-server/server/optimize-amp.ts
@@ -4,7 +4,7 @@ export default async function optimize(
 ): Promise<string> {
   let AmpOptimizer
   try {
-    AmpOptimizer = require('@ampproject/toolbox-optimizer')
+    AmpOptimizer = require('next/dist/compiled/@ampproject/toolbox-optimizer')
   } catch (_) {
     return html
   }

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -60,7 +60,6 @@
     ]
   },
   "dependencies": {
-    "@ampproject/toolbox-optimizer": "2.7.1-alpha.0",
     "@babel/runtime": "7.12.5",
     "@hapi/accept": "5.0.1",
     "@next/env": "10.0.7-canary.6",
@@ -120,6 +119,7 @@
     }
   },
   "devDependencies": {
+    "@ampproject/toolbox-optimizer": "2.7.1-alpha.0",
     "@babel/code-frame": "7.12.11",
     "@babel/core": "7.12.10",
     "@babel/plugin-proposal-class-properties": "7.12.1",

diff --git a/packages/next/taskfile-ncc.js b/packages/next/taskfile-ncc.js
@@ -19,6 +19,9 @@ module.exports = function (task) {
       options.externals = { ...options.externals }
       delete options.externals[options.packageName]
     }
+    let precompiled = options.precompiled !== false
+    delete options.precompiled
+
     return ncc(join(__dirname, file.dir, file.base), {
       filename: file.base,
       minify: options.minify === false ? false : true,
@@ -39,7 +42,8 @@ module.exports = function (task) {
           this,
           options.packageName,
           file.base,
-          options.bundleName
+          options.bundleName,
+          precompiled
         )
       }
 
@@ -51,13 +55,13 @@ module.exports = function (task) {
 // This function writes a minimal `package.json` file for a compiled package.
 // It defines `name`, `main`, `author`, and `license`. It also defines `types`.
 // n.b. types intended for development usage only.
-function writePackageManifest(packageName, main, bundleName) {
+function writePackageManifest(packageName, main, bundleName, precompiled) {
   const packagePath = bundleRequire.resolve(packageName + '/package.json')
   let { name, author, license } = require(packagePath)
 
   const compiledPackagePath = join(
     __dirname,
-    `compiled/${bundleName || packageName}`
+    `${!precompiled ? 'dist/' : ''}compiled/${bundleName || packageName}`
   )
 
   const potentialLicensePath = join(dirname(packagePath), './LICENSE')

diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
@@ -68,6 +68,22 @@ export async function ncc_amphtml_validator(task, opts) {
     .target('compiled/amphtml-validator')
 }
 // eslint-disable-next-line camelcase
+externals['@ampproject/toolbox-optimizer'] =
+  'next/dist/compiled/@ampproject/toolbox-optimizer'
+export async function ncc_amp_optimizer(task, opts) {
+  await task
+    .source(
+      opts.src ||
+        relative(__dirname, require.resolve('@ampproject/toolbox-optimizer'))
+    )
+    .ncc({
+      externals,
+      precompiled: false,
+      packageName: '@ampproject/toolbox-optimizer',
+    })
+    .target('dist/compiled/@ampproject/toolbox-optimizer')
+}
+// eslint-disable-next-line camelcase
 externals['arg'] = 'distcompiled/arg'
 export async function ncc_arg(task, opts) {
   await task
@@ -757,6 +773,9 @@ export async function compile(task, opts) {
       'client',
       'telemetry',
       'nextserver',
+      // we compile this each time so that fresh runtime data is pulled
+      // before each publish
+      'ncc_amp_optimizer',
     ],
     opts
   )

diff --git a/test/.stats-app/pages/amp.js b/test/.stats-app/pages/amp.js
@@ -0,0 +1,9 @@
+import { useAmp } from 'next/amp'
+
+export const config = {
+  amp: 'hybrid',
+}
+
+export default function Amp(props) {
+  return useAmp() ? 'AMP mode' : 'normal mode'
+}