Angular v5升级至v14后网站加载/重载时长增加问题咨询

问题描述 #

刚接触webpack5，将Angular v5+项目升级至v14+后，应用整体运行正常，但加载时会额外加载src_main_webapp_bootstrap_ts chunk文件，耗时约2.31s，旧版本无此文件，导致网站加载/重载耗时增加。

相关截图 #

• 额外chunk文件截图：
  
• 新旧版本加载耗时对比：
  

排查与解决步骤 #

• 调整Angular构建优化配置
  在angular.json的build节点下，检查并修改optimization、splitChunks和runtimeChunk参数：

  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "optimization": true,
      "splitChunks": {
        "default": {
          "minSize": 50000,
          "cacheGroups": {
            "defaultVendors": {
              "test": /[\\/]node_modules[\\/]/,
              "priority": -10,
              "reuseExistingChunk": true
            },
            "default": {
              "minChunks": 2,
              "priority": -20,
              "reuseExistingChunk": true
            }
          }
        }
      },
      "runtimeChunk": false
    }
  }
  

  把runtimeChunk设为false避免拆分runtime代码，调高minSize阈值减少不必要的chunk拆分。

• 简化bootstrap入口逻辑
  检查main.ts是否存在异步导入或额外拆分逻辑，Angular v14+的bootstrap流程与v5有差异，确保入口代码简洁：

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
  

• 配置预加载策略优化加载速度
  如果该chunk是必要初始化代码，在路由模块启用预加载策略：

  import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [/* 你的路由配置 */];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

• 检查自定义webpack规则（如有）
  若项目用了custom-webpack插件，确认splitChunks规则是否误将bootstrap代码单独拆分，调整规则将其合并到主chunk中。

• 验证生产构建效果
  开发环境的chunk拆分逻辑和生产环境不同，执行ng build --prod构建生产包，查看该额外chunk是否会被合并优化。

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