Initial optimizeLibraries experimental flag (#8345)

* Add experimental optimizeLibraries flag, currently prunes Moment.js locales

* expose moment for use in assertion

* try with the same setup as the production integration test

* Apply optimiztaions in dev and on server so they're consistent.

* fix build (oh dear)

* Update index.test.js

* Rename flag to future.excludeDefaultMomentLocales

* Adjust impl

package.json

@@ -93,6 +93,7 @@
     "lerna": "3.14.1",
     "lint-staged": "8.1.7",
     "mkdirp": "0.5.1",
+    "moment": "^2.24.0",
     "node-fetch": "2.6.0",
     "node-notifier": "5.4.0",
     "node-sass": "4.12.0",

packages/next-server/server/config.ts

@@ -42,6 +42,9 @@ const defaultConfig: { [key: string]: any } = {
     publicDirectory: false,
     modern: false,
   },
+  future: {
+    excludeDefaultMomentLocales: false,
+  },
   serverRuntimeConfig: {},
   publicRuntimeConfig: {},
 }

packages/next/build/webpack-config.ts

@@ -519,6 +519,12 @@ export default async function getBaseWebpackConfig(
         distDir,
         isServer,
       }),
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how Webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      config.future.excludeDefaultMomentLocales &&
+        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       ...(dev
         ? (() => {
             // Even though require.cache is server only we have to clear assets from both compilations

test/integration/future/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  future: {
+    excludeDefaultMomentLocales: true
+  }
+}

test/integration/future/pages/index.js

@@ -0,0 +1,5 @@
+import moment from 'moment'
+if (typeof window !== 'undefined') {
+  window.moment = moment
+}
+export default () => <h1>Current time: {moment().format('LLL')}</h1>

test/integration/future/test/index.test.js

@@ -0,0 +1,42 @@
+/* eslint-env jest */
+/* global jasmine */
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+import {
+  nextBuild,
+  nextServer,
+  startApp,
+  stopApp,
+  renderViaHTTP,
+  waitFor
+} from 'next-test-utils'
+
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000 * 60 * 5
+
+let appDir = join(__dirname, '../')
+let server
+let appPort
+
+describe('future.excludeDefaultMomentLocales', () => {
+  beforeAll(async () => {
+    await nextBuild(appDir)
+    const app = nextServer({
+      dir: appDir,
+      dev: false,
+      quiet: true
+    })
+    server = await startApp(app)
+    appPort = server.address().port
+    // wait for it to start up:
+    await renderViaHTTP(appPort, '/')
+  })
+  afterAll(() => stopApp(server))
+
+  it('should load momentjs', async () => {
+    const browser = await webdriver(appPort, '/')
+    await waitFor(5000)
+    expect(await browser.elementByCss('h1').text()).toMatch(/current time/i)
+    expect(await browser.eval('moment.locales()')).toStrictEqual(['en'])
+    await browser.close()
+  })
+})

yarn.lock

@@ -9521,6 +9521,11 @@ modify-values@^1.0.0:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"