feat(gatsby): SWC minifier & Lightning CSS

packages/gatsby/package.json

@@ -33,6 +33,7 @@
     "@parcel/cache": "2.6.2",
     "@parcel/core": "2.6.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@swc/core": "^1.3.8",
     "@types/http-proxy": "^1.17.7",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
@@ -62,7 +63,7 @@
     "core-js": "^3.22.3",
     "cors": "^2.8.5",
     "css-loader": "^5.2.7",
-    "css-minimizer-webpack-plugin": "^2.0.0",
+    "css-minimizer-webpack-plugin": "^4.2.2",
     "css.escape": "^1.5.1",
     "date-fns": "^2.25.0",
     "debug": "^3.2.7",
@@ -117,6 +118,7 @@
     "joi": "^17.4.2",
     "json-loader": "^0.5.7",
     "latest-version": "^7.0.0",
+    "lightningcss": "^1.16.0",
     "lmdb": "2.5.3",
     "lodash": "^4.17.21",
     "md5-file": "^5.0.0",
@@ -161,7 +163,7 @@
     "string-similarity": "^1.2.2",
     "strip-ansi": "^6.0.1",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.2.4",
+    "terser-webpack-plugin": "^5.3.6",
     "tmp": "^0.2.1",
     "true-case-path": "^2.2.1",
     "type-of": "^2.0.1",

packages/gatsby/src/utils/flags.ts

@@ -131,7 +131,7 @@ const activeFlags: Array<IFlag> = [
     env: `GATSBY_PARTIAL_HYDRATION`,
     command: `build`,
     telemetryId: `PartialHydration`,
-    description: `Enable partial hydration to reduce Total Blocking Time and Time To Interactive `,
+    description: `Enable partial hydration to reduce Total Blocking Time and Time To Interactive`,
     umbrellaIssue: `https://gatsby.dev/partial-hydration-umbrella-issue`,
     experimental: true,
     testFitness: (): fitnessEnum => {
@@ -164,6 +164,17 @@ const activeFlags: Array<IFlag> = [
       _CFLAGS_.GATSBY_MAJOR === `5` ? `OPT_IN` : false,
     requires: `Slices is only available in Gatsby V5. Please upgrade Gatsby.`,
   },
+  {
+    name: `MODERN_MINIFY`,
+    env: `GATSBY_MODERN_MINIFY`,
+    command: `all`,
+    telemetryId: `ModernMinify`,
+    description: `Enable SWC as Terser replacement, Lightning CSS for CSS minification`,
+    umbrellaIssue: `https://gatsby.dev/modern-minify-umbrella-issue`,
+    experimental: true,
+    testFitness: (): fitnessEnum => _CFLAGS_.GATSBY_MAJOR === `5`,
+    requires: `Modern Minify is only available in Gatsby V5. Please upgrade Gatsby.`,
+  },
 ]
 
 export default activeFlags

packages/gatsby/src/utils/webpack-utils.ts

@@ -4,8 +4,7 @@ import { GraphQLSchema } from "graphql"
 import { Plugin as PostCSSPlugin } from "postcss"
 import autoprefixer from "autoprefixer"
 import flexbugs from "postcss-flexbugs-fixes"
-import TerserPlugin from "terser-webpack-plugin"
-import type { MinifyOptions as TerserOptions } from "terser"
+import TerserPlugin, { TerserOptions } from "terser-webpack-plugin"
 import MiniCssExtractPlugin from "mini-css-extract-plugin"
 import CssMinimizerPlugin from "css-minimizer-webpack-plugin"
 import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
@@ -660,6 +659,31 @@ export const createWebpackUtils = (
    */
   const plugins = { ...builtinPlugins } as PluginUtils
 
+  let conditionalTerserPluginOptions: TerserOptions
+
+  if (_CFLAGS_.GATSBY_MAJOR === `5` && process.env.GATSBY_MODERN_MINIFY) {
+    conditionalTerserPluginOptions = {
+      compress: true,
+      mangle: true,
+    }
+  } else {
+    conditionalTerserPluginOptions = {
+      ie8: false,
+      mangle: {
+        safari10: true,
+      },
+      parse: {
+        ecma: 5,
+      },
+      compress: {
+        ecma: 5,
+      },
+      output: {
+        ecma: 5,
+      },
+    }
+  }
+
   plugins.minifyJs = ({
     terserOptions,
     ...options
@@ -668,20 +692,10 @@ export const createWebpackUtils = (
   } = {}): WebpackPluginInstance =>
     new TerserPlugin({
       exclude: /\.min\.js/,
+      ...(_CFLAGS_.GATSBY_MAJOR === `5` &&
+        process.env.GATSBY_MODERN_MINIFY && { minify: TerserPlugin.swcMinify }),
       terserOptions: {
-        ie8: false,
-        mangle: {
-          safari10: true,
-        },
-        parse: {
-          ecma: 5,
-        },
-        compress: {
-          ecma: 5,
-        },
-        output: {
-          ecma: 5,
-        },
+        ...conditionalTerserPluginOptions,
         ...terserOptions,
       },
       parallel: Math.max(1, cpuCoreCount() - 1),
@@ -746,6 +760,10 @@ export const createWebpackUtils = (
     }
   ): CssMinimizerPlugin =>
     new CssMinimizerPlugin({
+      ...(_CFLAGS_.GATSBY_MAJOR === `5` &&
+        process.env.GATSBY_MODERN_MINIFY && {
+          minify: CssMinimizerPlugin.lightningCssMinify,
+        }),
       parallel: Math.max(1, cpuCoreCount() - 1),
       ...options,
     })