perf(mdx-loader): cache mdx/remark compiler instances

packages/docusaurus-mdx-loader/src/deps.d.ts

@@ -10,20 +10,19 @@ declare module '@mdx-js/mdx' {
   import type {Processor} from 'unified';
   import type {RemarkOrRehypePlugin} from '@docusaurus/mdx-loader';
 
-  namespace mdx {
-    interface Options {
-      filepath?: string;
-      skipExport?: boolean;
-      wrapExport?: string;
-      remarkPlugins?: RemarkOrRehypePlugin[];
-      rehypePlugins?: RemarkOrRehypePlugin[];
-    }
-
-    function sync(content: string, options?: Options): string;
-    function createMdxAstCompiler(options?: Options): Processor;
-    function createCompiler(options?: Options): Processor;
+  export interface Options {
+    filepath?: string;
+    skipExport?: boolean;
+    wrapExport?: string;
+    remarkPlugins?: RemarkOrRehypePlugin[];
+    rehypePlugins?: RemarkOrRehypePlugin[];
   }
-  function mdx(content: string, options?: mdx.Options): Promise<string>;
 
-  export default mdx;
+  export function sync(content: string, options?: Options): string;
+  export function createMdxAstCompiler(options?: Options): Processor;
+  export function createCompiler(options?: Options): Processor;
+  export default function mdx(
+    content: string,
+    options?: mdx.Options,
+  ): Promise<string>;
 }

packages/docusaurus-mdx-loader/src/index.ts

@@ -6,7 +6,7 @@
  */
 
 import {readFile} from 'fs-extra';
-import mdx from '@mdx-js/mdx';
+import {createCompiler, type Options as MDXOptions} from '@mdx-js/mdx';
 import logger from '@docusaurus/logger';
 import emoji from 'remark-emoji';
 import {
@@ -23,18 +23,27 @@ import transformImage from './remark/transformImage';
 import transformLinks from './remark/transformLinks';
 import type {RemarkAndRehypePluginOptions} from '@docusaurus/mdx-loader';
 import type {LoaderContext} from 'webpack';
+import type {Processor} from 'unified';
 
 const {
   loaders: {inlineMarkdownImageFileLoader},
 } = getFileLoaderUtils();
 
+const pragma = `
+/* @jsxRuntime classic */
+/* @jsx mdx */
+/* @jsxFrag mdx.Fragment */
+`;
+
 const DEFAULT_OPTIONS: RemarkAndRehypePluginOptions = {
   rehypePlugins: [],
   remarkPlugins: [unwrapMdxCodeBlocks, emoji, headings, toc],
   beforeDefaultRemarkPlugins: [],
   beforeDefaultRehypePlugins: [],
 };
 
+const compilerCache = new Map<string | Options, [Processor, Options]>();
+
 type Options = RemarkAndRehypePluginOptions & {
   staticDirs: string[];
   siteDir: string;
@@ -119,40 +128,48 @@ export default async function mdxLoader(
 
   const hasFrontMatter = Object.keys(frontMatter).length > 0;
 
-  const options: Options = {
-    ...reqOptions,
-    remarkPlugins: [
-      ...(reqOptions.beforeDefaultRemarkPlugins || []),
-      ...DEFAULT_OPTIONS.remarkPlugins,
-      [
-        transformImage,
-        {
-          staticDirs: reqOptions.staticDirs,
-          filePath,
-          siteDir: reqOptions.siteDir,
-        },
+  if (!compilerCache.has(this.query)) {
+    const options: Options = {
+      ...reqOptions,
+      remarkPlugins: [
+        ...(reqOptions.beforeDefaultRemarkPlugins || []),
+        ...DEFAULT_OPTIONS.remarkPlugins,
+        [
+          transformImage,
+          {
+            staticDirs: reqOptions.staticDirs,
+            siteDir: reqOptions.siteDir,
+          },
+        ],
+        [
+          transformLinks,
+          {
+            staticDirs: reqOptions.staticDirs,
+            siteDir: reqOptions.siteDir,
+          },
+        ],
+        ...(reqOptions.remarkPlugins || []),
       ],
-      [
-        transformLinks,
-        {
-          staticDirs: reqOptions.staticDirs,
-          filePath,
-          siteDir: reqOptions.siteDir,
-        },
+      rehypePlugins: [
+        ...(reqOptions.beforeDefaultRehypePlugins || []),
+        ...DEFAULT_OPTIONS.rehypePlugins,
+        ...(reqOptions.rehypePlugins || []),
       ],
-      ...(reqOptions.remarkPlugins || []),
-    ],
-    rehypePlugins: [
-      ...(reqOptions.beforeDefaultRehypePlugins || []),
-      ...DEFAULT_OPTIONS.rehypePlugins,
-      ...(reqOptions.rehypePlugins || []),
-    ],
-    filepath: filePath,
-  };
+    };
+    compilerCache.set(this.query, [
+      createCompiler(options as MDXOptions),
+      options,
+    ]);
+  }
+
+  const [compiler, options] = compilerCache.get(this.query)!;
 
   let result;
   try {
-    result = await mdx(content, options);
+    result = await compiler.process({
+      contents: content,
+      path: this.resourcePath,
+    });
   } catch (err) {
     return callback(err as Error);
   }
@@ -212,6 +229,7 @@ ${assets ? `export const assets = ${createAssetsExportCode(assets)};` : ''}
 `;
 
   const code = `
+${pragma}
 import React from 'react';
 import { mdx } from '@mdx-js/react';
 

packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts

@@ -27,11 +27,14 @@ const {
   loaders: {inlineMarkdownImageFileLoader},
 } = getFileLoaderUtils();
 
-interface PluginOptions {
-  filePath: string;
+type PluginOptions = {
   staticDirs: string[];
   siteDir: string;
-}
+};
+
+type Context = PluginOptions & {
+  filePath: string;
+};
 
 async function toImageRequireNode(
   node: Image,
@@ -89,7 +92,7 @@ async function ensureImageFileExist(imagePath: string, sourceFilePath: string) {
 
 async function getImageAbsolutePath(
   imagePath: string,
-  {siteDir, filePath, staticDirs}: PluginOptions,
+  {siteDir, filePath, staticDirs}: Context,
 ) {
   if (imagePath.startsWith('@site/')) {
     const imageFilePath = path.join(siteDir, imagePath.replace('@site/', ''));
@@ -123,7 +126,7 @@ async function getImageAbsolutePath(
   }
 }
 
-async function processImageNode(node: Image, options: PluginOptions) {
+async function processImageNode(node: Image, options: Context) {
   if (!node.url) {
     throw new Error(
       `Markdown image URL is mandatory in "${toMessageRelativeFilePath(
@@ -149,10 +152,10 @@ async function processImageNode(node: Image, options: PluginOptions) {
 }
 
 const plugin: Plugin<[PluginOptions]> = (options) => {
-  const transformer: Transformer = async (root) => {
+  const transformer: Transformer = async (root, file) => {
     const promises: Promise<void>[] = [];
     visit(root, 'image', (node: Image) => {
-      promises.push(processImageNode(node, options));
+      promises.push(processImageNode(node, {...options, filePath: file.path!}));
     });
     await Promise.all(promises);
   };

packages/docusaurus-mdx-loader/src/remark/transformLinks/index.ts

@@ -25,11 +25,14 @@ const {
   loaders: {inlineMarkdownLinkFileLoader},
 } = getFileLoaderUtils();
 
-interface PluginOptions {
-  filePath: string;
+type PluginOptions = {
   staticDirs: string[];
   siteDir: string;
-}
+};
+
+type Context = PluginOptions & {
+  filePath: string;
+};
 
 // transform the link node to a jsx link with a require() call
 function toAssetRequireNode(node: Link, assetPath: string, filePath: string) {
@@ -71,7 +74,7 @@ async function ensureAssetFileExist(assetPath: string, sourceFilePath: string) {
 
 async function getAssetAbsolutePath(
   assetPath: string,
-  {siteDir, filePath, staticDirs}: PluginOptions,
+  {siteDir, filePath, staticDirs}: Context,
 ) {
   if (assetPath.startsWith('@site/')) {
     const assetFilePath = path.join(siteDir, assetPath.replace('@site/', ''));
@@ -96,7 +99,7 @@ async function getAssetAbsolutePath(
   return null;
 }
 
-async function processLinkNode(node: Link, options: PluginOptions) {
+async function processLinkNode(node: Link, options: Context) {
   if (!node.url) {
     // try to improve error feedback
     // see https://github.com/facebook/docusaurus/issues/3309#issuecomment-690371675
@@ -129,10 +132,10 @@ async function processLinkNode(node: Link, options: PluginOptions) {
 }
 
 const plugin: Plugin<[PluginOptions]> = (options) => {
-  const transformer: Transformer = async (root) => {
+  const transformer: Transformer = async (root, file) => {
     const promises: Promise<void>[] = [];
     visit(root, 'link', (node: Link) => {
-      promises.push(processLinkNode(node, options));
+      promises.push(processLinkNode(node, {...options, filePath: file.path!}));
     });
     await Promise.all(promises);
   };