Angular中懒加载一个模块并动态创建显示该模块下声明的组件.doc
版权申诉
41 浏览量
2022-07-10
10:07:22
上传
评论
收藏 892KB DOC 举报
Angular 中懒加载一个模块并动态创建显示该模块下声明的组件
不通过路由的情况下, 懒加载一个 angular 模块, 并动态创建其中声明的组件
环境: Angular 13.x.x
angular 中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载
速度的目的. 但是这种通过路由的方式有时候是无法满足需求的.
比如, 点击一个按钮后显示一行工具栏, 这个工具栏组件我不希望它默认打包进 main.js,
而是用户点按钮后动态把组件加载并显示出来.
那为什么要动态加载呢? 如果直接在目标页面组件引入工具栏组件, 那么工具栏组件中的
代码就会被打包进目标页面组件所在的模块, 这会导致目标页面组件所在的模块生成的 js
体积变大; 通过动态懒加载的方式, 可以让工具栏组件只在用户点了按钮后再加载, 这样就
可以达到减少首屏尺寸的目的.
为了演示, 新建一个 angular 项目, 然后再新建一个 ToolbarModule, 项目的目录结构如图
资源评论
书博教育
- 粉丝: 1
- 资源: 2836
