如何在Angular应用中按模块拆分懒加载第三方库？

算力阿峰

2026-5-25

我之前也碰到过完全一样的困境——Angular项目vendor包直接冲到10MB，只拆业务代码的懒加载模块根本拉不回加载速度。下面是我亲测有效的几种方案，能把第三方库跟着对应的懒加载模块拆分，真正实现按需加载：

1. 先从「模块化按需引入」基础操作做起

很多第三方库本身就支持模块级别的导入，这是最容易落地的第一步：

对于Angular生态的库（比如@angular/material、ngx-bootstrap）：不要全局导入完整模块，只在用到的懒加载模块里导入需要的子模块。比如用MatButtonModule而非整个MatModule，Angular CLI会自动把这些依赖打包到对应懒加载模块的chunk里，不会塞进主vendor包。
对于工具类库（比如lodash、moment）：避免导入整个库，改用路径导入具体方法。比如用import debounce from 'lodash/debounce'代替import _ from 'lodash'；如果需要多语言支持，也只导入需要的语言包，而非全部。

2. 利用Webpack的splitChunks自定义分包规则

如果你的第三方库是某个懒加载模块独占使用的，完全可以通过自定义Webpack配置把它单独拆成一个chunk，和对应模块绑定加载。这里需要用到@angular-builders/custom-webpack来扩展Angular CLI的配置：

安装依赖：npm install @angular-builders/custom-webpack --save-dev

在angular.json里修改构建配置，指定自定义Webpack配置文件：

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

创建webpack.custom.config.js，配置splitChunks的缓存组，把指定库和对应懒加载模块绑定：

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 示例：把echarts单独打包给用到它的lazy-echarts-module
        echartsBundle: {
          test: /[\\/]node_modules[\\/]echarts[\\/]/,
          // 匹配懒加载模块的chunk名称（根据你的路由配置生成的名称）
          chunks: (chunk) => chunk.name.startsWith('lazy-echarts-module'),
          name: 'echarts-vendor',
          enforce: true // 强制拆分
        },
        // 同理，给用到ag-grid的模块单独分包
        agGridBundle: {
          test: /[\\/]node_modules[\\/]ag-grid-angular[\\/]/,
          chunks: (chunk) => chunk.name.startsWith('lazy-aggrid-module'),
          name: 'aggrid-vendor',
          enforce: true
        }
      }
    }
  }
};

这样，当用户访问对应懒加载路由时，才会加载该模块的业务代码+专属第三方库chunk。

3. 动态导入（Dynamic Import）小众/大体积库

如果某个库只在特定组件里用到，甚至可以用ES动态导入，在组件初始化时才加载：

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

@Component({
  selector: 'app-lazy-heavy-component',
  templateUrl: './lazy-heavy-component.component.html'
})
export class LazyHeavyComponent implements OnInit {
  async ngOnInit(): Promise<void> {
    // 动态加载moment库，只有当这个组件初始化时才会请求该chunk
    const moment = await import('moment');
    this.formattedDate = moment.default(new Date()).format('YYYY-MM-DD');
    
    // 如果是UI组件库，比如某个复杂的图表组件，也可以用这种方式
    // const { ChartComponent } = await import('some-heavy-chart-lib');
    // 然后动态创建组件渲染
  }
}

这种方式适合那些只在特定场景下用到的大体积库，完全不会影响主包加载速度。

4. 验证拆分效果

最后一定要验证你的配置是否生效：

执行ng build --stats-json生成打包统计文件
用webpack-bundle-analyzer分析：npx webpack-bundle-analyzer dist/your-project-name/stats.json
在可视化界面里，你可以清晰看到各个chunk包含的内容，确认第三方库是否被正确拆分到对应懒加载模块的chunk中。

注意：如果某个第三方库是多个模块共用的，Webpack会默认把它留在主vendor包（或者单独拆成一个共享chunk），这是合理的——避免重复加载。只有独占使用的库才需要单独拆分。

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