6-13 提高加载性能 - 应用缓存

bus_lupe

于 2022-06-18 10:39:42 发布

阅读量117

点赞数

分类专栏：微前端文章标签：缓存 javascript 前端

本文链接：https://blog.youkuaiyun.com/bus_lupe/article/details/125344232

版权

微前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何使用const cache实现子应用名依赖的HTML缓存，通过parseHtml函数解析并异步加载资源，同时管理脚本的获取和存储，提升性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const cache = {} // 根据子应用的name来做缓存

export const parseHtml = async (entry, name) => {
  if (cache[name]) {
    return cache[name]
  }
  const html = await fetchResource(entry)

  let allScript = []
  const div = document.createElement('div')
  div.innerHTML = html

  const [dom, scriptUrl, script] = await getResources(div, entry)

  const fetchedScripts = await Promise.all(scriptUrl.map(async item => fetchResource(item)))

  allScript = script.concat(fetchedScripts)
  cache[name] = [dom, allScript]

  return [dom, allScript]
}