Atualmente, a opinião popular é que os atuais frameworks Javascript são proibitivamente grandes, e o novo framework Svelte é muito compacto. Portanto, todos precisam mudar para ele, e o problema do tamanho do Javasctipt será resolvido por si só.
Recentemente, houve um artigo "O Svelte é uma boa opção para implementar um widget?" com experiência na implementação de um projeto com um tamanho de pacote crítico. Esse é um ótimo motivo para verificar as promessas dos gerentes de Svelte PR em um projeto real.
Vamos analisar!
Dados iniciais
O projeto em questão é um widget incorporado distribuído como um pacote Javascript monolítico com um tamanho total de 71 Kb (incluindo gzip). É muito ou pouco? O artigo "Preço do JavaScript em 2019" recomendou evitar pacotes maiores que 50-100 Kb. Ou seja, o projeto atual está na zona amarela, o tamanho ainda é aceitável, mas é hora de pensar em como adicionar novas funcionalidades a ele e, ao mesmo tempo, ajustar-se ao limite superior de 100 Kb.
Agora baixe esse script, formate-o e veja o que há de interessante nele.
Configurações do empacotador
A primeira coisa que chama sua atenção ao visualizar o código é a repetição desse padrão:
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 !)
Assim, vemos que o tamanho do pacote é influenciado por muitos fatores, e o efeito de usar o Svelte sobre o mesmo que beber um hambúrguer com cola diet é puramente psicológico. A otimização real requer atenção aos detalhes e controle do tamanho da saída.
E se você estiver pensando em mudar para o Svelte com o objetivo de reduzir o tamanho do seu projeto, aconselho que você preste atenção nos pontos acima, talvez se você os consertar, não precisará ir a lugar algum.