如何实现LinkClass的延迟完整初始化以优化页面加载速度？

核心思路 #

先在页面初始化阶段加载轻量的基础实现，让早期调用的open方法把链接存入队列；等页面加载完成后，动态导入完整实现，执行队列里的链接，再替换实例让后续调用直接使用完整逻辑。

步骤1：修正基础实现 #

调整基础实现，确保队列类型正确，并添加安全的队列获取方法：

// link-class-base.js
class LinkClass {
  #queue = [] // 私有字段避免外部直接修改
  open(url) {
    this.#queue.push(url)
  }
  // 获取队列副本的方法
  getQueue() {
    return [...this.#queue]
  }
}

export default LinkClass

步骤2：页面初始化与懒加载逻辑 #

在页面入口文件中，先初始化基础实例，再监听页面加载事件导入完整版本：

// 页面入口
import LinkClassBase from './link-class-base.js'

// 创建全局可用的基础实例（可根据项目结构挂载到window或模块导出）
let linkInstance = new LinkClassBase()

// 监听DOM解析完成事件（若需等所有资源加载完，改用window.addEventListener('load', ...)）
document.addEventListener('DOMContentLoaded', async () => {
  // 动态导入完整实现，会被打包为单独chunk实现按需加载
  const { default: LinkClassFull } = await import('./link-class-full.js')
  
  // 初始化完整实例
  const fullInstance = new LinkClassFull()
  
  // 批量处理队列中暂存的链接
  const pendingUrls = linkInstance.getQueue()
  pendingUrls.forEach(url => fullInstance.open(url))
  
  // 替换实例，让后续调用直接使用完整版本
  linkInstance = fullInstance
})

步骤3：完整实现文件 #

完整版本保留原有所有导入和方法即可：

// link-class-full.js
import env from './env'
import loader from './loader'
// ...其他重型导入

class LinkClassFull {
  open(url) {
    // 原有的完整打开链接逻辑
  }
  canOpen(url) {
    // 原有的判断逻辑
  }
  // ...其他11个方法
}

export default LinkClassFull

注意事项 #

• 若基础实例被多处引用，可改用Object.assign(linkInstance, fullInstance)把完整实例的方法合并到基础实例上，无需修改所有引用
• 选择DOMContentLoaded还是load事件，取决于你是否需要等待图片、样式等资源加载完成再初始化完整版本

内容的提问来源于stack exchange，提问作者What is Love