如何缩减Angular 15+Angular Material的main.js包体积？当前大小是否正常？

我正在使用Angular 15.x与Angular Material 15.x开发应用，目前面临的主要问题是生产构建（已开启全部优化）后的初始chunk体积超过500kb。除登录页面外，我已为所有组件启用懒加载。

Angular生产构建结果截图：显示初始chunk体积超过500kb，包含main.js等文件的体积信息

我知晓以下两种方案：

• 调整初始chunk的警告/错误阈值
• 对文件进行gzip压缩

但我仍对Angular+Material的体积增长幅度感到惊讶。

webpack bundle analyzer结果截图：展示了chunk的组成结构，能看到Angular和Material相关依赖的占比

请问当前这个体积是否正常？我是否遗漏了什么优化点？感谢解答。

解答 #

一、当前体积是否正常？ #

结合你的描述和bundle分析来看，500kb左右的初始chunk体积在Angular+Material项目中属于偏中上但仍在合理区间。Angular核心框架、Material的基础依赖模块，再加上登录页的业务代码，叠加后很容易达到这个规模。不过如果能进一步压缩到300-400kb，会更利于首屏加载速度的提升。

二、可补充的优化点 #

• 按需导入Material组件：避免导入包含全量组件的集合模块，只导入实际用到的单个组件/模块，Angular 15支持的独立组件可以直接导入，进一步减少冗余代码。示例：

  // 推荐写法
  import { MatButtonModule } from '@angular/material/button';
  import { MatInputModule } from '@angular/material/input';
  

• 拆分第三方依赖chunk：通过webpack的splitChunks配置，将Angular、Material等第三方依赖拆分为独立的vendor chunk，利用浏览器缓存降低后续页面的加载成本。配置示例：
  在angular.json中指定自定义webpack配置文件，然后在配置文件中添加：

  module.exports = {
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/](@angular|@angular.material)[\\/]/,
            name: 'vendor',
            chunks: 'all'
          }
        }
      }
    }
  };
  

• 启用Fetch版HttpClient：Angular 15+支持provideHttpClient(withFetch())，该实现基于浏览器原生Fetch API，体积比传统XMLHttpRequest版本更小，在app.config.ts中配置即可：

  import { provideHttpClient, withFetch } from '@angular/common/http';
  
  export const appConfig: ApplicationConfig = {
    providers: [provideHttpClient(withFetch())]
  };
  

• 精简polyfill：如果你的项目只需要支持现代浏览器（Chrome 90+、Firefox 88+等），可以移除src/polyfills.ts中不必要的兼容代码，比如部分core-js的旧版polyfill。

• 启用Brotli压缩：相比gzip，Brotli的压缩率更高（可多节省15%-20%体积），主流服务器（Nginx、Apache）都支持配置Brotli压缩，能大幅减少传输体积。

• 检查摇树优化是否生效：确保angular.json中生产环境的optimization、buildOptimizer、treeShaking均设为true，避免冗余代码被打包进初始chunk。

内容的提问来源于stack exchange，提问作者Ondřej Michejda