Nowadays, it is popularly believed that the current Javascript frameworks are prohibitively large, and the new Svelte framework is very compact. Therefore, everyone needs to switch to it, and the problem of Javasctipt size will be solved by itself.
Recently there was an article "Is Svelte a good choice for implementing a widget?" with experience in implementing a project with a critical bundle size. This is a great reason to check out the promises of Svelte PR managers on a real project.
Let's analyze it!
Initial data
The project in question is an embedded widget distributed as a monolithic Javascript bundle with a total size of 71 Kb (including gzip). Is it a lot or a little? The article "Price of JavaScript in 2019" recommended avoiding bundles larger than 50-100 Kb. That is, the current project is in the yellow zone, the size is still acceptable, but it's time to think about how to add new functionality to it, and at the same time fit into the upper limit of 100 Kb.
Now download this script, format it and see what's interesting there.
Bundler settings
The first thing that catches your eye when viewing the code is the repetition of this pattern:
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 !)
Thus, we see that the size of the bundle is influenced by many factors, and the effect of using Svelte about the same as drinking a hamburger with diet cola is purely psychological. Real optimization requires attention to detail and control of output size.
And if you are thinking about switching to Svelte for the sake of reducing the size of your project - I advise you to pay attention to the points above, perhaps if you fix them, then you won’t need to go anywhere.