[Zusammenstellung und Weitergabe] Einige Webpack-Interviewfragen (mit Antwortanalyse)

Sprechen Sie über Ihr Verständnis von Webpack

1 Was ist Webpack?

webpack ist ein statisches Modul-Bundler. Wenn Webpack eine Anwendung verarbeitet, erstellt es rekursiv ein Abhängigkeitsdiagramm, das jedes Modul enthält, das die Anwendung benötigt, und packt diese Module dann in ein oder mehrere Bundles.

Webpack ist wie eine Produktionslinie. Es muss eine Reihe von Verarbeitungsprozessen (Loadern) durchlaufen, bevor die Quelldateien in Ausgabeergebnisse umgewandelt werden können. Jeder Verarbeitungsprozess in dieser Produktionslinie hat eine einzige Verantwortung und es bestehen Abhängigkeiten zwischen mehreren Prozessen. Erst nachdem die aktuelle Verarbeitung abgeschlossen ist, kann sie zur Verarbeitung an den nächsten Prozess übergeben werden.
Ein Plug-In ist wie eine in die Produktionslinie eingefügte Funktion, die die Ressourcen auf der Produktionslinie zu einem bestimmten Zeitpunkt verarbeitet. Webpack sendet Ereignisse während des laufenden Prozesses. Das Plug-in muss nur die Ereignisse abhören, die es interessiert, und kann sich dieser Produktionslinie anschließen, um den Betrieb der Produktionslinie zu ändern.

2. Können Sie über den Verpackungsprozess/Bauprozess sprechen? 3. Können Sie über die Optimierung des Front-End-Betriebs sprechen? Webpacks Verpackungsprozess/Verpackungsprinzip/Bauprozess?

Der laufende Prozess von Webpack ist ein serieller Prozess, und sein Arbeitsablauf besteht darin, verschiedene Plug-Ins in Reihe zu verbinden.

Die Befehlszeilenausführung des npx webpack-Verpackungsbefehls beginnt 1.Kompilierungsparameter initialisieren: Parameter aus Konfigurationsdateien und Shell-Befehlen lesen und zusammenführen
2.Kompilieren starten : Initialisieren Sie das Compiler-Objekt gemäß den im vorherigen Schritt erhaltenen Parametern, laden Sie alle konfigurierten Plugins und führen Sie die Ausführungsmethode des Objekts aus, um die Kompilierung zu starten.

3. Eintrag ermitteln: Alle Eintragsdateien entsprechend dem Eintrag in der Konfiguration finden

4. Modul kompilieren: Aus der Eintragsdatei ausgelöst, alle konfigurierten Loader aufrufen, um das auszuführen Modul Übersetzen, ermitteln Sie dann die Module, von denen das Modul abhängt, und wiederholen Sie dann diesen Schritt, bis alle eintragsabhängigen Dateien übersetzt sind. npx webpack打包命令开始
1.初始化编译参数:从配置文件和shell命令中读取与合并参数
2.开始编译:根据上一步得到的参数初始化Compiler对象，加载所有配置的Plugin，执行对象的 run 方法开始执行编译。
3.确定入口:根据配置中的 entry 找出所有的入口文件
4.编译模块:从入口文件触发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，然后递归本步骤直到所有入口依赖的文件都进行翻译。
5.完成模块编译:在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系图。
6.输出资源：根据依赖关系图，组装成一个个包含多个模块的Chunk，再把每个Chunk转化成一个单独的文件加入到输出列表，根据配置确定输出的路径和文件名，输出。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑。

总结

• 初始化:从配置文件和shell命令中读取与合并参数，根据参数初始化Compiler实例，加载Plugin(注册所有配置的插件)，调用Compiler实例的run方法开始执行编译。

