Angular单页面导航加载时间优化：无需拆分页面如何提速？

嘿，这个场景我太熟悉了！在单页的Angular项目里一次性塞四个视频，还靠普通超链接触发整页刷新，难怪加载慢得让人抓狂。不用拆成四个独立页面，咱们用Angular本身的特性就能搞定，给你捋几个靠谱的办法：

1. 换成Angular路由+组件懒加载，彻底告别整页刷新 #

首先得改掉一个坏习惯：别用普通的<a href>导航了，换成Angular的路由系统！这样点击导航时不会刷新整个页面，只会更新需要显示的内容。再配合组件懒加载，初始只加载当前激活的视频组件，其他三个组件等用户点击时才会加载对应的资源。

举个具体的例子：

• 把每个视频对应的内容拆成独立的Angular组件（比如Video1Component、Video2Component），每个组件里只放对应视频和相关内容。
• 在路由配置里用懒加载方式引入这些组件：

// app-routing.module.ts
const routes: Routes = [
  { path: 'video1', loadChildren: () => import('./video1/video1.module').then(m => m.Video1Module) },
  { path: 'video2', loadChildren: () => import('./video2/video2.module').then(m => m.Video2Module) },
  { path: 'video3', loadChildren: () => import('./video3/video3.module').then(m => m.Video3Module) },
  { path: 'video4', loadChildren: () => import('./video4/video4.module').then(m => m.Video4Module) },
  { path: '', redirectTo: '/video1', pathMatch: 'full' }
];

• 导航栏换成routerLink，这样点击时只会切换路由，不会刷新页面：

<nav>
  <a routerLink="/video1" routerLinkActive="active">视频1</a>
  <a routerLink="/video2" routerLinkActive="active">视频2</a>
  <a routerLink="/video3" routerLinkActive="active">视频3</a>
  <a routerLink="/video4" routerLinkActive="active">视频4</a>
</nav>
<router-outlet></router-outlet>

这样初始加载时，浏览器只会请求第一个视频的资源，其他三个视频的代码和资源只有在用户点击对应导航时才会加载，加载速度直接上去一大截。

2. 动态加载视频资源，初始只加载当前播放的视频 #

如果不想拆太多组件，也可以在同一个页面里，只给当前激活的视频设置真实的src，其他视频先留空或者用海报图占位，等用户切换时再动态加载视频源。

比如在组件里这么写：

<!-- 模板文件 -->
<div class="video-section">
  <div *ngFor="let item of videoList" [class.active]="currentVideoId === item.id">
    <!-- 激活的视频才加载真实src -->
    <video *ngIf="currentVideoId === item.id" [src]="item.videoSrc" controls poster="{{item.poster}}"></video>
    <!-- 未激活的显示海报图和播放按钮 -->
    <div *ngIf="currentVideoId !== item.id" class="video-placeholder">
      <img [src]="item.poster" alt="{{item.title}}">
      <button (click)="switchVideo(item.id)">播放{{item.title}}</button>
    </div>
  </div>
</div>

组件逻辑：

// 组件.ts文件
videoList = [
  { id: 1, videoSrc: 'assets/video1.mp4', poster: 'assets/video1-poster.jpg', title: '视频1' },
  { id: 2, videoSrc: 'assets/video2.mp4', poster: 'assets/video2-poster.jpg', title: '视频2' },
  { id: 3, videoSrc: 'assets/video3.mp4', poster: 'assets/video3-poster.jpg', title: '视频3' },
  { id: 4, videoSrc: 'assets/video4.mp4', poster: 'assets/video4-poster.jpg', title: '视频4' }
];
currentVideoId = 1;

switchVideo(id: number) {
  this.currentVideoId = id;
}

这种方式初始只会加载第一个视频的资源，其他视频只有用户点击切换时才会请求视频文件，能大幅减少初始页面的加载体积。

3. 给视频加缓存+复用策略，切换更丝滑 #

如果用户经常在几个视频之间切换，可以用Angular的路由复用策略，把已经加载过的视频组件缓存起来，下次切换回来直接复用，不用重新初始化和加载资源。这样用户第二次点击同一个导航时，几乎是瞬间切换，完全没有加载等待。

4. 优化视频本身的加载效率 #

最后别忘了从视频资源本身下手：

• 转码成更高效的格式，比如WebM（比MP4体积小不少，主流浏览器都支持）；
• 给视频设置不同分辨率的版本，根据用户设备自动加载合适的清晰度；
• 给视频标签加上loading="lazy"属性，让浏览器在视频进入视口时再加载；
• 用压缩后的海报图代替视频初始帧，减少初始加载的图片体积。

内容的提问来源于stack exchange，提问作者22anonymous