Angular5嵌套iframe加载AngularJS/Angular5应用首次渲染过慢优化咨询

我之前处理过类似的混合框架iframe嵌入场景，针对你遇到的首次渲染耗时问题，分享几个实用的预加载/预渲染方案，你可以根据业务场景灵活组合使用：

1. 预加载核心静态资源 #

iframe首次加载慢，很大原因是需要下载JS、CSS、字体等核心资源。你可以在壳应用初始化阶段，提前预加载这些资源，让浏览器缓存起来，等真正需要加载iframe时直接从缓存读取。

实现方式 #

在壳应用的index.html中添加preload或prefetch标签：

<!-- 高优先级预加载常用子应用的核心JS/CSS -->
<link rel="preload" href="/angularjs-app/vendor.bundle.js" as="script">
<link rel="preload" href="/angularjs-app/styles.css" as="style">

<!-- 低优先级预抓取可能用到的子应用资源 -->
<link rel="prefetch" href="/ng5-app/main.chunk.js" as="script">

• preload：针对当前页面即将用到的资源，优先级高，会强制浏览器立即下载
• prefetch：针对未来可能用到的资源（比如用户大概率会跳转的子应用），优先级低，浏览器空闲时才会下载

2. 预渲染隐藏的iframe #

提前创建一个隐藏的iframe，预加载用户最常用的子应用。当用户点击对应导航时，直接将隐藏的iframe替换为显示状态，跳过重新加载的过程。

实现示例（Angular5组件内） #

import { OnInit } from '@angular/core';

export class ShellComponent implements OnInit {
  private preloadedIframe?: HTMLIFrameElement;

  ngOnInit() {
    // 预加载最常用的子应用
    this.preloadedIframe = document.createElement('iframe');
    this.preloadedIframe.style.display = 'none';
    this.preloadedIframe.src = '/frequently-used-app';
    this.preloadedIframe.id = 'preloaded-frame';
    document.body.appendChild(this.preloadedIframe);
  }

  onNavItemClick(targetUrl: string) {
    const mainIframe = document.getElementById('main-content-iframe') as HTMLIFrameElement;
    
    if (targetUrl === '/frequently-used-app' && this.preloadedIframe) {
      // 替换为预加载好的iframe
      mainIframe.replaceWith(this.preloadedIframe);
      this.preloadedIframe.style.display = 'block';
      this.preloadedIframe = undefined; // 避免重复使用
    } else {
      mainIframe.src = targetUrl;
    }
  }
}

注意：如果有多个高频使用的子应用，可以预加载多个隐藏iframe，但不要过多，避免占用过多内存和带宽。

3. 基于用户行为的提前加载 #

通过监听用户的交互行为（比如鼠标hover导航项），提前加载对应的子应用资源或iframe，利用用户的思考时间完成预加载。

实现示例 #

在壳应用的导航模板中添加鼠标监听：

<sidebar-nav>
  <nav-item 
    *ngFor="let item of navItems"
    (mouseenter)="preloadTargetApp(item.url)"
    (click)="loadTargetApp(item.url)"
  >
    {{ item.name }}
  </nav-item>
</sidebar-nav>

组件逻辑：

private preloadedMap = new Map<string, HTMLIFrameElement>();

preloadTargetApp(url: string) {
  if (!this.preloadedMap.has(url)) {
    const tempIframe = document.createElement('iframe');
    tempIframe.style.display = 'none';
    tempIframe.src = url;
    document.body.appendChild(tempIframe);
    this.preloadedMap.set(url, tempIframe);
  }
}

loadTargetApp(url: string) {
  const mainIframe = document.getElementById('main-content-iframe') as HTMLIFrameElement;
  const preloadedFrame = this.preloadedMap.get(url);

  if (preloadedFrame) {
    mainIframe.replaceWith(preloadedFrame);
    preloadedFrame.style.display = 'block';
    this.preloadedMap.delete(url);
  } else {
    mainIframe.src = url;
  }
}

4. 优化资源缓存策略 #

确保子应用的静态资源（JS、CSS、图片等）在服务器端配置了合理的缓存策略，比如设置Cache-Control和ETag头，让浏览器长期缓存这些资源。

另外，如果AngularJS和Angular5子应用有共用的第三方库（比如某些UI组件库），可以将这些库提取为公共资源，由壳应用提前加载，子应用不再重复打包和加载，减少资源体积和加载时间。

5. Angular5子应用自身优化（针对Angular5子应用） #

如果是Angular5的子应用，可以在自身项目中开启路由预加载，让懒加载模块在首屏加载完成后自动预加载，提升后续页面的渲染速度：

import { PreloadAllModules } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

注意事项：如果壳应用和子应用属于不同域名，需要确保服务器配置了正确的CORS策略，避免预加载时出现跨域错误；同时要监控内存占用，及时清理不再需要的预加载iframe，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Idan Naim