Angular 6 应用程序将其发布到服务器后响应时间过长

Question

我开发了一个 Angular 应用程序，并在 Windows 服务器 (IIS) 中使用 (ng build --prod) 将其部署在生产版本中。所有图像都经过压缩，API 响应需要正常时间来响应(最长 800 毫秒)，但我的应用程序第一次加载速度太慢；当我在浏览器中点击 URL 时，需要大约 75 秒才能完全加载应用程序。之后，所有组件都可以顺利工作。我对以下几点有疑问。

• Angular 是否加载初始化时在路由中声明的所有组件？
• 我是否必须使用延迟加载来解决此性能问题？

我的应用程序中的路由文件如下。

const appRoutes:Routes=[
    {path:'',component:HomeComponent},
     ...
     ]

@NgModule({
    imports:[
        RouterModule.forRoot(appRoutes)
    ],
    exports:[ RouterModule ]
})

export class AppRountingModule{

}

有关上述的任何建议都会非常有帮助，因为我自上周以来就陷入了困境。提前致谢!

Answer 1

如果您不使用延迟加载，Angular 会预先加载所有内容。这当然相当慢(但 75 秒太慢，因此可能表明存在其他问题)。

您需要将组件组织成模块并使用延迟加载来加载这些模块。这只会在第一次访问路由时按需加载延迟加载模块中声明的组件，而不会预先加载所有组件。

这将减少您的初始应用加载时间。第一次加载路由可能会有一些延迟，但如果路由没有组件重载，那就没问题。

此外，请注意使用服务的新 Angular 方式:

@Injectable({
  providedIn: 'root'
})

这意味着服务不再需要放入提供者数组中，而是按需加载。这具有使代码组织更容易的双重好处，并且如果您只使用单例服务，则非常有用。如果服务仅在单个模块中使用，您还可以指定模块而不是“root”。