Hoy en día, se cree popularmente que los marcos Javascript actuales son prohibitivamente grandes, y el nuevo marco Svelte es muy compacto. Por lo tanto, todos deben cambiar a él, y el problema del tamaño de Javasctipt se resolverá por sí solo.
Recientemente hubo un artículo "¿Es Svelte una buena opción para implementar un widget?" con experiencia en la implementación de un proyecto con un tamaño de paquete crítico. Esta es una gran razón para verificar las promesas de los gerentes de relaciones públicas de Svelte en un proyecto real.
¡Vamos a analizarlo!
Datos iniciales
El proyecto en cuestión es un widget incorporado distribuido como un paquete monolítico de Javascript con un tamaño total de 71 Kb (incluido gzip). ¿Es mucho o poco? El artículo "Precio de JavaScript en 2019" recomienda evitar paquetes de más de 50-100 Kb. Es decir, el proyecto actual está en la zona amarilla, el tamaño sigue siendo aceptable, pero es hora de pensar en cómo agregarle nuevas funciones y, al mismo tiempo, encajar en el límite superior de 100 Kb.
Ahora descargue este script, formatee y vea qué es lo interesante allí.
Configuraciones de paquete
Lo primero que llama la atención al ver el código es la repetición de este patrón:
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 !)
Por lo tanto, vemos que el tamaño del paquete está influenciado por muchos factores, y el efecto de usar Svelte casi igual que beber una hamburguesa con cola dietética es puramente psicológico. La optimización real requiere atención al detalle y control del tamaño de salida.
Y si está pensando en cambiar a Svelte para reducir el tamaño de su proyecto, le aconsejo que preste atención a los puntos anteriores, tal vez si los arregla, entonces no necesitará ir a ningún lado.