【HarmonyOS Next】【性能优化】运行时动态加载页面提升性能

HarmonyOS Next应用开发案例（持续更新中……）

HarmonyOS Next性能指导总览

本篇文章链接，请访问：https://gitee.com/harmonyos-cases/cases/blob/master/docs/performance/performance-dynamic-import.md

简介

应用在加载页面时，如果引入大量暂不需要加载的模块，会因过多模块导致页面加载缓慢。比如当页面在使用Navigation组件时，主页默认先加载所有页面，此时若包含大量子页面，仅加载主页这一项就需要很长时间，但这些复杂的子页面与主页渲染无关。
本文推荐使用动态加载解决上述问题，不在应用程序加载时就将所有模块都加载进来，而是按需加载模块，增加应用灵活性，提升应用性能。

场景示例

主页	子页面

下面示例应用通过Navigation组件常规加载与动态加载的对比，介绍如何在跳转时触发加载方法，实现按需加载子模块。

常规加载

开发者使用Navigation组件时，通常会在主页引入各子页面组件，在按钮中添加方法实现跳转。下述代码展示常规加载示例，通过import引入子组件。

1. 加载模块引入子页面，Navigation组件使用这些子模块实现跳转子页面功能，但用户进入主页时并不会马上使用到这些模块，存在冗余加载影响性能的可能。

   import { pageOne, pageOneData } from './pageOne';
   import { pageTwo, pagesTwoData } from './pageTwo';
   ...
   import router from '@ohos.router';
   

2. 主页通过Navigation组件实现点击Button跳转到不同的子页面。

   @Provide('pathInfos') pageInfos: NavPathStack = new NavPathStack();
   
   @Builder
   PageMap(name: string) {