De nos jours, l'opinion populaire est que les cadres Javascript actuels sont prohibitifs et que le nouveau cadre Svelte est très compact. Par conséquent, tout le monde doit y basculer et le problème de la taille de Javasctipt sera résolu par lui-même.
Récemment, il y avait un article "Svelte est-il un bon choix pour implémenter un widget?" avec une expérience dans la mise en œuvre d'un projet avec une taille de bundle critique. C'est une bonne raison de vérifier les promesses des responsables RP de Svelte sur un vrai projet.
Analysons-le!
Donnée initiale
Le projet en question est un widget intégré distribué sous la forme d'un bundle Javascript monolithique d'une taille totale de 71 Ko (y compris gzip). Est-ce beaucoup ou peu? L'article "Prix de JavaScript en 2019" recommandait d'éviter les bundles supérieurs à 50-100 Ko. Autrement dit, le projet actuel est dans la zone jaune, la taille est toujours acceptable, mais il est temps de réfléchir à la façon d'ajouter de nouvelles fonctionnalités, et en même temps de s'insérer dans la limite supérieure de 100 Ko.
Téléchargez maintenant ce script, formatez-le et voyez ce qui y est intéressant.
Paramètres Bundler
La première chose qui attire votre attention lors de la visualisation du code est la répétition de ce modèle:
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 !)
Ainsi, nous voyons que la taille du paquet est influencée par de nombreux facteurs, et l'effet de l'utilisation de Svelte, tout comme boire un hamburger avec du cola diététique, est purement psychologique. Une véritable optimisation nécessite une attention aux détails et un contrôle de la taille de sortie.
Et si vous envisagez de passer à Svelte pour réduire la taille de votre projet - je vous conseille de faire attention aux points ci-dessus, peut-être que si vous les corrigez, vous n'aurez pas besoin d'aller nulle part.