如何调整Angular站点内容显示顺序及优化首屏感知加载速度？

嘿，针对你遇到的两个Angular问题，我给你整理了具体的解决方案，希望能帮到你：

一、如何更改Angular站点中内容的显示顺序？ #

这得看你要调整的内容类型，分几种常见场景来说：

1. 组件内静态内容的顺序调整 #

如果是组件模板里的静态HTML元素，直接修改模板中元素的排列顺序就好。比如原本是：

<div>内容A</div>
<div>内容B</div>

改成：

<div>内容B</div>
<div>内容A</div>

2. 动态列表/数据的显示顺序 #

如果是从后端获取的数组数据，你可以在组件类里对数据排序后再渲染。举个例子：

// 假设你有一组数据
items = [{id: 1, name: '内容A'}, {id: 2, name: '内容B'}];

ngOnInit() {
  // 直接反转数组顺序
  this.items = this.items.reverse();
  // 或者根据特定字段排序，比如按name倒序排列
  this.items.sort((a, b) => b.name.localeCompare(a.name));
}

之后模板里正常循环渲染就行。

3. 路由组件的加载优先级调整 #

如果是不同路由页面的加载优先级（比如希望首屏核心路由优先加载），可以通过预加载策略来控制。Angular支持预加载懒加载模块，你可以配置全部预加载，或者自定义预加载规则：

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

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules // 预加载所有懒加载模块
      // 也可以自定义预加载策略，只预加载你指定的模块
    })
  ]
})
export class AppRoutingModule {}

4. 异步内容的显示顺序调整 #

如果是用*ngIf、*ngFor或者异步管道(async)控制的内容，你可以调整条件逻辑，或者修改异步数据流的输出顺序。比如用RxJS的map操作符调整异步返回的数据：

import { map } from 'rxjs/operators';

// 假设这是从API获取数据的Observable
data$ = this.apiService.getData().pipe(
  map(data => data.reverse()) // 调整异步数据的顺序
);

二、优化大型Angular项目首次加载速度，提升感知加载速度 #

针对你提到的「视觉样式要等第三批加载完成才显示」的问题，结合你用的Angular CLI 1.6.4版本，给你这些实用方案：

1. 内联关键CSS（Critical CSS） #

把首屏必需的核心样式直接内联到index.html的<style>标签里，这样浏览器不用等外部CSS文件加载完就能渲染页面样式。你可以手动提取首屏样式，或者用工具自动提取。比如在src/index.html里加：

<style>
  /* 首屏核心样式，比如body、头部、主内容区的基础样式 */
  body { margin: 0; font-family: Arial, sans-serif; }
  .main-container { padding: 20px; }
  /* 其他首屏必须的样式 */
</style>

记得把这些内联的样式从外部CSS文件里删掉，避免重复。

2. 调整打包顺序，优先加载核心资源 #

在.angular-cli.json（你这个版本的配置文件是这个，新版本是angular.json）里，把核心的样式和脚本文件放在styles和scripts数组的最前面，这样打包时会优先加载这些资源：

{
  "apps": [
    {
      "styles": [
        "styles/core-styles.css", // 核心样式放最前面
        "styles/other-styles.css"
      ],
      "scripts": [
        "scripts/core-script.js",
        "scripts/other-script.js"
      ]
    }
  ]
}

3. 启用AOT编译 #

Angular CLI 1.6.4支持AOT（提前编译），它会在构建时把模板编译成JavaScript，减少浏览器端的编译时间，同时打包后的文件更小。生产构建时加上--aot参数：

ng build --prod --aot

生产环境开AOT能明显提升加载和首屏渲染速度。

4. 懒加载非核心模块 #

如果项目里有很多路由模块，确保非首屏的模块用懒加载，这样首屏只加载必要的代码。路由配置示例：

const routes: Routes = [
  { path: '', component: HomeComponent }, // 首屏核心模块
  { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }, // 懒加载模块
  { path: 'profile', loadChildren: './profile/profile.module#ProfileModule' } // 懒加载模块
];

5. 压缩优化静态资源 #

用ng build --prod命令构建生产环境时，Angular CLI会自动启用代码压缩、树摇（Tree Shaking），移除未使用的代码。另外，记得压缩图片等静态资源，减少文件大小。

6. 清理不必要的依赖 #

检查项目里有没有未使用的第三方库，或者可以替换成更轻量的库。比如如果用了大型UI库，尽量只引入需要的组件（不过Angular CLI 1.6.4的按需引入支持有限，可能需要手动配置）。

7. 自定义预加载策略 #

如果想优化后续页面的加载速度，可以自定义预加载策略，只预加载用户可能访问的模块。比如：

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // 只预加载带有data.preload=true标记的路由
    return route.data && route.data.preload ? load() : of(null);
  }
}

然后在路由配置里使用这个策略：

RouterModule.forRoot(routes, {
  preloadingStrategy: SelectivePreloadingStrategy
})

同时给需要预加载的路由加标记：

{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', data: { preload: true } }

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