angular懒加载

简介: angular懒加载

在项目中划分模块,使用懒加载的模式,可以使我们的页面加载变快。是因为默认情况下,初始化的时候就会加载完所有的页面,如果页面多,应用大,就会出现页面加载慢的问题。

知识点
RouterModule.forRoot()和RouterModule.forChild();
RouterModule提供了两个静态方法:forRoot()和forChild()来配置路由信息。
在我们项目初始化的时候,会有一个app-routing.module.ts文件。此文件中使用的就是forRoot()方法。forRoot()在主模块中定义主要的路由信息。而forChild()则是用在子模块中,用于配置路由信息的。

懒加载
默认情况下,我们定义的组件和相关内容,都需要注册到根模块app.module.ts中去,如果组件多时,体积会相当的庞大。但是,如果使用了懒加载的模式,我们只需要把子模块的module注入根模块即可。其余的相关依赖引入子模块的module中。
在app-routing.module.ts中,如果默认模式,路由的定义

let routes:Routes = [{
   path:'xxx/:params',component:'xxxx'}];

懒加载模式:

let routes:Routes = [{
   
  path:'xxx',
  loadChildren:() =>import ('引入对应的子模块的module路径').then(m => m.子模块名字)
}]

这样就可以减少应用启动时加载资源的大小。

相关文章
|
1月前
|
JavaScript 前端开发 测试技术
如何在 Angular 中使用懒加载路由
如何在 Angular 中使用懒加载路由
13 0
|
4月前
|
JavaScript
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
|
10月前
|
Web App开发 前端开发 JavaScript
Angular 应用实现 Lazy Load(懒加载)的项目实战经验分享
Angular 应用实现 Lazy Load(懒加载)的项目实战经验分享
|
11月前
|
前端开发 JavaScript UED
Angular 动态导入和懒加载的深入介绍
Angular 动态导入和懒加载的深入介绍
|
11月前
|
API UED
Angular 应用懒加载模块中的配置管理
Angular 应用懒加载模块中的配置管理
|
11月前
|
开发框架 前端开发 UED
Angular 中懒加载模块初始化技术详解
Angular 中懒加载模块初始化技术详解
|
11月前
|
设计模式 JavaScript 前端开发
Angular 懒加载模块与 Combined Injector
Angular 懒加载模块与 Combined Injector
|
11月前
|
开发框架 前端开发 UED
初始化 Angular 懒加载模块:使用MODULE_INITIALIZER的高级技巧
初始化 Angular 懒加载模块:使用MODULE_INITIALIZER的高级技巧
|
3天前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
12 1
|
17天前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
29 0