Fazit zunächst:
Tree-Shaking, auch Tree-Shaking-Optimierung genannt, reduziert das endgültige Verpackungsvolumen und die Ladezeit der Anwendung, indem redundanter Code entfernt wird.
Sein Prinzip besteht darin, die modulare Syntax von ES6 zu verwenden, den Import und Export, den wir üblicherweise verwenden. Durch die statische Analyse der Referenzbeziehungen zwischen Codes können wir feststellen, auf welche Module nicht verwiesen wird, und dann die entsprechenden Codes löschen.
Tree-Shaking wird auf der untersten Ebene von Webpack und Vue3 verwendet, um das Verpackungsvolumen des Projekts zu optimieren.
Dieser Modulmechanismus kann die Datenstruktur des Abhängigkeitsdiagramms basierend auf einem Eintrag statisch aufbauen, ohne den Code tatsächlich auszuführen. Das heißt, unnötiger Code kann analysiert werden, ohne dass der Code ausgeführt wird.
1. Dokumentenadresse
Tree Shaking | Webpack Chinesische Dokumentation
2. Was ist Baumschütteln?
Zur Optimierung der Front-End-Leistung führte ES6 den Tree-Shaking-Mechanismus ein .
Tree Shaking bedeutet, dass, wenn wir andere Module in das Projekt einführen, automatisch der Code herausgeschüttelt wird, den wir nicht verwenden oder der Code, der nie ausgeführt wird. Er wird in der Uglify-Phase erkannt und nicht in die gepackt bündeln.
Es versteht sich, dass die Verwendung von Tools zum „Aufrütteln“ unserer JS-Dateien und „Ausrütteln“ des nicht verwendeten Codes eine Kategorie der Leistungsoptimierung darstellt.
Beispielsweise wird im Projekt auf ein Modulelement verwiesen. Tatsächlich werden jedoch nur die Button-Komponente und die Input-Komponente verwendet. Dann eliminiert Webpack nach dem Packen neben den oben genannten Komponenten auch andere Elementkomponenten.
Dadurch wird das Verpackungsvolumen reduziert und eine Leistungsoptimierung erreicht.
Insbesondere gibt es im Webpack-Projekt eine Eintragsdatei, die dem Stamm eines Baums entspricht. Die Eintragsdatei verfügt über viele abhängige Module, die den Zweigen entsprechen. Obwohl es von einem bestimmten Modul abhängt, werden in tatsächlichen Situationen nur bestimmte Funktionen davon tatsächlich verwendet. Durch Tree-Shaking werden ungenutzte Module abgeschüttelt, um den Zweck zu erreichen, nutzlosen Code zu löschen.
Mit anderen Worten: Exporte, auf die nicht verwiesen wird, werden beim Packen gelöscht;
Unterstützt nur ES6-Modulcode;
In der Produktionsumgebung ist es standardmäßig aktiviert.
3. Die Rolle des Baumschüttelns
Der Effekt des Tree Shaking besteht darin, die Größe und Ladezeit Ihrer Anwendung zu reduzieren.
Da nur die Module enthalten sind, die tatsächlich verwendet werden, wird das Laden unnötigen Codes vermieden, wodurch Ladezeiten und Netzwerkanfragen reduziert und die Anwendungsleistung verbessert werden.
Gleichzeitig kann die Reduzierung der Anwendungsgröße auch die Zeit verkürzen, die Benutzer zum Herunterladen und Installieren der Anwendung benötigen.
4. Drei Schritte zur Verwendung von Tree-Shaking im Webpack
①Finden Sie ungenutzten Code
Module müssen den ES6-Import und -Export verwenden, um nicht verwendeten Code zu finden.
Tree Shaking unterstützt nur die ESM-Einführungsmethode und nicht die Common JS-Einführungsmethode .
- ESM: Export + Import
- Common JS:module.exports + require
注意：如果想要做到 tree shaking，那么在引入模块时就应该避免全部引入。应该引入局部，才可以触发 tree shaking 机制。
// 导入所有内容（不会触发 tree-shaking）
import lodash from 'lodash';
// 导入命名导出 (会触发 tree-shaking)
import { debounce } from 'lodash';
// 直接导入项目 (会触发 tree-shaking)
import debounce from 'lodash/lib/debounce';
② Die Markierung hat keine Nebenwirkungen
sideEffects: false ist als „keine Nebenwirkungen“ markiert und kann sicher entfernt werden .
„sideEffects“ können auch in der Konfigurationsoption module.rules festgelegt werden.
Die neue offizielle Version von Webpack 4 erweitert diese Erkennungsfunktion durch das „sideEffects“-Attribut von package.json als Tag. Stellt dem Compiler einen Hinweis zur Verfügung, der angibt, welche Dateien im Projekt „
pure(reine ES2015-Module)“ sind, sodass nicht verwendete Teile der Dateien sicher entfernt werden können.
// 所有文件都无副作用，可以 tree-shaking
{
"name": "test-demo",
"sideEffects": false,
}
// 所有文件都有副作用，都不可以 tree-shaking
{
"sideEffects": true
}
// 只有这些文件有副作用，所有其他文件都可以 tree-shaking，但这些文件必须保留
{
"sideEffects": [
"./src/file1.js",
"./src/file2.js"
]
}
③ Konfigurieren Sie die Umgebung und löschen Sie sie sicher
In der Entwicklungsumgebung werden Bundles nicht komprimiert
// webpack.config.js
module.exports = {
// ...
mode: 'development',
optimization: {
usedExports: true
}
};
2) Produktionsumgebung
Durch die Import- und Exportsyntax von ES6 haben wir den „toten Code“ identifiziert, der gelöscht werden muss.
Sie müssen sie aber nicht nur finden, sondern auch aus dem Bundle löschen . Dazu müssen wir die Moduskonfigurationsoption auf Produktion setzen.
// webpack.config.js
module.exports = {
// ...
mode: 'production',
};
5. Die Auswirkungen von Nebenwirkungen auf globales CSS
Für Dateien, die direkt in JS-Dateien importiert werden, wie z. B. globales CSS, werden sie nicht in ein CSS-Modul konvertiert.
/* reset.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: red;
}
// main.js
import "@/assets/css/reset.css"
Problem erscheint:
Nachdem dieser Code gepackt wurde, werden Sie feststellen, dass der Stil beim Öffnen der Seite nicht angewendet wird.
Der Grund dafür ist: Nachdem wir „sideEffects“ oben auf „false“ gesetzt haben , werden alle Dateien „Tree Shaking“ sein und durch den Import eingeführtes CSS wird als nutzloser Code behandelt .
Lösung:
Um dieses Problem zu lösen, können Sie sideEffects: true zur Regelkonfiguration des Loaders hinzufügen.
Weisen Sie Webpack an, bei diesen Dateien kein Tree-Shaking durchzuführen.
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
sideEffects: true
}
]
},
};
6. Zusammenfassung
① Dieser Mechanismus kann durch die Verwendung von Import und Export in der Modulsyntax von ES6 (ES2015) ausgelöst werden;
Dies liegt daran, dass Tree Shaking nur mit statischen Modulen funktioniert . Das Laden des ECMAScript 6-Moduls erfolgt statisch, sodass der gesamte Abhängigkeitsbaum statisch aus dem Parse-Syntaxbaum abgeleitet werden kann. Daher ist die Verwendung von Tree Shaking in ES6 sehr einfach.
② Fügen Sie in der package.json-Datei des Projekts das Attribut „sideEffects“ hinzu.
③ Verwenden Sie das Konfigurationselement im Modus „Produktion“, um weitere Optimierungselemente zu aktivieren , einschließlich Codekomprimierung und Tree Shaking.
④ Stellen Sie sicher, dass kein Compiler die Syntax Ihres ES2015-Moduls in CommonJS konvertiert
(Übrigens ist dies das Standardverhalten von @babel/preset-env, das derzeit häufig verwendet wird. Weitere Informationen finden Sie in der Dokumentation .)
④ Das Schütteln eines Baumes ähnelt einem Baum mit langreifen Äpfeln. Das Abschütteln der reifen Äpfel verringert die Belastung des Baumes, der diesen Mechanismus realisiert.
Sie können sich Ihre Bewerbung als einen Baum vorstellen. Grün stellt den tatsächlich verwendeten Quellcode und die Bibliothek dar, bei denen es sich um die lebenden Blätter des Baums handelt. Grau steht für nicht referenzierten Code, die verwelkten Blätter der Bäume im Herbst. Um die abgestorbenen Blätter zu entfernen, müssen Sie den Baum schütteln, damit sie herunterfallen.
⑤ Es ist zu beachten, dass Tree Shaking nur ungenutzte Module eliminieren kann. Bei Modulen, die zwar genutzt, aber nur teilweise genutzt werden, wie z. B. Module, die nur wenige Funktionen nutzen, kann Tree Shake ungenutzte Funktionen nicht eliminieren.
Erwägen Sie in diesem Fall den Einsatz von Techniken wie Code-Splitting, um die Anwendungsleistung weiter zu optimieren.