Angular生产环境初始加载全部ES JS包，懒加载无效如何仅加载必要文件

我之前也碰到过类似的情况，尤其是在隐身窗口测试时容易误以为懒加载没生效，咱们一步步来排查和解决：

1. 先确认懒加载路由配置是否正确 #

首先要确保你的路由是真正的懒加载配置，Angular 8+推荐使用动态import()语法，避免静态导入导致Webpack提前打包：

// 正确的懒加载路由配置
const routes: Routes = [
  {
    path: 'lazy-feature',
    loadChildren: () => import('./lazy-feature/lazy-feature.module').then(m => m.LazyFeatureModule)
  }
];

一定要避免这种错误写法：

// ❌ 错误：静态导入会导致模块被打包进主chunk
import { LazyFeatureModule } from './lazy-feature/lazy-feature.module';

const routes: Routes = [
  { path: 'lazy-feature', loadChildren: () => LazyFeatureModule }
];

2. 检查预加载策略是否导致提前加载 #

Angular默认的预加载策略是PreloadAllModules——它会在初始页面加载完成后，自动预加载所有懒加载模块的chunk。在隐身窗口（无缓存）下，你可能会看到所有chunk陆续加载，但其实这是预加载，并非初始加载阶段的必要请求。

如果不需要全局预加载，改成NoPreloading即可：

import { NoPreloading, RouterModule } from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如果需要针对性预加载，还可以自定义预加载策略，只预加载特定模块。

3. 验证生产构建的优化配置是否启用 #

打开angular.json，检查projects -> 你的项目名 -> architect -> build -> configurations -> production下的配置：

{
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "500kb",
        "maximumError": "1mb"
      }
    ]
  }
}

确保optimization、buildOptimizer和aot都设为true——这些是保证懒加载chunk正确拆分的核心配置。

4. 检查是否存在意外的静态导入 #

有时候你可能在主模块（比如AppModule）或全局服务里，不小心导入了懒加载模块内的组件、服务或常量，这会导致Webpack把整个懒加载模块打包进主chunk，直接失去懒加载效果。

比如这种错误操作：

// ❌ 错误：在AppModule里导入了懒加载模块的组件
import { LazyComponent } from './lazy-feature/lazy.component';

@NgModule({
  declarations: [AppComponent, LazyComponent] // 这会导致LazyFeatureModule被提前打包
})

可以用webpack-bundle-analyzer分析bundle结构，快速定位问题：

1. 执行构建命令生成stats文件：ng build --prod --stats-json
2. 安装分析工具：npm install -g webpack-bundle-analyzer
3. 运行分析：webpack-bundle-analyzer ./dist/你的项目名/stats.json
   通过可视化界面，你能直观看到哪些模块被打包进了主chunk，排查是否有不该存在的内容。

5. 检查Service Worker的预缓存配置（如果启用） #

如果你的项目用了Angular Service Worker，检查ngsw-config.json里的assetGroups配置，是否把所有懒加载chunk都加入了预缓存列表：

{
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch", // 这个配置会预缓存所有匹配的资源
      "resources": {
        "files": ["/favicon.ico", "/index.html"],
        "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"] // 若包含所有chunk，会被强制预缓存
      }
    }
  ]
}

如果不需要预缓存懒加载chunk，可以把installMode改成lazy，或者调整versionedFiles的匹配规则，只包含主chunk。

6. 测试时区分初始加载和后续加载 #

在隐身窗口测试时，打开浏览器Network面板，勾选「Disable cache」后刷新页面——初始加载应该只有主chunk（main.*.js）、polyfills、runtime这些必要文件，懒加载的chunk只有当你访问对应路由时才会被请求。如果初始加载就出现了所有懒加载chunk，再按照上面的步骤逐一排查即可。

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