perf(v2): improve blog mdx-loader and postcss loader (#4355)

* perf(v2): improve blog mdx-loader and postcss loader

* Adjust advanced preset settings

* Update css-loader

packages/docusaurus-plugin-content-blog/src/__tests__/linkify.test.ts

@@ -7,7 +7,7 @@
 
 import fs from 'fs-extra';
 import path from 'path';
-import {linkify, LinkifyParams} from '../blogUtils';
+import {linkify, LinkifyParams, getPostsBySource} from '../blogUtils';
 import {BlogBrokenMarkdownLink, BlogContentPaths, BlogPost} from '../types';
 
 const siteDir = path.join(__dirname, '__fixtures__', 'website');
@@ -46,7 +46,7 @@ const transform = (filePath: string, options?: Partial<LinkifyParams>) => {
     fileContent,
     siteDir,
     contentPaths,
-    blogPosts,
+    blogPostsBySource: getPostsBySource(blogPosts),
     onBrokenMarkdownLink: (brokenMarkdownLink) => {
       throw new Error(
         `Broken markdown link found: ${JSON.stringify(brokenMarkdownLink)}`,

packages/docusaurus-plugin-content-blog/src/blogUtils.ts

@@ -12,6 +12,7 @@ import path from 'path';
 import {resolve} from 'url';
 import readingTime from 'reading-time';
 import {Feed} from 'feed';
+import {keyBy} from 'lodash';
 import {
   PluginOptions,
   BlogPost,
@@ -30,12 +31,17 @@ import {
   getDateTimeFormat,
 } from '@docusaurus/utils';
 import {LoadContext} from '@docusaurus/types';
-import {keyBy} from 'lodash';
 
 export function truncate(fileString: string, truncateMarker: RegExp): string {
   return fileString.split(truncateMarker, 1).shift()!;
 }
 
+export function getPostsBySource(
+  blogPosts: BlogPost[],
+): Record<string, BlogPost> {
+  return keyBy(blogPosts, (item) => item.metadata.source);
+}
+
 // YYYY-MM-DD-{name}.mdx?
 // Prefer named capture, but older Node versions do not support it.
 const FILENAME_PATTERN = /^(\d{4}-\d{1,2}-\d{1,2})-?(.*?).mdx?$/;
@@ -247,7 +253,7 @@ export type LinkifyParams = {
   fileContent: string;
 } & Pick<
   BlogMarkdownLoaderOptions,
-  'blogPosts' | 'siteDir' | 'contentPaths' | 'onBrokenMarkdownLink'
+  'blogPostsBySource' | 'siteDir' | 'contentPaths' | 'onBrokenMarkdownLink'
 >;
 
 export function linkify({
@@ -255,18 +261,12 @@ export function linkify({
   contentPaths,
   fileContent,
   siteDir,
-  blogPosts,
+  blogPostsBySource,
   onBrokenMarkdownLink,
 }: LinkifyParams): string {
   // TODO temporary, should consider the file being in localized folder!
   const folderPath = contentPaths.contentPath;
 
-  // TODO perf refactor: do this earlier (once for all md files, not per file)
-  const blogPostsBySource: Record<string, BlogPost> = keyBy(
-    blogPosts,
-    (item) => item.metadata.source,
-  );
-
   let fencedBlock = false;
   const lines = fileContent.split('\n').map((line) => {
     if (line.trim().startsWith('```')) {

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -50,6 +50,7 @@ import {
   generateBlogFeed,
   generateBlogPosts,
   getContentPathList,
+  getPostsBySource,
 } from './blogUtils';
 
 export default function pluginContentBlog(
@@ -415,7 +416,7 @@ export default function pluginContentBlog(
         siteDir,
         contentPaths,
         truncateMarker,
-        blogPosts,
+        blogPostsBySource: getPostsBySource(blogPosts),
         onBrokenMarkdownLink: (brokenMarkdownLink) => {
           if (onBrokenMarkdownLinks === 'ignore') {
             return;

packages/docusaurus-plugin-content-blog/src/types.ts

@@ -151,6 +151,6 @@ export type BlogMarkdownLoaderOptions = {
   siteDir: string;
   contentPaths: BlogContentPaths;
   truncateMarker: RegExp;
-  blogPosts: BlogPost[];
+  blogPostsBySource: Record<string, BlogPost>;
   onBrokenMarkdownLink: (brokenMarkdownLink: BlogBrokenMarkdownLink) => void;
 };