Use 'initial' setting for SplitChunksPlugin

packages/next/build/webpack-config.ts

@@ -228,13 +228,12 @@ export default async function getBaseWebpackConfig(
       },
     },
     prodGranular: {
-      chunks: 'all',
+      chunks: 'initial',
       cacheGroups: {
         default: false,
         vendors: false,
         framework: {
           name: 'framework',
-          chunks: 'all',
           test: /[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types)[\\/]/,
           priority: 40,
         },
@@ -267,7 +266,6 @@ export default async function getBaseWebpackConfig(
         },
         commons: {
           name: 'commons',
-          chunks: 'all',
           minChunks: totalPages,
           priority: 20,
         },

test/integration/chunking/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    granularChunks: true
+  }
+}

test/integration/chunking/pages/index.js

@@ -0,0 +1,5 @@
+const Page = () => {
+  return <div>index</div>
+}
+
+export default Page

test/integration/chunking/pages/page1.js

@@ -0,0 +1,8 @@
+import ReactDOM from 'react-dom'
+
+const Page = () => {
+  console.log(ReactDOM)
+  return <div>page1</div>
+}
+
+export default Page

test/integration/chunking/pages/page2.js

@@ -0,0 +1,8 @@
+import * as _ from 'lodash'
+
+const Page = () => {
+  console.log(_)
+  return <div>page2</div>
+}
+
+export default Page

test/integration/chunking/test/index.test.js

@@ -0,0 +1,67 @@
+/* eslint-env jest */
+import { join } from 'path'
+import { nextBuild } from 'next-test-utils'
+import fs from 'fs'
+import { promisify } from 'util'
+const readdir = promisify(fs.readdir)
+const readFile = promisify(fs.readFile)
+const unlink = promisify(fs.unlink)
+const access = promisify(fs.access)
+
+const appDir = join(__dirname, '../')
+
+let buildId
+let chunks
+
+const existsChunkNamed = name => {
+  return chunks.some(chunk => new RegExp(name).test(chunk))
+}
+
+describe('Chunking', () => {
+  beforeAll(async () => {
+    try {
+      // If a previous build has left chunks behind, delete them
+      const oldChunks = await readdir(join(appDir, '.next', 'static', 'chunks'))
+      await Promise.all(
+        oldChunks.map(chunk => {
+          return unlink(join(appDir, '.next', 'static', 'chunks', chunk))
+        })
+      )
+    } catch (e) {
+      // Error here means old chunks don't exist, so we don't need to do anything
+    }
+    await nextBuild(appDir)
+    buildId = await readFile(join(appDir, '.next/BUILD_ID'), 'utf8')
+    chunks = await readdir(join(appDir, '.next', 'static', 'chunks'))
+  }, 10000) /* Timeout increased because this test builds a large library */
+
+  it('should create a framework chunk', () => {
+    expect(existsChunkNamed('framework')).toBe(true)
+  })
+
+  it('should create a library chunk for lodash', () => {
+    // This test app has an import on all of lodash in page2.js. Because it is
+    // a large library, it should be chunked out into its own library chunk
+    expect(existsChunkNamed('lodash')).toBe(true)
+  })
+
+  it('should not create a commons chunk', () => {
+    // This app has no dependency that is required by ALL pages, and should
+    // therefore not have a commons chunk
+    expect(existsChunkNamed('commons')).toBe(false)
+  })
+
+  it('should not create a lib chunk for react or react-dom', () => {
+    // These large dependencies would become lib chunks, except that they
+    // are preemptively moved into the framework chunk.
+    expect(existsChunkNamed('react|react-dom')).toBe(false)
+  })
+
+  it('should create a _buildManifest.js file', async () => {
+    expect(
+      await access(
+        join(appDir, '.next', 'static', buildId, '_buildManifest.js')
+      )
+    ).toBe(undefined) /* fs.access callback returns undefined if file exists */
+  })
+})