Move swcMinify out of experimental (vercel#29810)

errors/manifest.json

@@ -490,6 +490,10 @@
         {
           "title": "swc-disabled",
           "path": "/errors/swc-disabled.md"
+        },
+        {
+          "title": "swc-minify-enabled",
+          "path": "/errors/swc-minify-enabled.md"
         }
       ]
     }

errors/swc-minify-enabled.md

@@ -0,0 +1,7 @@
+# SWC minify enabled
+
+#### Why This Message Occurred
+
+The application has enabled `swcMinify` in `next.config.js`. By opting in minification will happen using the [SWC](https://swc.rs) minifier instead of Terser. This new minifier is 7x faster than Terser with comparable output. We're actively working on optimizing the output size and minification speed further.
+
+If you have feedback about the minification, please provide it on [the feedback thread](https://github.com/vercel/next.js/discussions/30237).

packages/next/build/webpack-config.ts

@@ -299,7 +299,7 @@ export default async function getBaseWebpackConfig(
 
   const distDir = path.join(dir, config.distDir)
 
-  const useSWCLoader = config.experimental.swcLoader && !babelConfigFile
+  const useSWCLoader = !babelConfigFile
   if (!loggedSwcDisabled && !useSWCLoader && babelConfigFile) {
     Log.warn(
       `Disabled SWC because of custom Babel configuration "${path.relative(
@@ -942,7 +942,7 @@ export default async function getBaseWebpackConfig(
           new TerserPlugin({
             cacheDir: path.join(distDir, 'cache', 'next-minifier'),
             parallel: config.experimental.cpus,
-            swcMinify: config.experimental.swcMinify,
+            swcMinify: config.swcMinify,
             terserOptions,
           }).apply(compiler)
         },
@@ -1411,8 +1411,8 @@ export default async function getBaseWebpackConfig(
     hasRewrites,
     reactRoot: config.experimental.reactRoot,
     concurrentFeatures: config.experimental.concurrentFeatures,
-    swcMinify: config.experimental.swcMinify,
-    swcLoader: config.experimental.swcLoader,
+    swcMinify: config.swcMinify,
+    swcLoader: useSWCLoader,
   })
 
   const cache: any = {

packages/next/server/config-shared.ts

@@ -118,9 +118,9 @@ export type NextConfig = { [key: string]: any } & {
   }
   staticPageGenerationTimeout?: number
   crossOrigin?: false | 'anonymous' | 'use-credentials'
+  swcMinify?: boolean
   experimental?: {
     swcMinify?: boolean
-    swcLoader?: boolean
     cpus?: number
     sharedPool?: boolean
     plugins?: boolean
@@ -202,9 +202,8 @@ export const defaultConfig: NextConfig = {
     keepAlive: true,
   },
   staticPageGenerationTimeout: 60,
+  swcMinify: false,
   experimental: {
-    swcLoader: true,
-    swcMinify: false,
     cpus: Math.max(
       1,
       (Number(process.env.CIRCLE_NODE_TOTAL) ||

packages/next/server/config.ts

@@ -358,6 +358,19 @@ function assignDefaults(userConfig: { [key: string]: any }) {
     )
   }
 
+  if (result.experimental && 'swcMinify' in (result.experimental as any)) {
+    Log.warn(
+      `\`swcMinify\` has been moved out of \`experimental\`. Please update your ${configFileName} file accordingly.`
+    )
+    result.swcMinify = (result.experimental as any).swcMinify
+  }
+
+  if (result.swcMinify) {
+    Log.warn(
+      'SWC minify beta enabled. nextjs.org/docs/messages/swc-minify-enabled'
+    )
+  }
+
   if (result.experimental && 'nftTracing' in (result.experimental as any)) {
     // TODO: remove this warning and assignment when we leave experimental phase
     Log.warn(

test/.stats-app/stats-config.js

@@ -133,12 +133,12 @@ module.exports = {
           content: `
             module.exports = {
               generateBuildId: () => 'BUILD_ID',
+              swcMinify: ${
+                // TODO: remove after stable release > 11.1.2
+                process.env.STATS_IS_RELEASE ? 'false' : 'true'
+              },
               experimental: {
                 swcLoader: true,
-                swcMinify: ${
-                  // TODO: remove after stable release > 11.1.2
-                  process.env.STATS_IS_RELEASE ? 'false' : 'true'
-                },
               },
               webpack(config) {
                 config.optimization.minimize = false
@@ -160,12 +160,13 @@ module.exports = {
           path: 'next.config.js',
           content: `
             module.exports = {
+              swcMinify: ${
+                // TODO: remove after stable release > 11.1.2
+                process.env.STATS_IS_RELEASE ? 'false' : 'true'
+              },
               experimental: {
                 swcLoader: true,
-                swcMinify: ${
-                  // TODO: remove after stable release > 11.1.2
-                  process.env.STATS_IS_RELEASE ? 'false' : 'true'
-                },
+                
               },
               generateBuildId: () => 'BUILD_ID'
             }

test/integration/async-modules/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

test/integration/async-modules/next.config.js

@@ -5,7 +5,4 @@ module.exports = {
     config.experiments.topLevelAwait = true
     return config
   },
-  experimental: {
-    swcLoader: false,
-  },
 }

test/integration/no-anon-default-export/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

test/integration/production-swcminify/components/dynamic-css/many-imports/with-css-1.js

@@ -0,0 +1,3 @@
+import styles from './with-css-1.module.css'
+
+export default () => <p className={styles.content}>With CSS 1</p>

test/integration/production-swcminify/components/dynamic-css/many-imports/with-css-1.module.css

@@ -0,0 +1,3 @@
+.content {
+  color: inherit;
+}

test/integration/production-swcminify/components/dynamic-css/many-imports/with-css-2.js

@@ -0,0 +1,3 @@
+import styles from './with-css-2.module.css'
+
+export default () => <p className={styles.content}>With CSS 2</p>

test/integration/production-swcminify/components/dynamic-css/many-imports/with-css-2.module.css

@@ -0,0 +1,3 @@
+.content {
+  color: inherit;
+}

test/integration/production-swcminify/components/dynamic-css/many-imports/with-css-3.js

@@ -0,0 +1,3 @@
+import styles from './with-css-3.module.css'
+
+export default () => <p className={styles.content}>With CSS 3</p>

test/integration/production-swcminify/components/dynamic-css/many-imports/with-css-3.module.css

@@ -0,0 +1,3 @@
+.content {
+  color: inherit;
+}

test/integration/production-swcminify/components/dynamic-css/many-modules/with-css-2.module.css

@@ -0,0 +1,3 @@
+.text {
+  color: red;
+}

test/integration/production-swcminify/components/dynamic-css/many-modules/with-css.js

@@ -0,0 +1,8 @@
+import styles from './with-css.module.css'
+import styles2 from './with-css-2.module.css'
+
+export default () => (
+  <div className={styles.content}>
+    <p className={styles2.text}>With CSS</p>
+  </div>
+)

test/integration/production-swcminify/components/dynamic-css/many-modules/with-css.module.css

@@ -0,0 +1,3 @@
+.content {
+  color: inherit;
+}

test/integration/production-swcminify/components/dynamic-css/nested/Nested.jsx

@@ -0,0 +1,3 @@
+import styles2 from './with-css-2.module.css'
+
+export default () => <p className={styles2.text}>With CSS</p>

test/integration/production-swcminify/components/dynamic-css/nested/with-css-2.module.css

@@ -0,0 +1,3 @@
+.text {
+  color: red;
+}

test/integration/production-swcminify/components/dynamic-css/nested/with-css.js

@@ -0,0 +1,8 @@
+import styles from './with-css.module.css'
+import Nested from './Nested'
+
+export default () => (
+  <div className={styles.content}>
+    <Nested />
+  </div>
+)

test/integration/production-swcminify/components/dynamic-css/nested/with-css.module.css

@@ -0,0 +1,3 @@
+.content {
+  color: inherit;
+}

test/integration/production-swcminify/components/dynamic-css/no-css.js

@@ -0,0 +1 @@
+export default () => <p>Without CSS</p>

test/integration/production-swcminify/components/dynamic-css/shared-css-module/with-css-2.js

@@ -0,0 +1,8 @@
+import styles from './with-css-2.module.css'
+import stylesShared from './with-css-shared.module.css'
+
+export default () => (
+  <div className={styles.content}>
+    <p className={stylesShared.test}>With CSS</p>
+  </div>
+)

test/integration/production-swcminify/components/dynamic-css/shared-css-module/with-css-2.module.css

@@ -0,0 +1,3 @@
+.content {
+  color: inherit;
+}

test/integration/production-swcminify/components/dynamic-css/shared-css-module/with-css-shared.module.css

@@ -0,0 +1,3 @@
+.text {
+  color: red;
+}

test/integration/production-swcminify/components/dynamic-css/shared-css-module/with-css.js

@@ -0,0 +1,8 @@
+import styles from './with-css.module.css'
+import stylesShared from './with-css-shared.module.css'
+
+export default () => (
+  <div className={styles.content}>
+    <p className={stylesShared.test}>With CSS</p>
+  </div>
+)

test/integration/production-swcminify/components/dynamic-css/shared-css-module/with-css.module.css

@@ -0,0 +1,3 @@
+.content {
+  color: inherit;
+}

test/integration/production-swcminify/components/dynamic-css/with-css.js

@@ -0,0 +1,7 @@
+import styles from './with-css.module.css'
+
+export default () => (
+  <p id="with-css" className={styles.content}>
+    With CSS
+  </p>
+)

test/integration/production-swcminify/components/dynamic-css/with-css.module.css

@@ -0,0 +1,4 @@
+.content {
+  color: inherit;
+  display: flex;
+}

test/integration/production-swcminify/components/hello-context.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default class extends React.Component {
+  static contextTypes = {
+    data: PropTypes.object,
+  }
+
+  render() {
+    const { data } = this.context
+    return <div>{data.title}</div>
+  }
+}

test/integration/production-swcminify/components/hello1.js

@@ -0,0 +1 @@
+export default () => <p>Hello World 1</p>

test/integration/production-swcminify/components/hello2.js

@@ -0,0 +1 @@
+export default () => <p>Hello World 2</p>

test/integration/production-swcminify/components/logo/index.js

@@ -0,0 +1,5 @@
+import styles from './logo.module.css'
+
+export default function Logo() {
+  return <div className={styles.logo}></div>
+}

test/integration/production-swcminify/components/logo/logo.module.css

@@ -0,0 +1,3 @@
+.logo {
+  background-image: url(dark.svg);
+}

test/integration/production-swcminify/components/welcome.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export default class Welcome extends React.Component {
+  state = { name: null }
+
+  componentDidMount() {
+    const { name } = this.props
+    this.setState({ name })
+  }
+
+  render() {
+    const { name } = this.state
+    if (!name) return null
+
+    return <p>Welcome, {name}</p>
+  }
+}

test/integration/production-swcminify/info.json

@@ -0,0 +1,3 @@
+{
+  "version": "cool-version"
+}

test/integration/production-swcminify/next.config.js

@@ -0,0 +1,46 @@
+// intervals/open connections shouldn't block build from exiting
+setInterval(() => {}, 250)
+
+module.exports = {
+  swcMinify: true,
+  experimental: {
+    outputFileTracing: true,
+  },
+  onDemandEntries: {
+    // Make sure entries are not getting disposed.
+    maxInactiveAge: 1000 * 60 * 60,
+  },
+  rewrites() {
+    // add a rewrite so the code isn't dead-code eliminated
+    return [
+      {
+        source: '/some-rewrite',
+        destination: '/',
+      },
+    ]
+  },
+  redirects() {
+    return [
+      {
+        source: '/redirect/me/to-about/:lang',
+        destination: '/:lang/about',
+        permanent: false,
+      },
+      {
+        source: '/nonexistent',
+        destination: '/about',
+        permanent: false,
+      },
+      {
+        source: '/shadowed-page',
+        destination: '/about',
+        permanent: false,
+      },
+      {
+        source: '/redirect-query-test/:path',
+        destination: '/about?foo=:path',
+        permanent: false,
+      },
+    ]
+  },
+}

test/integration/production-swcminify/pages/about.js

@@ -0,0 +1 @@
+export default () => <div className="about-page">About Page</div>

test/integration/production-swcminify/pages/amp-hybrid.js

@@ -0,0 +1,2 @@
+export default () => 'hi'
+export const config = { amp: 'hybrid' }

test/integration/production-swcminify/pages/amp.js

@@ -0,0 +1,2 @@
+export default () => 'hi'
+export const config = { amp: true }

test/integration/production-swcminify/pages/another.js

@@ -0,0 +1,10 @@
+import Link from 'next/link'
+
+export default () => (
+  <div>
+    <Link href="/">
+      <a>Index Page</a>
+    </Link>
+    <p>Another</p>
+  </div>
+)

test/integration/production-swcminify/pages/api/[post]/index.js

@@ -0,0 +1,3 @@
+export default ({ query }, res) => {
+  res.status(200).json(query)
+}

test/integration/production-swcminify/pages/api/hello.js

@@ -0,0 +1,3 @@
+export default (req, res) => {
+  res.end('API hello works')
+}