Cache Babel and AutoDll plugin in `dirDir/cache` (#7102)

* Cache Babel and AutoDll plugin in `dirDir/cache`

* Extract code

packages/next/build/webpack-config.ts

@@ -16,14 +16,16 @@ import { SharedRuntimePlugin } from './webpack/plugins/shared-runtime-plugin'
 import { HashedChunkIdsPlugin } from './webpack/plugins/hashed-chunk-ids-plugin'
 import { ChunkGraphPlugin } from './webpack/plugins/chunk-graph-plugin'
 import { DropClientPage } from './webpack/plugins/next-drop-client-page-plugin'
+import { importAutoDllPlugin } from './webpack/plugins/dll-import'
 import { WebpackEntrypoints } from './entries'
 type ExcludesFalse = <T>(x: T | false) => x is T
 
 export default function getBaseWebpackConfig (dir: string, {dev = false, debug = false, isServer = false, buildId, config, target = 'server', entrypoints, selectivePageBuilding = false, selectivePageBuildingCacheIdentifier = ''}: {dev?: boolean, debug?: boolean, isServer?: boolean, buildId: string, config: any, target?: string, entrypoints: WebpackEntrypoints, selectivePageBuilding?: boolean, selectivePageBuildingCacheIdentifier?: string}): webpack.Configuration {
+  const distDir = path.join(dir, config.distDir)
   const defaultLoaders = {
     babel: {
       loader: 'next-babel-loader',
-      options: { isServer, cwd: dir, asyncToPromises: config.experimental.asyncToPromises }
+      options: { isServer, distDir, cwd: dir, asyncToPromises: config.experimental.asyncToPromises }
     },
     // Backwards compat
     hotSelfAccept: {
@@ -36,7 +38,6 @@ export default function getBaseWebpackConfig (dir: string, {dev = false, debug =
     .split(process.platform === 'win32' ? ';' : ':')
     .filter((p) => !!p)
 
-  const distDir = path.join(dir, config.distDir)
   const outputDir = target === 'serverless' ? 'serverless' : SERVER_DIRECTORY
   const outputPath = path.join(distDir, isServer ? outputDir : '')
   const totalPages = Object.keys(entrypoints).length
@@ -294,8 +295,8 @@ export default function getBaseWebpackConfig (dir: string, {dev = false, debug =
           new NextJsRequireCacheHotReloader(),
         ]
 
-        if(!isServer) {
-          const AutoDllPlugin = require('autodll-webpack-plugin')
+        if (!isServer) {
+          const AutoDllPlugin = importAutoDllPlugin({ distDir })
           devPlugins.push(
             new AutoDllPlugin({
               filename: '[name]_[hash].js',

packages/next/build/webpack/loaders/next-babel-loader.js

@@ -21,7 +21,7 @@ module.exports = babelLoader.custom(babel => {
       const filename = join(opts.cwd, 'noop.js')
       const loader = Object.assign({
         cacheCompression: false,
-        cacheDirectory: true,
+        cacheDirectory: join(opts.distDir, 'cache', 'next-babel-loader'),
         cacheIdentifier: cacheKey + JSON.stringify(
           babel.loadPartialConfig({
             filename,
@@ -33,6 +33,7 @@ module.exports = babelLoader.custom(babel => {
 
       delete loader.isServer
       delete loader.asyncToPromises
+      delete loader.distDir
       return { loader, custom }
     },
     config (cfg, { source, customOptions: { isServer, asyncToPromises } }) {

packages/next/build/webpack/plugins/dll-import.ts

+import path from 'path'
+
+export function importAutoDllPlugin({ distDir }: { distDir: string }) {
+  const autodllPaths = path.join(
+    path.dirname(require.resolve('autodll-webpack-plugin')),
+    'paths.js'
+  )
+  require(autodllPaths)
+
+  const autodllCachePath = path.resolve(
+    path.join(distDir, 'cache', 'autodll-webpack-plugin')
+  )
+  require.cache[autodllPaths] = Object.assign({}, require.cache[autodllPaths], {
+    exports: Object.assign({}, require.cache[autodllPaths].exports, {
+      cacheDir: autodllCachePath,
+      getManifestPath: (hash: string) => (bundleName: string) =>
+        path.resolve(autodllCachePath, hash, `${bundleName}.manifest.json`),
+    }),
+  })
+
+  const AutoDllPlugin = require('autodll-webpack-plugin')
+  return AutoDllPlugin
+}