包大小如何影响性能？

Question

假设webpack生成的最终包大小约为15MB。

除了第一次在站点上加载速度慢之外，与500KB捆绑包相比，是否存在任何重大的性能问题？(已经被丑化了，或者使用了.min npm包)

Answer 1

JavaScript是在浏览器的主线程中解析、编译和执行的，这意味着用户在与网站交互之前必须等待所有这些。

15MB是很多JS代码。

在主要的web浏览器中内置了性能分析工具，您可以查看这些工具。

你可以在这里了解到更多信息：https://web.dev/bootup-time/。

Answer 2

性能影响包括：

• 通过网络传输的时间。特别是考虑到一些移动设备的连接速度很慢。根据您正在执行的操作，您的页面可能在加载之前不具有交互性。
• JS解析时间。现代JS引擎速度很快，但是加载的代码越多，浏览器必须解析的代码就越多。
• JS执行时间。最理想的情况是，你只需要打包你想要执行的代码。你想执行的代码越多，执行的时间就越长。同样，您的页面可能在大部分操作完成后才能交互，这取决于details.
• Memory的使用量。所有内容都会占用空间:代码本身、运行时变量、创建的DOM元素等。

使用您最喜欢的浏览器的开发人员工具来分析代码的影响是很重要的。请务必删除您的站点并不真正需要的任何JS。