Compiler编译对象掌控者webpack生命周期，不执行具体的任务，只是进行一些调度工作。比如执行模块创建、依赖收集、分块、打包等
调用run之后，创建Compiltation实例，每次构建都会新创建一个Compiltation实例，包含了这次构建的基本信息
Webpack 5. Modulkompilierung abschließen: Nachdem in Schritt 4 Loader zum Übersetzen aller Module verwendet wurde, werden der endgültige übersetzte Inhalt jedes Moduls und das Abhängigkeitsdiagramm zwischen ihnen erhalten.

6. Ausgaberessourcen: Gemäß dem Abhängigkeitsdiagramm in Chunks mit mehreren Modulen zusammenstellen, dann jeden Chunk in eine separate Datei konvertieren und zur Ausgabeliste hinzufügen und die Ausgabe entsprechend der Konfiguration bestimmen Pfad und Dateiname, Ausgabe.

Im obigen Prozess sendet Webpack bestimmte Ereignisse zu bestimmten Zeitpunkten, und das Plug-in führt eine bestimmte Logik aus, nachdem es die interessierenden Ereignisse abgehört hat.

Zusammenfassung

Initialisierung: Parameter aus der Konfigurationsdatei und dem Shell-Befehl lesen und zusammenführen, die Compiler-Instanz entsprechend den Parametern initialisieren, das Plugin laden (alle konfigurierten Plug-Ins registrieren), die Ausführungsmethode des Compilers aufrufen Instanz, um die Kompilierung zu starten.

Compiler-Kompilierungsobjekt steuert den Webpack-Lebenszyklus. Es führt keine spezifischen Aufgaben aus, sondern führt nur einige Planungsarbeiten aus. Führen Sie beispielsweise die Modulerstellung, Abhängigkeitssammlung, Chunking, Paketierung usw. durch.

Erstellen Sie nach dem Aufruf von run eine Kompilierungsinstanz. Jeder Build erstellt eine neue Kompilierungsinstanz, die die grundlegenden Informationen dieses Builds enthält

WebpackCode> sendet bestimmte Ereignisse zu bestimmten Zeitpunkten und das Plug-in führt eine bestimmte Logik aus, nachdem es die interessierenden Ereignisse abgehört hat.

Kompilierung: Ausgelöst durch den Eintrag wird jedes Modul seriell zum entsprechenden Loader aufgerufen, um das Modul zu übersetzen. Anschließend werden die Module, von denen das Modul abhängt, gefunden und rekursiv kompiliert.

Beginnen Sie mit dem Parsen der Datei, um den AST-Syntaxbaum aus dem in der Konfigurationsdatei (webpack.config.js) angegebenen Eintrag zu erstellen.

Fügen Sie gemäß dem Abhängigkeitsdiagramm einen Chunk zusammen, der mehrere Module enthält, und konvertieren Sie jedes einzelne Chunk in Dateiausgabe.

Unterschiedliche Einträge generieren unterschiedliche Chunks, und der dynamische Import generiert auch einen eigenen Chunk

Welche Rolle spielt der Loader in Webpack/Was ist ein Loader?

Loader ist ein in

Webpack bereitgestellter Mechanismus zur Verarbeitung mehrerer Dateiformate

Da Webpack nur JS und JSON kennt, entspricht Loader einem Übersetzer, der andere Arten von Ressourcen vorverarbeitet.

Wird zum Konvertieren des „Quellcodes“ des Moduls verwendet. 🎜 Der Loader unterstützt Kettenaufrufe und die Reihenfolge der Aufrufe ist von rechts nach links. **Jeder Loader in der Kette verarbeitet zuvor verarbeitete Ressourcen und wird schließlich zu JS-Code. 🎜 Durch die Vorverarbeitungsfunktionen des Loaders können Sie dem JavaScript-Ökosystem mehr Möglichkeiten bieten. 🎜🎜🎜🎜🎜Was sind die gängigen Lader? 🎜🎜🎜🎜less-Loader: Kompilieren Sie weniger Dateien in CSS-Dateien🎜🎜🎜🎜Während der Entwicklung verwenden wir häufig weniger Präprozessoren, um CSS-Stile zu schreiben und die Entwicklungseffizienz zu verbessern🎜

