parseMarkdownContentTitle: extremely slow Regex

[slorber]

🐛 Bug Report

We have a regex perf issue when extracting the markdown title from content, and it can significantly affect a Docusaurus site, making it totally unusable.

@lex111 this seems related to your change here: #4646

Removing the part that excludes the MDX imports solves the perf problem.

Temporary workaround: use a Markdown title at the top of the file, above the MDX imports to solve this problem:

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

Originally reported here: #4713
This is not a Webpack 5 bug, it happens on alpha 74 too (author upgraded from 70->75)

Repo/branch: https://github.com/hanabi/hanabi.github.io/tree/doc-bug
(requires Python3, not the most convenient repro).

Example problematic file: https://github.com/hanabi/hanabi.github.io/blob/doc-bug/docs/beginner.md

Using a lot of MDX imports at the top:

---
id: beginner
title: Beginner's Guide
---

import CardLayout1 from '@site/image-generator/yml/beginner/card-layout-1.yml';
import CardLayout2 from '@site/image-generator/yml/beginner/card-layout-2.yml';
import Chop1 from '@site/image-generator/yml/beginner/chop-1.yml';
import Chop2 from '@site/image-generator/yml/beginner/chop-2.yml';
import BasicClue from '@site/image-generator/yml/beginner/basic-clue.yml';
import ChopFocus from '@site/image-generator/yml/beginner/chop-focus.yml';
import LeftMostFocus from '@site/image-generator/yml/beginner/left-most-focus.yml';
import TwoSave from '@site/image-generator/yml/beginner/2-save.yml';
import FiveSave from '@site/image-generator/yml/beginner/5-save.yml';
import CriticalSave from '@site/image-generator/yml/beginner/critical-save.yml';
import DelayedPlayClue from '@site/image-generator/yml/beginner/delayed-play-clue.yml';
import GoodTouchPrinciple1 from '@site/image-generator/yml/beginner/good-touch-principle-1.yml';
import GoodTouchPrinciple2 from '@site/image-generator/yml/beginner/good-touch-principle-2.yml';
import GoodTouchPrinciple3 from '@site/image-generator/yml/beginner/good-touch-principle-3.yml';
import Prompt1 from '@site/image-generator/yml/beginner/prompt-1.yml';
import Prompt2 from '@site/image-generator/yml/beginner/prompt-2.yml';
import Prompt3 from '@site/image-generator/yml/beginner/prompt-3.yml';
import Prompt4 from '@site/image-generator/yml/beginner/prompt-4.yml';
import Finesse1 from '@site/image-generator/yml/beginner/finesse-1.yml';
import Finesse2 from '@site/image-generator/yml/beginner/finesse-2.yml';

- Are you looking to start playing Hanabi with the *Hyphen-ated Group*? Fantastic - we are always looking to welcome new players. Take 15 minutes and go over this guide so that you can get up to speed with the basics.
- Alternatively, are you looking to learn some solid fundamental strategies to use to play Hanabi with your own group of friends? Feel free to adopt these strategies.
- Is a 15 minute briefing really necessary? Well, yes and no. If you try to play with our group and don't understand what basic clues mean, it is going to be analogous to a group of people trying to find each other in a dark room by running around with their arms flailing.
- This guide assumes that you are already familiar with the basic rules of Hanabi. If you need to brush up on them, either [read them here](https://github.com/Zamiell/hanabi-live/blob/master/docs/RULES.md) or [watch this video](https://www.youtube.com/watch?v=VrFCekQb4nY).

<br />

## Card Layout

In this guide, there will be some images to show off the concepts introduced.

<CardLayout1 />

- The five **play stacks** are on the left.
- The **player hands** are on the right.
- Alice is always player 1. (She will always go first.)
- Bob is always player 2. (He will always go second.)
- Cards are drawn and added to the left side to each hand.
  - Thus, Alice's newest card is the blue 1 and Bob's newest card is the red 1.
- Conversely, the oldest card is the right-most card.
  - Thus, Alice's oldest card is the blue 5 and Bob's oldest card is the red 5.
- A card's *slot* refers to its position in the hand, from left to right.
  - Thus, the blue 1 is on slot 1, the blue 2 is on slot 2, etc.

<CardLayout2 />

- Arrows indicate that a card was "touched" by the last clue that was given.
- Clued cards will have permanent yellow borders around them.

<br />

## The Chop

[lex111]

Oh, sorry, this is really bad, but I have no idea clue how to optimize it.

[slorber]

np, I'll try to figure this out. Not very skilled in regexp optimizations though 😅