如何防止Angular的Ngrx Feature模块被打包进main.js？

当两个独立懒加载模块（A、B）都依赖同一个特性模块C的StoreModule时，打包器（如Webpack）会默认将这类共享代码提升到main.js以避免重复打包，但这会导致主包体积膨胀。以下是几种针对性的解决方案：

1. 抽离NgRx特性状态逻辑，在懒加载模块中独立注册 #

不要将特性C的StoreModule.forFeature()封装在单独的模块里，而是把状态的核心定义（reducer、actions、selectors等）抽离成独立文件，让需要的懒加载模块各自注册该特性状态。

步骤示例： #

• 特性C的状态定义文件feature-c.state.ts：

import { createFeature, createReducer, on } from '@ngrx/store';
import * as FeatureCActions from './feature-c.actions';

// 用createFeature统一定义特性状态
export const featureCFeature = createFeature({
  name: 'featureC',
  reducer: createReducer(
    {}, // 初始状态
    on(FeatureCActions.loadDataSuccess, (state, { data }) => ({ ...state, data }))
  ),
});

// 导出必要的状态标识与选择器
export const { name: featureCKey, reducer: featureCReducer, selectFeatureCState } = featureCFeature;

• 在懒加载模块A中注册状态：

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { featureCKey, featureCReducer } from '../feature-c/feature-c.state';

@NgModule({
  imports: [
    // 仅在当前模块注册特性C的状态
    StoreModule.forFeature(featureCKey, featureCReducer)
  ]
})
export class FeatureAModule {}

模块B按同样方式注册即可。这种方式下，打包器会将特性C的状态代码识别为共享依赖，拆分到独立chunk中，而非塞入main.js。

2. 自定义Webpack拆分规则强制隔离共享代码 #

通过配置Webpack的splitChunks，明确将特性C的NgRx相关代码拆分到独立chunk，避免被提升到主包。

步骤示例： #

1. 在项目根目录创建webpack.config.js：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // 匹配特性C的状态相关文件
        ngrxFeatureC: {
          test: /[\\/]feature-c[\\/].*(state|actions|reducers)\.ts$/,
          name: 'chunk-feature-c-ngrx',
          priority: 20, // 优先级高于默认缓存组
          enforce: true // 强制拆分
        }
      }
    }
  }
};

2. 修改angular.json，指定使用自定义Webpack配置：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 其他原有配置...
    }
  }
}

执行打包后，特性C的NgRx代码会被单独打包到chunk-feature-c-ngrx.js，仅当模块A或B加载时才会请求该chunk。

3. 利用Angular独立组件API注册状态（Angular 14+） #

如果你的项目使用Angular 14及以上版本，可以借助独立组件的providers配置，直接在组件层面注册特性C的状态，让状态代码与组件所在的懒加载chunk绑定。

示例代码： #

import { Component } from '@angular/core';
import { provideState } from '@ngrx/store';
import { featureCFeature } from '../feature-c/feature-c.state';

@Component({
  selector: 'app-feature-a-page',
  templateUrl: './feature-a-page.component.html',
  standalone: true,
  providers: [
    // 注册特性C的状态
    provideState(featureCFeature)
  ]
})
export class FeatureAPageComponent {}

这种方式下，状态代码会被打包进组件所属的懒加载chunk，若多个懒加载组件共享该状态，Webpack会自动将共享部分拆分到独立chunk，不会侵入main.js。

额外注意事项 #

• 确保特性模块C没有被任何非懒加载模块（如AppModule）导入，否则其代码仍会被打包进main.js。
• 使用ng build --stats-json生成打包统计文件，配合webpack-bundle-analyzer工具分析chunk构成，验证优化效果。

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