Question

我们有一个巨大的Web组件（2MB），当前正在<head>元素中加载，但这大大减少了我们的页面加载时间。

我在想是否可以以某种方式延迟加载我们的网络组件？

Answer 1

假设您的网络组件包含在当前存储在<head>中的HTML导入中，您可以在使用javascript时懒惰加载导入的文件：

var import = document.createElement('link');
import.rel = 'import';
import.href = 'path/to/your/import.html';
document.head.appendChild(import);

或者，您可以尝试将HTML导入从头部移动到身体（靠近底部），这可能会减少加载时间，因为它不会阻止对身体的解析。

Answer 2

看看Jake Archibald关于浏览器中ECMA脚本模块的精彩文章。他详细介绍了加载策略，并介绍了一些最佳做法。该文章位于：https://jakearchibald.com/2017/es-modules-in-browsers/

希望这能帮助您找到一种在应用程序中延迟加载Web组件的方法。