如何拆分Angular模板并按需构建对应网站的专属包？

你完全可以将模板拆分，为每个网站构建仅包含所需代码与模板的专属包，而且有两种主流方案可以实现，分别适合不同的场景：

方案一：编译时拆分（推荐，彻底剔除无用代码） #

这种方式会在构建阶段就把不需要的模板和代码完全排除在最终包外，是最理想的实现方式，核心是利用Angular的多环境配置和多项目构建能力。

步骤： #

1. 拆分模板文件
   把原来的单个模板拆分成四个独立文件：

   • my-component.t1.html（对应网站1的模板）
   • my-component.t2.html（对应网站2的模板）
   • my-component.t3.html（对应网站3的模板）
   • my-component.t4.html（对应网站4的模板）

2. 创建专属环境配置
   在src/environments下为每个网站创建独立的环境文件：

   // environment.t1.ts
   export const environment = {
     production: false,
     templateType: 't1'
   };
   

   同理创建environment.t2.ts、environment.t3.ts、environment.t4.ts，修改templateType对应的值。

3. 修改组件引用模板
   让组件根据当前环境的templateType自动加载对应模板：

   import { Component } from '@angular/core';
   import { environment } from '../environments/environment';
   
   @Component({
     selector: 'my-component',
     // 动态拼接模板路径
     templateUrl: `./my-component.${environment.templateType}.html`,
   })
   export class MyComponent {}
   

4. 配置多项目构建（angular.json）
   在angular.json中为每个网站添加独立的项目配置，指定对应的环境文件和构建输出：

   "projects": {
     "website-t1": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
       "architect": {
         "build": {
           "options": {
             "outputPath": "dist/website-t1",
             "fileReplacements": [
               {
                 "replace": "src/environments/environment.ts",
                 "with": "src/environments/environment.t1.ts"
               }
             ]
           }
         }
       }
     },
     // 同理添加website-t2、website-t3、website-t4的配置
   }
   

5. 构建专属包
   运行对应网站的构建命令，比如：

   ng build website-t1 --prod
   

   这样构建出来的包只会包含t1对应的模板和相关代码，其他模板不会被打包进去。

方案二：运行时动态加载（适合动态切换场景） #

如果你的需求是在同一个应用中根据配置动态切换模板（而非单独构建），可以用Angular的动态组件加载能力，结合代码拆分实现按需加载。

步骤： #

1. 拆分模板为独立组件
   为每个模板创建独立的组件：

   // my-component-t1.component.ts
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'my-component-t1',
     templateUrl: './my-component.t1.html'
   })
   export class MyComponentT1 {}
   

   同理创建MyComponentT2、MyComponentT3、MyComponentT4。

2. 动态加载对应组件
   在主组件中根据配置动态加载对应的组件：

   import { Component, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
   import * as configuration from '../../configuration';
   
   @Component({
     selector: 'my-component',
     template: '<div #componentContainer></div>'
   })
   export class MyComponent implements OnInit {
     @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
   
     constructor(private cfr: ComponentFactoryResolver) {}
   
     ngOnInit(): void {
       this.loadTemplateComponent();
     }
   
     private async loadTemplateComponent() {
       const templateType = configuration.template;
       let component;
   
       // 根据模板类型动态导入组件（利用ES模块的动态导入实现代码拆分）
       switch(templateType) {
         case 't1':
           component = (await import('./my-component-t1.component')).MyComponentT1;
           break;
         case 't2':
           component = (await import('./my-component-t2.component')).MyComponentT2;
           break;
         case 't3':
           component = (await import('./my-component-t3.component')).MyComponentT3;
           break;
         case 't4':
           component = (await import('./my-component-t4.component')).MyComponentT4;
           break;
       }
   
       const factory = this.cfr.resolveComponentFactory(component);
       this.container.createComponent(factory);
     }
   }
   

   这种方式下，未使用的组件会被拆分成单独的chunk文件，只有当需要时才会加载，初始包体积也会减小。

总结 #

• 如果是每个网站独立部署，优先选择方案一，能彻底剔除无用代码，包体积最小；
• 如果需要在同一个应用中动态切换模板，选择方案二，结合代码拆分实现按需加载。

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