• CSS-Loader: Verwandeln Sie die CSS-Datei in ein CommonJS-Modul und laden Sie sie in JS. Der Inhalt des Moduls ist eine Stilzeichenfolge.
• Style-Loader: Erstellen Sie ein Style-Tag und fügen Sie die Style-Ressource in JS in das Tag ein , und fügen Sie das Tag zu Effective in head hinzu
• ts-loader: Typescript-Dateien packen und kompilieren

Welche Rolle spielt das Plugin? Was ist /Plugin

Plugin ist leistungsfähiger? Sein Hauptzweck besteht darin, Dinge zu lösen, die mit dem Loader nicht erreicht werden können, wie z. B. Verpackungsoptimierung und Codekomprimierung.
Nachdem das Plugin geladen wurde, werden die vom Plugin definierten Funktionen zu einem bestimmten Zeitpunkt während der Webpack-Erstellung ausgelöst, um Webpack dabei zu helfen, etwas zu tun. Implementieren Sie funktionale Erweiterungen für Webpack.

Was sind die gängigen Plugins?

• HTML-Webpack-Plugin verarbeitet standardmäßig einen leeren HTML-Code und importiert automatisch alle Ressourcen (js/css) für die Verpackungsausgabe -css-extract -plugin Das gepackte CSS befindet sich in der JS-Datei. Dieses Plug-in kann das CSS separat extrahieren
• clean-webpack-plugin Bei jedem Packen löscht das CleanWebpackPlugin-Plugin automatisch das letzte Paket

Webpack Ausführungsreihenfolge der Plugins (Lademechanismus)?

Der Unterschied zwischen Loader und Plugin in Webpack

Ich sage immer, dass Webpack wie eine Produktionslinie ist. Es muss eine Reihe von Verarbeitungsprozessen (Loader) durchlaufen, bevor die Quelldatei in eine Ausgabe konvertiert werden kann Ergebnis. Jeder Verarbeitungsprozess in dieser Produktionslinie hat eine einzige Verantwortung und es bestehen Abhängigkeiten zwischen mehreren Prozessen. Erst nachdem die aktuelle Verarbeitung abgeschlossen ist, kann sie zur Verarbeitung an den nächsten Prozess übergeben werden.

Ein Plug-In ist wie eine in die Produktionslinie eingefügte Funktion, die die Ressourcen auf der Produktionslinie zu einem bestimmten Zeitpunkt verarbeitet. Webpack sendet Ereignisse während des laufenden Prozesses. Das Plug-in muss nur die Ereignisse abhören, die es interessiert, und kann sich dieser Produktionslinie anschließen, um den Betrieb der Produktionslinie zu ändern.
Oder verwenden Sie die vorherige Zusammenfassung, um darüber zu sprechen, was Loader und Plugin jeweils sind Loader: 1. Herunterladen 2.
Plugin verwenden: 1. Herunterladen 2. Zitieren 3. Verwenden

Welche Optimierungsmethoden hat Webpack durchgeführt? Welche Optimierungsmethoden gibt es?

Wie verwende ich Webpack, um die Front-End-Leistung zu optimieren? Die Frage betrifft die Optimierung der Produktionsumgebung.
Wie kann die Build-Geschwindigkeit von Webpack verbessert werden? Die Frage betrifft die Optimierung der Build-Geschwindigkeit. Tree-Shaking löscht nicht verwendeten Code, um die Front-End-Leistung zu optimieren/Build-Geschwindigkeit zu erhöhen. Tree-Shaking ist eine Technologiepaketierung zur Eliminierung von totem Code, die auf der ES-Modulspezifikation basiert. Erkennen und markieren Sie während des Verpackungsprozesses die Module, auf die im Projekt nicht verwiesen wurde, löschen Sie die Module, auf die nicht verwiesen wurde, verbessern Sie die Build-Geschwindigkeit und verkürzen Sie die Programmlaufzeit.

