用Angular 懒加载实现在线编辑器

在冉冉博客的运营过程中，我积累了不少用Angular 懒加载实现在线编辑器的经验。今天整理成教程分享给大家，希望能提升你的开发效率。

一、Angular 懒加载基础

懒加载（Lazy Loading）是 Angular 性能优化的核心技术。它允许按需加载模块，而不是一次性加载整个应用。对于大型应用，懒加载能将首屏加载时间减少 50% 以上。

1.1 模块懒加载配置

const routes: Routes = [
  {
    path: 'editor',
    loadChildren: () => import('./editor/editor.module')
      .then(m => m.EditorModule)
  },
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module')
      .then(m => m.DashboardModule)
  },
  {
    path: 'settings',
    loadComponent: () => import('./settings/settings.component')
      .then(c => c.SettingsComponent)
  }
];

1.2 预加载策略

export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    if (route.data && route.data['preload']) {
      return load();
    }
    return of(null);
  }
}

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: SelectivePreloadingStrategy
  })],
})

二、在线编辑器架构设计

在线编辑器是一个复杂的组件，包含代码编辑、实时预览、文件管理等功能。使用懒加载可以将编辑器相关代码分离。

2.1 编辑器模块结构

@NgModule({
  declarations: [
    EditorComponent,
    CodeEditorComponent,
    PreviewComponent,
    FileManagerComponent
  ],
  imports: [CommonModule, MonacoEditorModule.forRoot()],
  exports: [EditorComponent]
})
export class EditorModule { }

2.2 Monaco Editor 集成

import * as monaco from 'monaco-editor';

export class CodeEditorComponent implements AfterViewInit {
  private editor!: monaco.editor.IStandaloneCodeEditor;
  
  ngAfterViewInit() {
    this.editor = monaco.editor.create(this.editorEl.nativeElement, {
      value: this.content,
      language: this.language,
      theme: 'vs-dark',
      automaticLayout: true
    });
  }
}

三、响应式设计与移动端适配

在线编辑器需要适配不同屏幕尺寸。使用 Angular 的响应式设计和 CSS Grid/Flexbox 实现灵活布局。

3.1 响应式布局

.editor-container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  height: 100vh;
}

@media (max-width: 768px) {
  .editor-container {
    grid-template-columns: 1fr;
  }
  .preview { display: none; }
}

3.2 TypeScript 类型安全

export interface FileItem {
  id: string;
  name: string;
  path: string;
  type: 'file' | 'folder';
  content?: string;
}

export interface EditorState {
  activeFile: FileItem | null;
  openFiles: FileItem[];
  unsavedChanges: Map<string, string>;
}

四、工程化与部署

Angular CLI 提供了完整的工程化支持。从开发到生产部署，每一步都有最佳实践。

4.1 构建优化配置

{
  "architect": {
    "build": {
      "configurations": {
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "budgets": [
            { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }
          ]
        }
      }
    }
  }
}

4.2 Docker 部署

FROM node:18-alpine AS builder
WORKDIR /app
RUN npm ci
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist/editor /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

五、性能优化技巧

综合使用各种优化技术，确保 Angular 应用的性能达到最佳水平。

5.1 Change Detection 优化

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PureComponent {
  // 只有输入引用变化或事件触发时才检查
}

5.2 虚拟滚动

import { ScrollingModule } from '@angular/cdk/scrolling';

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items" class="item">
    {{ item }}
  </div>
</cdk-virtual-scroll-viewport>

以上就是用Angular 懒加载实现在线编辑器的完整分享。这些技巧都来自冉冉博客的实战经验，希望能帮到你。