Increasing the Responsiveness of Web Applications by Introducing Lazy Loading
Increasing the Responsiveness of Web Applications by Introducing Lazy Loading
复制标题
DOI：
10.1109/ase56229.2023.00192
复制
发表时间：
2023-09
期刊：
影响因子：
--
通讯作者：
Alexi Turcotte;Satyajit Gokhale;Frank Tip
中科院分区：
文献类型：
--
作者：
Alexi Turcotte;Satyajit Gokhale;Frank Tip
前端开发人员希望他们的应用程序不包含超过所需的代码，以便最大限度地减少访问网页和页面响应之间的时间量。然而，前端代码通常是用无处不在的“网络语言”--JavaScript编写的，而且往往严重依赖第三方程序包。尽管包的重用提高了开发人员的工作效率，但它会导致非常大的“臃肿”的应用程序，从而降低最终用户体验，这是臭名昭著的。应对这种膨胀的一种方法是根据需要懒惰地加载外部包，对此的支持在2020年的时候被添加到了JavaScript中，当时语言标准中添加了异步的动态导入。不幸的是，迁移现有项目以利用此功能并不容易，因为引入异步所需的代码更改可能涉及复杂的非本地转换。在这项工作中，我们提出了一种在JavaScript应用程序中自动引入第三方程序包延迟加载的方法。我们的方法依赖静态分析来识别可以延迟加载的外部包，并生成延迟加载这些包所需的代码转换。由于静态分析是不可靠的，这些转换是作为程序员应该仔细审查和测试的建议提出的。我们在一个名为Lazizer的工具中实现了这种方法，并在10个开源前端JavaScript应用程序上对Lazizer进行了评估，结果表明每个应用程序都成功地进行了重构，在所有情况下都减少了初始应用程序的大小和加载时间。平均而言，对于这些应用程序，Lazizer将初始应用程序大小减少了36.2%，初始加载时间减少了29.7%，并且在这些应用程序中没有出现不可靠的情况。
Front-end developers want their applications to contain no more code than is needed in order to minimize the amount of time that elapses between visiting a web page and the page becoming responsive. However, front-end code is typically written in JavaScript, the ubiquitous “language of the web”, and tends to rely heavily on third-party packages. While the reuse of packages improves developer productivity, it is notorious for resulting in very large “bloated” applications, resulting in a degraded end-user experience. One way to combat such bloat is to lazily load external packages on an as-needed basis, for which support was added to JavaScript in 2020 when asynchronous, dynamic imports were added to the language standard. Unfortunately, migrating existing projects to take advantage of this feature is nontrivial, as the code changes required to introduce asynchrony may involve complex, non-local transformations. In this work, we propose an approach for automatically introducing lazy loading of third-party packages in JavaScript applications. Our approach relies on static analysis to identify external packages that can be loaded lazily and generates the code transformations required to lazily load those packages. Since the static analysis is unsound, these transformations are presented as suggestions that programmers should review and test carefully. We implement this approach in a tool called Lazifier, and evaluate Lazifier on 10 open-source front-end JavaScript applications, showing that each application was successfully refactored, reducing initial application size and load times in all cases. On average, for these applications, Lazifier reduces initial application size by 36.2 %, initial load time by 29.7 %, and unsoundness did not arise in any of these applications.