您可能不需要精简来减少JavaScript

如今，流行观点是当前的Javascript框架过大，而新的Svelte框架非常紧凑。因此，每个人都需要切换到它，而Javasctipt大小的问题将自行解决。

最近有一篇文章“ Svelte是实现小部件的不错选择吗？” 具有实施具有关键捆绑包大小的项目的经验。这是检验Svelte PR经理在真实项目中所作承诺的重要原因。

让我们分析一下！

初始数据

该项目是一个嵌入式小部件，以整体Javascript捆绑形式分发，总大小为71 Kb（包括gzip）。是很多还是一点？文章“ 2019年JavaScript的价格”建议避免使用大于50-100 Kb的捆绑包。也就是说，当前项目位于黄色区域，大小仍然可以接受，但是该考虑如何向其添加新功能了，同时适合100 Kb的上限。

现在下载此脚本，对其进行格式化，然后查看其中有趣的内容。

捆绑器设置

查看代码时引起您注意的第一件事是该模式的重复：

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 !)

• 14 –
• 10 –
• 22 – Javascript-

因此，我们看到捆束的大小受许多因素影响，并且使用Svelte大约与饮食可乐中汉堡包的效果完全相同。真正的优化需要注意细节并控制输出大小。

而且，如果您出于缩小项目规模的考虑而考虑改用Svelte，我建议您注意上述几点，也许如果您进行了修复，则无需走到任何地方。