feat(core): faster JS minimizer - `siteConfig.future.experimental_fas…

…ter.swcJsMinimizer` (#10441)
facebook · Aug 23, 2024 · bb90e35 · bb90e35
1 parent aa65f39
commit bb90e35
Show file tree

Hide file tree

Showing 19 changed files with 201 additions and 35 deletions.
diff --git a/packages/docusaurus-faster/src/index.ts b/packages/docusaurus-faster/src/index.ts
@@ -6,6 +6,7 @@
  */
 
 import type {RuleSetRule} from 'webpack';
+import type {JsMinifyOptions} from '@swc/core';
 
 export function getSwcJsLoaderFactory({
   isServer,
@@ -33,3 +34,24 @@ export function getSwcJsLoaderFactory({
     },
   };
 }
+
+// Note: these options are similar to what we use in core
+// They should rather be kept in sync for now to avoid any unexpected behavior
+// The goal of faster minifier is not to fine-tune options but only to be faster
+// See core minification.ts
+export function getSwcJsMinifierOptions(): JsMinifyOptions {
+  return {
+    ecma: 2020,
+    compress: {
+      ecma: 5,
+    },
+    module: true,
+    mangle: true,
+    safari10: true,
+    format: {
+      ecma: 5,
+      comments: false,
+      ascii_only: true,
+    },
+  };
+}
diff --git a/packages/docusaurus-types/src/config.d.ts b/packages/docusaurus-types/src/config.d.ts
@@ -125,6 +125,7 @@ export type StorageConfig = {
 
 export type FasterConfig = {
   swcJsLoader: boolean;
+  swcJsMinimizer: boolean;
 };
 
 export type FutureConfig = {

diff --git a/packages/docusaurus-types/src/index.d.ts b/packages/docusaurus-types/src/index.d.ts
@@ -14,6 +14,7 @@ export {
   ParseFrontMatter,
   DocusaurusConfig,
   FutureConfig,
+  FasterConfig,
   StorageConfig,
   Config,
 } from './config';

diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json
@@ -92,7 +92,7 @@
     "semver": "^7.5.4",
     "serve-handler": "^6.1.5",
     "shelljs": "^0.8.5",
-    "terser-webpack-plugin": "^5.3.9",
+    "terser-webpack-plugin": "^5.3.10",
     "tslib": "^2.6.0",
     "update-notifier": "^6.0.2",
     "url-loader": "^4.1.1",

diff --git a/packages/docusaurus/src/commands/build.ts b/packages/docusaurus/src/commands/build.ts
@@ -334,6 +334,7 @@ async function getBuildClientConfig({
   const result = await createBuildClientConfig({
     props,
     minify: cliOptions.minify ?? true,
+    faster: props.siteConfig.future.experimental_faster,
     bundleAnalyzer: cliOptions.bundleAnalyzer ?? false,
   });
   let {config} = result;

diff --git a/packages/docusaurus/src/commands/start/webpack.ts b/packages/docusaurus/src/commands/start/webpack.ts
@@ -136,6 +136,7 @@ async function getStartClientConfig({
   let {clientConfig: config} = await createStartClientConfig({
     props,
     minify,
+    faster: props.siteConfig.future.experimental_faster,
     poll,
   });
   config = executePluginsConfigureWebpack({

diff --git a/packages/docusaurus/src/faster.ts b/packages/docusaurus/src/faster.ts
@@ -6,6 +6,7 @@
  */
 
 import type {ConfigureWebpackUtils} from '@docusaurus/types';
+import type {MinimizerOptions, CustomOptions} from 'terser-webpack-plugin';
 
 async function importFaster() {
   return import('@docusaurus/faster');
@@ -22,9 +23,16 @@ async function ensureFaster() {
   }
 }
 
-export async function getSwcJsLoaderFactory(): Promise<
+export async function importSwcJsLoaderFactory(): Promise<
   ConfigureWebpackUtils['getJSLoader']
 > {
   const faster = await ensureFaster();
   return faster.getSwcJsLoaderFactory;
 }
+
+export async function importSwcJsMinifierOptions(): Promise<
+  MinimizerOptions<CustomOptions>
+> {
+  const faster = await ensureFaster();
+  return faster.getSwcJsMinifierOptions() as MinimizerOptions<CustomOptions>;
+}
diff --git a/packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap b/packages/docusaurus/src/server/__tests__/__snapshots__/config.test.ts.snap
@@ -10,6 +10,7 @@ exports[`loadSiteConfig website with .cjs siteConfig 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {
@@ -74,6 +75,7 @@ exports[`loadSiteConfig website with ts + js config 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {
@@ -138,6 +140,7 @@ exports[`loadSiteConfig website with valid JS CJS config 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {
@@ -202,6 +205,7 @@ exports[`loadSiteConfig website with valid JS ESM config 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {
@@ -266,6 +270,7 @@ exports[`loadSiteConfig website with valid TypeScript CJS config 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {
@@ -330,6 +335,7 @@ exports[`loadSiteConfig website with valid TypeScript ESM config 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {
@@ -394,6 +400,7 @@ exports[`loadSiteConfig website with valid async config 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {
@@ -460,6 +467,7 @@ exports[`loadSiteConfig website with valid async config creator function 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {
@@ -526,6 +534,7 @@ exports[`loadSiteConfig website with valid config creator function 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {
@@ -595,6 +604,7 @@ exports[`loadSiteConfig website with valid siteConfig 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {

diff --git a/packages/docusaurus/src/server/__tests__/__snapshots__/site.test.ts.snap b/packages/docusaurus/src/server/__tests__/__snapshots__/site.test.ts.snap
@@ -80,6 +80,7 @@ exports[`load loads props for site with custom i18n path 1`] = `
     "future": {
       "experimental_faster": {
         "swcJsLoader": false,
+        "swcJsMinimizer": false,
       },
       "experimental_router": "browser",
       "experimental_storage": {

diff --git a/packages/docusaurus/src/server/__tests__/configValidation.test.ts b/packages/docusaurus/src/server/__tests__/configValidation.test.ts
@@ -47,6 +47,7 @@ describe('normalizeConfig', () => {
       future: {
         experimental_faster: {
           swcJsLoader: true,
+          swcJsMinimizer: true,
         },
         experimental_storage: {
           type: 'sessionStorage',
@@ -741,6 +742,7 @@ describe('future', () => {
     const future: DocusaurusConfig['future'] = {
       experimental_faster: {
         swcJsLoader: true,
+        swcJsMinimizer: true,
       },
       experimental_storage: {
         type: 'sessionStorage',
@@ -1200,5 +1202,75 @@ describe('future', () => {
         `);
       });
     });
+    describe('swcJsMinimizer', () => {
+      it('accepts - undefined', () => {
+        const faster: Partial<FasterConfig> = {
+          swcJsMinimizer: undefined,
+        };
+        expect(
+          normalizeConfig({
+            future: {
+              experimental_faster: faster,
+            },
+          }),
+        ).toEqual(fasterContaining({swcJsMinimizer: false}));
+      });
+
+      it('accepts - true', () => {
+        const faster: Partial<FasterConfig> = {
+          swcJsMinimizer: true,
+        };
+        expect(
+          normalizeConfig({
+            future: {
+              experimental_faster: faster,
+            },
+          }),
+        ).toEqual(fasterContaining({swcJsMinimizer: true}));
+      });
+
+      it('accepts - false', () => {
+        const faster: Partial<FasterConfig> = {
+          swcJsMinimizer: false,
+        };
+        expect(
+          normalizeConfig({
+            future: {
+              experimental_faster: faster,
+            },
+          }),
+        ).toEqual(fasterContaining({swcJsMinimizer: false}));
+      });
+
+      it('rejects - null', () => {
+        // @ts-expect-error: invalid
+        const faster: Partial<FasterConfig> = {swcJsMinimizer: 42};
+        expect(() =>
+          normalizeConfig({
+            future: {
+              experimental_faster: faster,
+            },
+          }),
+        ).toThrowErrorMatchingInlineSnapshot(`
+          ""future.experimental_faster.swcJsMinimizer" must be a boolean
+          "
+        `);
+      });
+
+      it('rejects - number', () => {
+        // @ts-expect-error: invalid
+        const faster: Partial<FasterConfig> = {swcJsMinimizer: 42};
+        expect(() =>
+          normalizeConfig({
+            future: {
+              experimental_faster: faster,
+            },
+          }),
+        ).toThrowErrorMatchingInlineSnapshot(`
+          ""future.experimental_faster.swcJsMinimizer" must be a boolean
+          "
+        `);
+      });
+    });
   });
 });
diff --git a/packages/docusaurus/src/server/configValidation.ts b/packages/docusaurus/src/server/configValidation.ts
@@ -43,11 +43,13 @@ export const DEFAULT_STORAGE_CONFIG: StorageConfig = {
 
 export const DEFAULT_FASTER_CONFIG: FasterConfig = {
   swcJsLoader: false,
+  swcJsMinimizer: false,
 };
 
 // When using the "faster: true" shortcut
 export const DEFAULT_FASTER_CONFIG_TRUE: FasterConfig = {
   swcJsLoader: true,
+  swcJsMinimizer: true,
 };
 
 export const DEFAULT_FUTURE_CONFIG: FutureConfig = {
@@ -212,6 +214,9 @@ const FASTER_CONFIG_SCHEMA = Joi.alternatives()
   .try(
     Joi.object<FasterConfig>({
       swcJsLoader: Joi.boolean().default(DEFAULT_FASTER_CONFIG.swcJsLoader),
+      swcJsMinimizer: Joi.boolean().default(
+        DEFAULT_FASTER_CONFIG.swcJsMinimizer,
+      ),
     }),
     Joi.boolean()
       .required()

diff --git a/packages/docusaurus/src/webpack/__tests__/base.test.ts b/packages/docusaurus/src/webpack/__tests__/base.test.ts
@@ -11,7 +11,10 @@ import _ from 'lodash';
 import * as utils from '@docusaurus/utils/lib/webpackUtils';
 import {posixPath} from '@docusaurus/utils';
 import {excludeJS, clientDir, createBaseConfig} from '../base';
-import {DEFAULT_FUTURE_CONFIG} from '../../server/configValidation';
+import {
+  DEFAULT_FASTER_CONFIG,
+  DEFAULT_FUTURE_CONFIG,
+} from '../../server/configValidation';
 import type {Props} from '@docusaurus/types';
 
 describe('babel transpilation exclude logic', () => {
@@ -107,7 +110,12 @@ describe('base webpack config', () => {
 
   it('creates webpack aliases', async () => {
     const aliases = ((
-      await createBaseConfig({props, isServer: true, minify: true})
+      await createBaseConfig({
+        props,
+        isServer: true,
+        minify: true,
+        faster: DEFAULT_FASTER_CONFIG,
+      })
     ).resolve?.alias ?? {}) as {[alias: string]: string};
     // Make aliases relative so that test work on all computers
     const relativeAliases = _.mapValues(aliases, (a) =>
@@ -123,7 +131,12 @@ describe('base webpack config', () => {
       .spyOn(utils, 'getFileLoaderUtils')
       .mockImplementation(() => fileLoaderUtils);
 
-    await createBaseConfig({props, isServer: false, minify: false});
+    await createBaseConfig({
+      props,
+      isServer: false,
+      minify: false,
+      faster: DEFAULT_FASTER_CONFIG,
+    });
     expect(mockSvg).toHaveBeenCalled();
   });
 });
diff --git a/packages/docusaurus/src/webpack/base.ts b/packages/docusaurus/src/webpack/base.ts
@@ -14,10 +14,10 @@ import {
   getStyleLoaders,
   getCustomBabelConfigFilePath,
 } from './utils';
-import {getMinimizer} from './minification';
+import {getMinimizers} from './minification';
 import {loadThemeAliases, loadDocusaurusAliases} from './aliases';
 import type {Configuration} from 'webpack';
-import type {Props} from '@docusaurus/types';
+import type {FasterConfig, Props} from '@docusaurus/types';
 
 const CSS_REGEX = /\.css$/i;
 const CSS_MODULE_REGEX = /\.module\.css$/i;
@@ -57,10 +57,12 @@ export async function createBaseConfig({
   props,
   isServer,
   minify,
+  faster,
 }: {
   props: Props;
   isServer: boolean;
   minify: boolean;
+  faster: FasterConfig;
 }): Promise<Configuration> {
   const {
     outDir,
@@ -172,7 +174,7 @@ export async function createBaseConfig({
       // Only minimize client bundle in production because server bundle is only
       // used for static site generation
       minimize: minimizeEnabled,
-      minimizer: minimizeEnabled ? getMinimizer() : undefined,
+      minimizer: minimizeEnabled ? await getMinimizers({faster}) : undefined,
       splitChunks: isServer
         ? false
         : {