Was ist beim Baumrütteln zu beachten?
1. Standardfunktion
.

2. Sie müssen ES6-Spezifikationen verwenden, um Modulcode zu schreiben. ES6-Modulabhängigkeiten sind deterministisch und haben nichts mit dem Laufzeitstatus zu tun.

3. Versuchen Sie, keinen Code mit Nebenwirkungen zu schreiben. Sie haben beispielsweise eine Funktion zur sofortigen Ausführung geschrieben, externe Variablen in der Funktion verwendet usw. Über Nebenwirkungen

Wie verwende ich Webpack, um die Front-End-Leistung zu optimieren? Codekomprimierung

Load on DemandCode Split SplitChunks – konfiguriert im Optimierungskonfigurationselement

mode = production ，生产环境默认开启tree-shaking
1. Sie können den Code in node__mudules separat in eine Chunk-Ausgabe packen (z. B. mit jqury? )
2. Es wird automatisch analysiert, ob öffentliche Dateien im Multi-Entry-Block vorhanden sind. Wenn vorhanden, wird dieser in einen separaten Block gepackt und nicht wiederholt gepackt -Packaging

Normalerweise wird node_module in eine Datei gepackt.

Verwenden Sie die DLL-Technologie, um Frameworks und Bibliotheken, die nicht häufig separat aktualisiert werden, zu verpacken und einen Block zu generieren.

Routing für Lazy Load verwenden Code, auf den die import()-Funktionsmodule verweisen, wird in ein separates Paket gepackt und in dem Verzeichnis abgelegt, in dem der Block gespeichert ist. Wenn der Browser diese Codezeile ausführt, fordert er diese Ressource automatisch an und implementiert das asynchrone Laden.

Wie konfiguriere ich Komprimierungscode in Webpack? Was ist komprimiert?

1. Konfigurieren Sie das Plug-in als Kompressor für die Komprimierung im Optimierungskonfigurationselement.

2. Verwenden Sie dieses Plug-in zur Komprimierung in Plugins

• js-Komprimierung: mit terser-webpack-plugin

css-Komprimierung: mit „optimize-css-assets-webpack-plugin“-Plugin

Konsole löschen, Kommentare , Leerzeichen, Zeilenumbrüche, nicht verwendete CSS-Codes usw.

Wie kann die Webpack-Erstellungsgeschwindigkeit verbessert werden?

Idee 1: Reduzieren Sie die Dateien oder Codes, die erstellt werden müssen.

• Beim HMR (Hot Module Replacement) werden beim Hot Module Replacement nur die geänderten Module neu erstellt – und zwar in der Entwicklungsumgebung.
• Verarbeitungsumfang einschränken: Nutzen Sie diese sinnvoll zwei Attribute schließen aus: Dateien und schließen ein, die nicht verarbeitet werden müssen: Dateien, die verarbeitet werden müssen
• Wenn der Babel-Cache zum zweiten Mal erstellt wird, wird der vorherige Cache gelesen und nur die geänderten Dateien werden neu erstellt
• Verwenden Sie DLL für die Unterverpackung –> Praktische Unterverpackung Muss geladen werden

Normalerweise wird node_module in eine Datei gepackt
Mithilfe der DLL-Technologie können Frameworks und Bibliotheken, die nicht häufig aktualisiert werden, separat gepackt werden, um eine zu generieren chunk
Der Quellcode des Projekts muss ebenfalls aufgeteilt werden und kann auf der Route zum Teilen gepackter Dateien basieren –> Wie implementiert man das verzögerte Laden von Routen? Wie implementiert man das asynchrone Laden von Komponenten im Webpack? Idee 2: Mehr Konstruktion ausführen Daher sind mehrere Prozesse erforderlich. Verpackung

【Verwandte Empfehlungen:

Javascript-Video-Tutorial
,
• Programmiervideo
】

Das obige ist der detaillierte Inhalt von[Zusammenstellung und Weitergabe] Einige Webpack-Interviewfragen (mit Antwortanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!