打包大小如何影响性能？

Question

假设由webpack生成的最终捆绑包大小约为15MB。
除了在网站首次加载时速度较慢之外，与大小为500KB的捆绑包（已进行Uglify处理或使用.min的npm包）相比，是否存在任何重大性能问题？

- Ba2sik

---

你可以使用浏览器中的开发者工具来分析性能，它会告诉你你的 JavaScript 代码有多大的影响。打开开发者工具，进入 Performance（性能）选项卡并点击“开始分析并重新加载页面”。你将得到一个报告，“Scripting”标签是你的脚本在加载时所消耗的时间。 - arieljuod

15 MB太大了。你应该在Webpack上使用异步导入，这将减小你的捆绑包大小。 - Gurkan Ugurlu

Answer 1

性能影响包括：

• 网络传输时间。特别考虑某些移动设备的慢速连接。根据你所做的事情，可能在加载完成之前无法与页面进行交互。
• JS解析时间。现代JS引擎很快，但是加载的代码越多，浏览器要解析的就越多。
• JS执行时间。最理想的情况下，你只需要打包预计要执行的代码。要执行的代码越多，花费的时间就越长。同样取决于具体情况，可能要等待很长时间才能与页面进行交互。
• 内存消耗。所有内容都占用空间：代码本身、运行时变量、创建的DOM元素等。

使用你喜欢的浏览器的开发者工具来分析代码的影响非常重要。确保删除网站实际上不需要的任何JS代码。

- Matt S

Answer 2

JavaScript在浏览器的主线程中解析、编译和执行，这意味着用户必须等待所有这些操作完成后才能与网站交互。

15MB的JS代码是很多的。

主流浏览器内置了性能分析工具，您可以查看。

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

- Zoli Szabó