Angular懒加载模块使用CodeMirror时全局导入如何改为按需引入

1. 语言模式按需导入 #

不需要在main.ts全局导入，直接在使用CodeMirror的组件文件顶部静态导入即可，这些依赖会被打包进当前懒加载模块的独立chunk，不会进入主包，也不会全局生效。
示例代码：

// 仅作用于当前组件所属的懒加载模块
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';

2. 样式按需加载 #

不需要在全局样式文件中导入，可选择以下两种方案：

方案A：组件样式内导入 #

在使用CodeMirror的组件对应的样式文件中导入样式，若样式不生效可关闭当前组件的视图封装，同时给组件添加唯一外层类名避免样式污染。
组件样式文件（xxx.component.scss）示例：

@import '~codemirror/lib/codemirror';
@import '~codemirror/theme/material';

组件元数据配置示例：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-code-editor',
  templateUrl: './code-editor.component.html',
  styleUrls: ['./code-editor.component.scss'],
  encapsulation: ViewEncapsulation.None,
  host: {
    // 唯一类名限定，避免样式污染全局
    class: 'code-editor-wrapper'
  }
})
export class CodeEditorComponent {
  // 组件业务逻辑
}

方案B：动态插入样式 #

无需关闭视图封装，在组件初始化时动态创建link标签加载样式：

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

@Component({
  selector: 'app-code-editor',
  templateUrl: './code-editor.component.html',
  styleUrls: ['./code-editor.component.scss']
})
export class CodeEditorComponent implements OnInit {
  ngOnInit(): void {
    // 加载基础样式
    const baseStyle = document.createElement('link');
    baseStyle.rel = 'stylesheet';
    baseStyle.href = 'assets/codemirror/codemirror.css'; // 可将对应CSS文件放到assets目录或使用CDN地址
    document.head.appendChild(baseStyle);

    // 加载主题样式
    const themeStyle = document.createElement('link');
    themeStyle.rel = 'stylesheet';
    themeStyle.href = 'assets/codemirror/material.css';
    document.head.appendChild(themeStyle);
  }
}

3. 模块导入配置 #

将CodemirrorModule仅导入到你当前的懒加载模块中，不要导入到根模块AppModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CodeEditorRoutingModule } from './code-editor-routing.module';
import { CodeEditorComponent } from './code-editor.component';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    CodeEditorComponent
  ],
  imports: [
    CommonModule,
    CodeEditorRoutingModule,
    FormsModule,
    CodemirrorModule
  ]
})
export class CodeEditorModule { }

• 所有CodeMirror相关的代码和样式都会被拆分到懒加载模块的独立chunk中，只有用户访问到该模块对应的路由时才会加载，不会增加主包体积，也不会全局引入冗余资源
• 如果需要支持多种语言模式，可使用import()动态导入语法，在用户切换到对应模式时再加载对应的mode文件，进一步减小初始加载体积

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