Angular 4中配置angular-cli/Webpack生成特性模块独立打包文件（含无路由场景）

Hey，我来帮你搞定Angular 4里特性模块单独打包的问题，不管你用Angular CLI还是直接撸Webpack，甚至不用路由都有办法实现。下面分情况给你详细说明：

Angular CLI在Angular 4里已经内置了代码分割的支持，默认通过路由懒加载就能自动生成单独的chunk文件，同时也支持无路由场景的手动分割。

1. 基于路由的懒加载（最省心的方式） #

• 先创建一个特性模块，CLI会自动帮你配置好懒加载路由：

  ng generate module feature --route feature --module app.module
  

• 打开app-routing.module.ts，你会看到自动生成的路由配置，Angular 4里是字符串格式的loadChildren：

  const routes: Routes = [
    { 
      path: 'feature', 
      loadChildren: './feature/feature.module#FeatureModule' 
    }
  ];
  

• 运行生产构建命令，CLI会自动把特性模块打包成单独的chunk文件（比如0.chunk.js）：

  ng build --prod
  

2. 不使用路由的场景 #

如果你的项目不需要路由，也可以通过动态导入实现代码分割，然后手动处理模块的加载和组件渲染：

• 在主组件里，通过动态导入加载特性模块，比如按钮点击时触发：

  // app.component.ts
  import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template: `<button (click)="loadFeature()">加载特性模块</button><div #container></div>`
  })
  export class AppComponent {
    @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
  
    constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
  
    loadFeature() {
      // 动态导入特性模块，CLI会自动把它打包成单独chunk
      import('./feature/feature.module').then(module => {
        const FeatureModule = module.FeatureModule;
        // 假设特性模块里的第一个声明组件是你要渲染的组件
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
          FeatureModule.declarations[0]
        );
        this.container.createComponent(componentFactory);
      });
    }
  }
  

• 确保.angular-cli.json（Angular 4的配置文件）里的生产构建开启了优化（默认是开启的）：

  {
    "projects": {
      "your-project": {
        "architect": {
          "build": {
            "configurations": {
              "production": {
                "optimization": true,
                "outputHashing": "all"
              }
            }
          }
        }
      }
    }
  }
  

如果你的项目是自定义Webpack配置，那就需要利用Webpack的代码分割能力，结合Angular的编译工具来实现。

1. 基础Webpack配置 #

首先在webpack.config.js里配置chunk的输出命名，确保分割后的文件清晰可辨：

const path = require('path');
const AngularWebpackPlugin = require('@angular-devkit/build-angular/src/angular-cli-files/plugins/angular-webpack-plugin');

module.exports = {
  entry: './src/main.ts',
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js', // 分割后的chunk命名规则
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new AngularWebpackPlugin({
      tsConfig: './tsconfig.json',
      entryModule: './src/app/app.module#AppModule' // 指定主模块
    })
  ],
  module: {
    rules: [
      { test: /\.ts$/, use: 'ts-loader' },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
      // 其他必要的loader配置
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
};

2. 路由懒加载场景 #

和CLI的逻辑一致，在路由配置里用loadChildren，Webpack会自动识别并分割模块：

const routes: Routes = [
  { path: 'feature', loadChildren: './feature/feature.module#FeatureModule' }
];

3. 无路由场景 #

同样用动态导入，还可以通过webpackChunkName注释给chunk指定自定义名称，方便调试：

// 在需要加载特性模块的地方
import(/* webpackChunkName: "feature-module" */ './feature/feature.module').then(module => {
  // 手动处理模块加载和组件渲染，逻辑和CLI场景一致
  const FeatureModule = module.FeatureModule;
  // ... 后续渲染组件的代码
});

打包后会生成feature-module.chunk.js，清晰对应你的特性模块。

• 确保特性模块是独立的NgModule，不要和主模块有不必要的耦合，这样打包工具才能准确识别并分割。
• Angular 4的动态导入语法和后续版本略有差异，记得用import().then()的格式，不要用ES模块的静态导入。

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