Heutzutage ist die populäre Meinung, dass die aktuellen Javascript-Frameworks unerschwinglich groß sind und das neue Svelte- Framework sehr kompakt ist. Daher muss jeder darauf umsteigen, und das Problem der Javasctipt-Größe wird von selbst gelöst.
Kürzlich gab es einen Artikel "Ist Svelte eine gute Wahl für die Implementierung eines Widgets?" mit Erfahrung in der Implementierung eines Projekts mit einer kritischen Bundle-Größe. Dies ist ein guter Grund, die Versprechen der PR-Manager von Svelte für ein echtes Projekt zu prüfen.
Lassen Sie es uns analysieren!
Ausgangsdaten
Das fragliche Projekt ist ein eingebettetes Widget, das als monolithisches Javascript-Bundle mit einer Gesamtgröße von 71 KB (einschließlich gzip) verteilt wird. Ist es viel oder wenig? In dem Artikel "Preis von JavaScript im Jahr 2019" wurde empfohlen, Bundles zu vermeiden, die größer als 50-100 KB sind. Das heißt, das aktuelle Projekt befindet sich in der gelben Zone, die Größe ist noch akzeptabel, aber es ist an der Zeit, darüber nachzudenken, wie neue Funktionen hinzugefügt werden können, und gleichzeitig in die Obergrenze von 100 KB zu passen.
Laden Sie jetzt dieses Skript herunter , formatieren Sie es und sehen Sie, was dort interessant ist.
Bundler-Einstellungen
Das erste, was beim Anzeigen des Codes auffällt, ist die Wiederholung dieses Musters:
function (t, e, n) {
t.exports = {
}
}
CommonJS . ES-, – Scope hoisting Tree-shaking. CommonJS-, .
, ES- , . webpack --display-optimization-bailout , .
" " Svelte, , .
, , , 20%, 14 .
, SVG JPG . , .
SVG. SVGO, -.
7 svg- 10 , , -, . SVGO 3 .
JPG. , 5927 , 183x72. , retina-. , . - https://squoosh.app/, . , , 7 .
, , SVGO , imagemin.
Javascript. ES6-, IE . – , ES6 7%. Internet Explorer, .
.
- axios – http-. IE , Fetch API, , 4 .
- process – process Node.js. webpack,
process.env.NODE_ENV, process process.env. 1 . - sentry – . , 17 .
- Sentry CDN. , , .
- , CDN, . , Sentry. , CDN.
Code coverage
Code Coverage Chrome Devtools. , 24% Javascript . , , , , , .
, 46 ( 2 !)
Wir sehen also, dass die Größe des Bündels von vielen Faktoren beeinflusst wird und die Wirkung der Verwendung von Svelte, ähnlich wie das Trinken eines Hamburgers mit Diät-Cola, rein psychologischer Natur ist. Eine echte Optimierung erfordert Liebe zum Detail und Kontrolle der Ausgabegröße.
Und wenn Sie darüber nachdenken, zu Svelte zu wechseln, um die Größe Ihres Projekts zu reduzieren, empfehle ich Ihnen, die oben genannten Punkte zu beachten. Wenn Sie sie möglicherweise beheben, müssen Sie nirgendwo hingehen.