Umgehen Sie die Erkennung der require-Anweisung durch Bundler

In diesem Artikel analysieren wir, wie der React-Quellcode die Erkennung der require-Anweisung durch Bundler umgeht.

Durch die Verkettung der Zeichenfolge „require“ mit einer Zufallszahl (Math.random()) generiert der Code eine Zeichenfolge, die wie „require“ aussieht, vom Bundler jedoch während der statischen Analyse nicht direkt erkannt wird. Die Zeichenfolge wird dann in Slices unterteilt, um die ersten 7 Zeichen zu erhalten. Dabei wird sichergestellt, dass das Ergebnis immer „erforderlich“ ist (da „require“ in Math.random() zu etwas wie „require0.123456“ führt, das in „require“ zerlegt wird). .

All dieser Aufwand beim Aufrufen einer MacroTask namens setImmediate, die in der Node-Umgebung verfügbar ist.

setImmediate

Wenn Sie einen Code asynchron ausführen möchten,

Eine Möglichkeit besteht jedoch so schnell wie möglich darin, die von Node.js bereitgestellte Funktion setImmediate() zu verwenden:

setImmediate(() => {
 // run something
});

Jede als setImmediate()-Argument übergebene Funktion ist ein Rückruf, der in der nächsten Iteration der Ereignisschleife ausgeführt wird.

Lesen Sie mehr über setImmediate unter Nodejs Docs.

Warum sollten Bundler die Erkennung von Anforderungen vermeiden?

Browserumgebungen benötigen keine Node.js-Module:

React muss zwischen der Node.js-Umgebung (wo setImmediate verwendet wird) und der Browserumgebung (wo MessageChannel verwendet wird) unterscheiden. Wenn ein Bundler Bedarf erkennt, fügt er möglicherweise automatisch eine Node.js-Polyfüllung in das Browser-Bundle ein, was unnötig ist und den Code aufblähen kann.

Versehentliches Einschließen von Polyfill vermeiden:

Bundler wie Webpack enthalten häufig Polyfills für Node.js-APIs, wenn sie Bedarf erkennen. Dies ist problematisch für eine leichtgewichtige Bibliothek wie React, bei der solche Polyfills unnötig sind und die eigene Logik von React für den Umgang mit Umgebungen (Browser vs. Node.js) beeinträchtigen können.

Diese enqueueTask ist eine Fallback-Methode, die in ReactAct.js verwendet wird

// $FlowFixMe[invalid-computed-prop]
const nodeRequire = module && module[requireString];
// assuming we're in node, let's try to get node's
// version of setImmediate, bypassing fake timers if any.
enqueueTaskImpl = nodeRequire.call(module, 'timers').setImmediate;

timers ist ein Kernmodul in Node.js. Es bietet eine Reihe von Timerfunktionen, mit denen die Codeausführung in bestimmten Intervallen oder nach einer Verzögerung geplant werden kann. Diese Funktionen ähneln den globalen Timerfunktionen in

JavaScript (wie setTimeout und setInterval), aber sie werden als Teil des Timer-Moduls für zusätzliche Kontrolle und Präzision bereitgestellt.

<p>nodeRequire.call(module, 'timers')</p>

Über uns:

Bei Think Throo haben wir es uns zur Aufgabe gemacht, die fortgeschrittenen Codebasis-Architekturkonzepte zu vermitteln, die in Open-Source-Projekten verwendet werden.

Verzehnfachen Sie Ihre Programmierkenntnisse, indem Sie fortgeschrittene Architekturkonzepte in Next.js/React üben, die Best Practices erlernen und Projekte in Produktionsqualität erstellen.

Wir sind Open Source – https://github.com/thinkthroo/thinkthroo (Geben Sie uns einen Stern!)

Verbessern Sie die Fähigkeiten Ihres Teams mit unseren Fortgeschrittenenkursen basierend auf der Codebasis-Architektur. Kontaktieren Sie uns unter hello@thinkthroo.com, um mehr zu erfahren!

Referenzen:

1. https://github.com/facebook/react/blob/5d19e1c8d1a6c0b5cd7532d43b707191eaf105b7/packages/shared/enqueueTask.js#L23

2. https://nodejs.org/en/learn/asynchronous-work/understanding-setimmediate

3. https://nodejs.org/api/timers.html#setimmediatecallback-args

Das obige ist der detaillierte Inhalt vonUmgehen Sie die Erkennung der require-Anweisung durch Bundler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!