包大小如何影响性能?
How does bundle size affects performance?
假设 webpack
生成的最终包大约为 ~15MB。
除了第一次在网站上加载缓慢之外,与假设 500KB 的捆绑包相比,是否存在任何重大的性能问题? (已被丑化,或使用 .min npm 包)
JavaScript在浏览器的主线程中解析、编译和执行,这意味着用户必须等待这一切才能与网站交互。
15MB 是很多 JS 代码。
主要网络浏览器中内置了性能分析工具,您可以查看。
您可以在此处了解更多信息:https://web.dev/bootup-time/。
性能影响包括:
- 通过网络传输的时间。特别要考虑与某些移动设备的慢速连接。根据您正在执行的操作,您的页面可能在加载之前无法交互。
- JS 解析时间。现代 JS 引擎速度很快,但加载的代码越多,浏览器必须解析的代码就越多。
- JS 执行时间。最佳情况下,您只打包您希望执行的代码。您要执行的代码越多,所需的时间就越长。同样,您的页面有可能在其中大部分完成之前无法交互,具体取决于详细信息。
- 内存消耗。一切都占用 space:代码本身、运行时变量、创建的 DOM 个元素等
重要的是使用您最喜欢的浏览器的开发人员工具来分析您的代码的影响。请务必删除您的网站真正不需要的任何 JS。
假设 webpack
生成的最终包大约为 ~15MB。
除了第一次在网站上加载缓慢之外,与假设 500KB 的捆绑包相比,是否存在任何重大的性能问题? (已被丑化,或使用 .min npm 包)
JavaScript在浏览器的主线程中解析、编译和执行,这意味着用户必须等待这一切才能与网站交互。
15MB 是很多 JS 代码。
主要网络浏览器中内置了性能分析工具,您可以查看。
您可以在此处了解更多信息:https://web.dev/bootup-time/。
性能影响包括:
- 通过网络传输的时间。特别要考虑与某些移动设备的慢速连接。根据您正在执行的操作,您的页面可能在加载之前无法交互。
- JS 解析时间。现代 JS 引擎速度很快,但加载的代码越多,浏览器必须解析的代码就越多。
- JS 执行时间。最佳情况下,您只打包您希望执行的代码。您要执行的代码越多,所需的时间就越长。同样,您的页面有可能在其中大部分完成之前无法交互,具体取决于详细信息。
- 内存消耗。一切都占用 space:代码本身、运行时变量、创建的 DOM 个元素等
重要的是使用您最喜欢的浏览器的开发人员工具来分析您的代码的影响。请务必删除您的网站真正不需要的任何 JS。