From 211c84e1c90c69d787addd0edcb2dba473f5c411 Mon Sep 17 00:00:00 2001
From: htbvo <51830315+htbvo@users.noreply.github.com>
Date: Sat, 26 Oct 2019 12:27:22 -0500
Subject: [PATCH] allow NextScript to optionally defer javascript (#8980)

* allow NextScript to optionally defer javascript

* move defer options to experimental feature

* combine defer flags into a single option

* Update deferScripts to work with serverless target

* Add test for defer and async property

* Read the async property

* Check versions of chrome and chromedriver

* Update to chromedriver 76

* Fix test
---
 .circleci/config.yml                          |  5 ++
 package.json                                  |  2 +-
 packages/next/build/webpack-config.ts         |  3 ++
 packages/next/next-server/server/config.ts    |  1 +
 packages/next/pages/_document.tsx             | 19 ++++---
 test/integration/defer-scripts/next.config.js |  9 ++++
 test/integration/defer-scripts/pages/index.js |  1 +
 .../defer-scripts/test/index.test.js          | 53 +++++++++++++++++++
 .../integration/production/test/index.test.js | 18 +++++++
 yarn.lock                                     |  8 +--
 10 files changed, 108 insertions(+), 11 deletions(-)
 create mode 100644 test/integration/defer-scripts/next.config.js
 create mode 100644 test/integration/defer-scripts/pages/index.js
 create mode 100644 test/integration/defer-scripts/test/index.test.js

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 4b6fe7bed5..8dac242507 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -36,6 +36,11 @@ commands:
       - run:
           name: Installing Dependencies
           command: yarn install --frozen-lockfile --check-files
+      - run:
+          name: Install correct Chrome Driver version
+          command: yarn add chromedriver@76 -W
+      - run: google-chrome --version
+      - run: chromedriver --version
   yarn_lint:
     steps:
       - run:
diff --git a/package.json b/package.json
index 41d0e23880..491ca04e32 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
     "babel-jest": "24.8.0",
     "browserstack-local": "1.4.0",
     "cheerio": "0.22.0",
-    "chromedriver": "75.1.0",
+    "chromedriver": "76.0.1",
     "clone": "2.1.2",
     "coveralls": "3.0.3",
     "cross-spawn": "6.0.5",
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index fd6ec5cd00..fd7f1ce58e 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -724,6 +724,9 @@ export default async function getBaseWebpackConfig(
         'process.env.__NEXT_EXPORT_TRAILING_SLASH': JSON.stringify(
           config.exportTrailingSlash
         ),
+        'process.env.__NEXT_DEFER_SCRIPTS': JSON.stringify(
+          config.experimental.deferScripts
+        ),
         'process.env.__NEXT_MODERN_BUILD': JSON.stringify(
           config.experimental.modern && !dev
         ),
diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts
index 712eca7017..3fe9b13f1a 100644
--- a/packages/next/next-server/server/config.ts
+++ b/packages/next/next-server/server/config.ts
@@ -47,6 +47,7 @@ const defaultConfig: { [key: string]: any } = {
     profiling: false,
     publicDirectory: false,
     sprFlushToDisk: true,
+    deferScripts: false,
   },
   future: {
     excludeDefaultMomentLocales: false,
diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
index 5eed3f678c..3de7a9700c 100644
--- a/packages/next/pages/_document.tsx
+++ b/packages/next/pages/_document.tsx
@@ -521,7 +521,8 @@ export class NextScript extends Component<OriginProps> {
 
       return (
         <script
-          async
+          defer={process.env.__NEXT_DEFER_SCRIPTS as any}
+          async={!process.env.__NEXT_DEFER_SCRIPTS as any}
           key={bundle.file}
           src={`${assetPrefix}/_next/${encodeURI(
             bundle.file
@@ -561,7 +562,8 @@ export class NextScript extends Component<OriginProps> {
             file
           )}${_devOnlyInvalidateCacheQueryString}`}
           nonce={this.props.nonce}
-          async
+          defer={process.env.__NEXT_DEFER_SCRIPTS as any}
+          async={!process.env.__NEXT_DEFER_SCRIPTS as any}
           crossOrigin={this.props.crossOrigin || process.crossOrigin}
           {...modernProps}
         />
@@ -594,6 +596,7 @@ export class NextScript extends Component<OriginProps> {
       devFiles,
       __NEXT_DATA__,
     } = this.context._documentProps
+    const deferScripts: any = process.env.__NEXT_DEFER_SCRIPTS
     const { _devOnlyInvalidateCacheQueryString } = this.context
 
     if (inAmpMode) {
@@ -648,7 +651,8 @@ export class NextScript extends Component<OriginProps> {
 
     const pageScript = [
       <script
-        async
+        defer={deferScripts}
+        async={!deferScripts}
         data-next-page={page}
         key={page}
         src={
@@ -662,7 +666,8 @@ export class NextScript extends Component<OriginProps> {
       />,
       process.env.__NEXT_MODERN_BUILD && (
         <script
-          async
+          defer={deferScripts}
+          async={!deferScripts}
           data-next-page={page}
           key={`${page}-modern`}
           src={
@@ -681,7 +686,8 @@ export class NextScript extends Component<OriginProps> {
 
     const appScript = [
       <script
-        async
+        defer={deferScripts}
+        async={!deferScripts}
         data-next-page="/_app"
         src={
           assetPrefix +
@@ -695,7 +701,8 @@ export class NextScript extends Component<OriginProps> {
       />,
       process.env.__NEXT_MODERN_BUILD && (
         <script
-          async
+          defer={deferScripts}
+          async={!deferScripts}
           data-next-page="/_app"
           src={
             assetPrefix +
diff --git a/test/integration/defer-scripts/next.config.js b/test/integration/defer-scripts/next.config.js
new file mode 100644
index 0000000000..f1e8fcc18c
--- /dev/null
+++ b/test/integration/defer-scripts/next.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  onDemandEntries: {
+    // Make sure entries are not getting disposed.
+    maxInactiveAge: 1000 * 60 * 60
+  },
+  experimental: {
+    deferScripts: true
+  }
+}
diff --git a/test/integration/defer-scripts/pages/index.js b/test/integration/defer-scripts/pages/index.js
new file mode 100644
index 0000000000..69192c68a0
--- /dev/null
+++ b/test/integration/defer-scripts/pages/index.js
@@ -0,0 +1 @@
+export default () => <h1>Hello World</h1>
diff --git a/test/integration/defer-scripts/test/index.test.js b/test/integration/defer-scripts/test/index.test.js
new file mode 100644
index 0000000000..385e4b3d0f
--- /dev/null
+++ b/test/integration/defer-scripts/test/index.test.js
@@ -0,0 +1,53 @@
+/* eslint-env jest */
+/* global jasmine */
+import { join } from 'path'
+import {
+  nextServer,
+  runNextCommand,
+  startApp,
+  stopApp,
+  renderViaHTTP
+} from 'next-test-utils'
+import cheerio from 'cheerio'
+const appDir = join(__dirname, '../')
+let appPort
+let server
+let app
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
+
+const context = {}
+
+describe('Defer Scripts', () => {
+  beforeAll(async () => {
+    await runNextCommand(['build', appDir])
+
+    app = nextServer({
+      dir: join(__dirname, '../'),
+      dev: false,
+      quiet: true
+    })
+
+    server = await startApp(app)
+    context.appPort = appPort = server.address().port
+  })
+  afterAll(() => stopApp(server))
+
+  it('should have defer on all script tags', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    const $ = cheerio.load(html)
+    let missing = false
+
+    for (const script of $('script').toArray()) {
+      const { defer, type } = script.attribs
+      // application/json doesn't need defer
+      if (type === 'application/json') {
+        continue
+      }
+
+      if (defer !== '') {
+        missing = true
+      }
+    }
+    expect(missing).toBe(false)
+  })
+})
diff --git a/test/integration/production/test/index.test.js b/test/integration/production/test/index.test.js
index c2c2cff478..20c01826de 100644
--- a/test/integration/production/test/index.test.js
+++ b/test/integration/production/test/index.test.js
@@ -663,6 +663,24 @@ describe('Production Usage', () => {
     }
   })
 
+  it('should have async on all script tags', async () => {
+    const html = await renderViaHTTP(appPort, '/')
+    const $ = cheerio.load(html)
+    let missing = false
+
+    for (const script of $('script').toArray()) {
+      // application/json doesn't need defer
+      if (script.attribs.type === 'application/json') {
+        continue
+      }
+
+      if (script.attribs.async !== '') {
+        missing = true
+      }
+    }
+    expect(missing).toBe(false)
+  })
+
   dynamicImportTests(context, (p, q) => renderViaHTTP(context.appPort, p, q))
 
   processEnv(context)
diff --git a/yarn.lock b/yarn.lock
index 168f0d02f3..c05e9ab65f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4174,10 +4174,10 @@ chrome-trace-event@^1.0.2:
   dependencies:
     tslib "^1.9.0"
 
-chromedriver@75.1.0:
-  version "75.1.0"
-  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-75.1.0.tgz#edfef5d7a9b16b6f8a12ddb58cbac76ae52732fd"
-  integrity sha512-N2P0fg6FS4c+tTG0R7cCOD5qiVo+E6uAz6xVjmbZesYv1xs1iGdcCUo0IqOY+ppD/4OOObG+XWV1CFWXT6UIgA==
+chromedriver@76.0.1:
+  version "76.0.1"
+  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-76.0.1.tgz#65283299c3b34b1212eef272c32bd826c6bdebd3"
+  integrity sha512-+8BCemJLKPF2w/UpzA1uNgLWQrg1IgIO4ZYcsAjYYgqD8zUcvQ+RfwA/0TR1Zwv9Mkd8fdzTe21eZ2FyZ83DAg==
   dependencies:
     del "^4.1.1"
     extract-zip "^1.6.7"
-- 
GitLab