角度惰性负载：灯塔报告；删除未使用的JavaScript“；在尚未加载的脚本上

我有一个关于灯塔问题的问题，我的angular应用程序加载延迟。基本上，我的应用程序包含3大块应该延迟加载的功能。因此，当您打开功能A时，我希望应用程序根本不会加载功能B和C的脚本，反之亦然

但不知何故，当我向lighthouse查询时，它报告说我可以“删除其他JS文件上未使用的JavaScript”，这些文件包含其他功能的全部功能。更糟糕的是，其中一个功能依赖于ngx quill for rich text editor，虽然我打开了一个不需要它的功能，但它也被加载了

我是不是遗漏了什么

编辑：

我有以下*-routing.modules.ts：

• 应用程序路由

• 功能a：没有什么有趣的，这里没有延迟加载

• 功能-b：

• 功能-c：包含多个其他延迟加载功能（功能-c1、-c2、-c3等），但这些功能都未被功能A和/或功能B引用

---

看起来问题不在于不应该加载的捆绑包（脚本）中未使用的JavaScript，而在于这些捆绑包首先被加载

很难说没有进一步的细节，但可能是因为以下任何原因：

preload所有模块

策略加载所有延迟加载的模块，而不管其延迟加载状态如何

“意外地”从一个延迟加载的功能模块导入到另一个模块会在运行时加载整个延迟加载的模块

通过

网络

选项卡验证是否确实加载了不相关的延迟加载功能（并且您没有混淆其他文件）

如果未使用的JavaScript位于实际上应该加载的捆绑包中，Lighthouse会将任何未执行的代码（例如，

if

未运行的条件，

*ngIf

未执行的指令）报告为未使用。对此我们无能为力

---

您确定将这些模块定义为惰性模块吗？你能提供你的app-routing.module.ts文件吗？@vitaliykotov我用路由模块文件更新了我的问题。谢谢我认为您的LandingPageComponent也应该在一个单独的模块中，就像您的

功能模块一样。是的，此模块仅包含1个页面，但此页面的依赖项不会自动导入同级页面。我想这就是Lighthouse所抱怨的…@Pieterjan我认为延迟加载的基本原则是，未使用的JS甚至不会被下载，因此优化了初始加载时间？@Pieterjan是的，我理解。我不明白的是，当我访问/feature-b时，feature-a和feature-c的JS也被下载了：/谢谢你的回答！我用相关路由模块的内容更新了我的问题。我没有看到在我的代码中任何地方设置
preload-allmodules
，因此我认为这应该不是问题所在。。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./feature-a/feature-a.module').then(m => m.FeatureAModule) },
  { path: 'feature-b', loadChildren: () => import('./feature-b/feature-b.module').then(m => m.FeatureBModule) },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LandingPageComponent } from './pages/landing-page/landing-page';
import { FeatureBPage } from './feature-b.page';

const routes: Routes = [
  {
    path: '',
    component: FeatureBPage,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: LandingPageComponent },
      {
        path: 'feature-c',
        loadChildren: () =>
          import('./feature-c/feature-c.module').then(
            (m) => m.FeatureCModule
          ),
      },
      { path: '**', redirectTo: '', pathMatch: 'full' }
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class FeatureBRoutingModule {}