Low-code platform-oriented lazy-activated front-end component loading system and method

Abstract

The application discloses a low-code platform-oriented delayed activation type front-end component loading system and method, and relates to the technical field of front-end development. In view of the performance bottleneck problem of a low-code page runtime, the scheme comprises the following steps: a component registration and scheduling module registers component meta information, listens to events and coordinates processes during page initialization; a resource lazy loading module divides resource blocks according to components, provides paths, receives scheduling instructions to asynchronously load resources, and triggers degradation in case of failure; a component proxy wrapping module generates node descriptions and proxy wrappers, mounts listeners, and switches to real components after receiving an activation signal; an activation strategy engine module standardizes activation conditions, monitors hit conditions, and sends activation signals according to priorities; a life cycle control module hosts life cycle hooks, rebinds and controls side effects; and a state keeping and data bridging module caches data, injects real components and synchronizes states. The application is used for improving overall page performance and user experience.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end development, in particular to a delay-activated front-end component loading system and method for a low-code platform. BACKGROUND

[0002] Existing low-code platforms widely use page structures described based on JSON or DSL, and the page content is dynamically rendered into a component tree of a front-end framework such as Vue or React by a runtime engine. However, in actual applications, the generated page may contain a large number of components, especially in middle and back-end systems, large-screen applications or form configurations, and all components are synchronously loaded during the first rendering of the page, which causes problems such as slow first-screen loading, high memory occupation, and slow page response.

[0003] Although some platforms support on-demand loading or lazy loading technology, most of them are limited to the route level or the static module level, lack a fine-grained delay activation mechanism for runtime components, and cannot determine the component loading time according to dynamic conditions such as user behavior, data state or viewport position, resulting in resource waste and performance loss. SUMMARY

[0004] The present application provides a delay-activated front-end component loading system and method for a low-code platform to solve the performance bottleneck problem caused by a large number of components in a low-code page during runtime, thereby improving the usability and development efficiency of the low-code platform.

[0005] In a first aspect, the present application provides a delay-activated front-end component loading system for a low-code platform, and the technical solution adopted to solve the above technical problems is as follows:

[0006] A delay-activated front-end component loading system for a low-code platform comprises:

[0007] A component registration and scheduling module is configured to register the meta-information of all components uniformly during page initialization, listen to module events, coordinate execution processes, and track component states and handle exceptions throughout the process as a core scheduling hub;

[0008] A resource lazy loading module is configured to split resource blocks by component granularity and provide resource path information to the component registration and scheduling module during the component registration stage to prepare for subsequent dynamic loading, and receive scheduling instructions during component activation, obtain resources through an asynchronous loading mechanism and feedback loading states, and trigger degradation logic when a failure occurs;

[0009] The component proxy packaging module is configured to generate a node description based on component registration meta-information, create a proxy wrapper to implement initial placeholder rendering, receive a listening instruction to activate the strategy engine module, mount a corresponding listener on the proxy node, and, when an activation signal is received, cooperate with the life cycle control module to complete smooth switching to a real component and provide a standardized access interface.

[0010] The activation strategy engine module is configured to receive an activation strategy when a component is registered, standardize various activation conditions, issue a listener mounting instruction to the component proxy packaging module to monitor strategy hit conditions in real time, and send activation signals to the component registration and scheduling module according to priority to trigger a subsequent loading process.

[0011] The life cycle control module is configured to receive an activation notification from the component registration and scheduling module, host a life cycle hook of a real component, rebuild attribute and event binding timing during a proxy switching stage, isolate and control side effect execution, and cooperate with the state keeping and data bridging module to ensure transition integrity from an unactivated state to a fully mounted state.

[0012] The state keeping and data bridging module is configured to cache input data and temporary states received by a component during a proxy running stage, inject cached data and establish a bidirectional data transmission channel when a real component is ready to be mounted, and synchronize state changes of the proxy and the real component to guarantee data consistency and continuity before and after activation.

[0013] Optionally, the component registration and scheduling module specifically includes:

[0014] The registration unit is configured to generate a unique ID for each component during a page parsing stage, bind meta-information including a resource path, an activation strategy, and initial attributes and persistently store the meta-information, and synchronously build a component resource index table to provide basic data support for subsequent scheduling.

[0015] The scheduling unit is configured to receive an activation signal sent by the activation strategy engine module, retrieve configuration information from a resource index table according to a component ID, check a current state of the component through a state management unit to avoid repeated loading, send a loading request to a resource lazy loading module when the component is activated for the first time, and synchronously prepare a running environment required for mounting.

[0016] The mounting unit is configured to provide a unified activation entrance after resource loading is completed, send a start instruction to the life cycle control module, and sequentially execute a life cycle process of component initialization, attribute transmission, and event binding. The mounting unit is further configured to call the component proxy packaging module to complete replacement of a proxy node and a real component instance, and establish a data synchronization channel with the state keeping and data bridging module.

[0017] A state management unit is configured to maintain a component lifecycle state in real time, generate traceable activation logs, and when detecting activation failure, synchronize a marker state and notify a resource lazy loading module to trigger a degradation processing logic, and meanwhile, feedback exception information to a scheduling unit.

[0018] Further, the resource lazy loading module specifically includes:

[0019] A path segmentation unit is configured to divide resource blocks according to component granularity in a page construction stage, synchronize resource path information to the component registration and scheduling module when the component is registered, and provide basic path data for dynamic import in the activation stage.

[0020] An asynchronous loading and error processing unit is configured to receive a loading instruction of the loading and activation linkage unit, realize resource asynchronous loading through dynamic import, feed back loading status to the component registration and scheduling module in real time, trigger a degradation logic and notify the component registration and scheduling module to record exceptions when loading fails.

[0021] A loading and activation linkage unit is configured to listen to an activation signal forwarded by the component registration and scheduling module, trigger an asynchronous loading process immediately, send a ready notification to the lifecycle control module after resource loading is completed, ensure that a real component is executed after the resource is complete, realize asynchronous decoupling of the loading process and component mounting.

[0022] Further, the component proxy wrapping module specifically includes:

[0023] A component node description generation unit is configured to receive meta information of component registration, preprocess each component node, and construct a uniform configuration description object containing preset key fields, to prepare for subsequent proxy encapsulation.

[0024] A component proxy wrapper unit is configured to provide a general proxy wrapper, generate a placeholder container containing auxiliary elements or prompt information during initialization, and save a component configuration description object internally.

[0025] An activation listener mounting unit is configured to receive a listening instruction of the activation strategy engine module, call a proxy wrapper, and automatically mount a corresponding listener in a non-invasive manner according to an activation strategy type of a component configuration by the proxy wrapper, to ensure that a component logic is completely isolated before activation.

[0026] A component switching execution unit is configured to monitor an activation condition by means of a listener, receive an activation signal when the activation condition is met, load a real component in cooperation with a lifecycle control module, replace the placeholder container with the real component after loading is completed, and ensure a switching process to be coherent and free of exceptions.

[0027] The agent component access unit is used for providing unified agent component declaration and access mode, and includes that all components are encapsulated by a proxy wrapper by default when being registered, the proxy wrapper supports seamless integration with a rendering engine, and a delay activation mechanism is controlled through unified configuration.

[0028] Further optionally, the involved activation policy engine module specifically includes:

[0029] The policy standardization and configuration abstraction unit is used for designing a policy description model that can be declared in a page JSON, supporting multiple activation policy type configuration items, and the policy description being a single condition or a combined condition.

[0030] The listener registration and unified scheduling unit is used for automatically registering a corresponding listener according to a policy type and maintaining a reference, supporting concurrent listening to multiple policy sources, performing deduplication and debouncing optimization on the listener, and all listeners being uniformly accessed to a listener callback channel of a component proxy wrapper module.

[0031] The policy judgment and priority control unit is used for implementing multiple activation condition combination judgment logic, and a built-in condition combination analysis engine controls a judgment rule through a logical expression, and a priority is set for different activation policies to avoid low-priority policies from preempting an activation opportunity.

[0032] The activation signal unified publishing unit is used for publishing a standard activation signal containing a component unique ID and activation source information to a component registration and scheduling module when a component meets an activation condition combination, and supporting recording an activation policy hit log for performance analysis and operation debugging.

[0033] Further optionally, the involved life cycle control module specifically includes:

[0034] The proxy hosting unit is used for caching a delay-triggered life cycle operation before a component is activated, and replaying or playing back a corresponding life cycle event according to a component type and a framework specification in component registration meta-information after the component is activated, to realize proxying and hosting of a life cycle hook.

[0035] The timing reconstruction unit is used for caching all incoming attributes and listeners in a proxy state, and rebinding them to a real component instance after activation, to ensure consistent behavior and correct event execution context of external functions or state references, and to complete timing reconstruction of attribute and event binding.

[0036] The side effect control unit is used for freezing all side effect logics before a component is activated, performing isolation verification when the component is activated to avoid repeated calling problems, clearing all bound side effects and releasing memory resources when the component fails to be activated, to realize state isolation and side effect control before activation.

[0037] Further optionally, the involved state keeping and data bridging module specifically includes:

[0038] Pre-activation data capture unit for caching component initial attributes, binding model, default state and change snapshot of two-way binding field, and storing in cache pool associated with component unique ID;

[0039] Post-activation data recovery unit for extracting state data of corresponding component from cache pool and injecting into real component, synchronously triggering binding update logic, and rebuilding reactive dependency relationship to ensure internal and external state consistency;

[0040] Cross-component data bridging unit for realizing state transmission between parent and child components and between sibling components through standardized interface in complex form or nested component scenario, and automatically recovering bridging channel after component activation to ensure continuity of cross-component data interaction.

[0041] In a second aspect, the present application provides a delayed activation type front-end component loading method for a low-code platform, which solves the above technical problems by adopting the following technical solutions:

[0042] A delayed activation type front-end component loading method for a low-code platform, which is based on the system of the first aspect and specifically includes the following steps:

[0043] S1, initialization registration stage: the component registration and scheduling module uniformly collects all component meta information and completes registration; the resource lazy loading module divides resource blocks according to component granularity, and synchronizes resource path information to the component registration and scheduling module; the component proxy wrapping module generates proxy node description based on meta information, and creates a placeholder rendering proxy wrapper;

[0044] S2, proxy running stage: the activation strategy engine module receives the activation strategy at the time of component registration, and issues a listener mounting instruction to the component proxy wrapping module; the component proxy wrapping module mounts a listener on the proxy node to listen to the activation trigger condition; the state keeping and data bridging module starts to work, caches the input data and temporary state received by the component, and establishes and maintains a cross-component data channel;

[0045] S3, activation trigger stage: the activation strategy engine module monitors the strategy hit in real time, sorts the activation signals according to priority, and sends them to the component registration and scheduling module; the component registration and scheduling module sends a resource loading instruction to the resource lazy loading module;

[0046] S4, resource loading stage: the resource lazy loading module loads the target component resources through an asynchronous mechanism, and feeds back the loading state to the component registration and scheduling module in real time; if the loading fails, the resource lazy loading module triggers the degradation logic and records the exception by the component registration and scheduling module;

[0047] S5. Real Component Switching Phase: The component registration and scheduling module sends an activation notification to the lifecycle control module. The lifecycle control module takes over the lifecycle hooks of the real component and prepares for the proxy switching process. The state maintenance and data bridging module extracts the input data and temporary state cached by the component during the proxy running phase from the cache, injects them into the real component, establishes a two-way data transmission channel, synchronizes the state changes of the proxy and the real component, migrates the cross-component data channel during the proxy running phase to the real component, restores the state transmission link, and ensures data consistency and continuity before and after activation.

[0048] S6. Mounting Phase Completed: The component proxy packaging module, in conjunction with the lifecycle control module, completes a smooth transition from the proxy node to the real component; the lifecycle control module confirms that the side effects have been executed, and the component enters the "fully mounted state"; the component registration and scheduling module updates the component state record, and the process ends.

[0049] The present invention provides a delayed activation front-end component loading system and method for low-code platforms, which has the following advantages compared with the prior art:

[0050] 1. This invention achieves on-demand activation, lazy loading, and performance optimization of components through collaborative work between modules, solving the performance bottleneck problem caused by the large number of components in low-code pages during runtime. It is applicable to scenarios such as complex page construction, large-screen display, and mobile form applications. It can significantly improve page running efficiency, enhance platform stability and maintainability without affecting user experience, and has good practical value and promotion prospects.

[0051] 2. This invention can introduce a delayed activation strategy for various components on the page, loading their actual component structure and logic only when the activation conditions are met. This allows the low-code platform to avoid synchronous loading of all components during the initial rendering of the page, effectively reducing resource consumption and performance pressure during the first screen loading, and improving rendering performance and user response speed.

[0052] 3. This invention activates the corresponding components as needed based on the activation strategy during component registration, achieving a more intelligent component management method; the activation process, combined with resource lazy loading and lifecycle control mechanisms, not only ensures the integrity of component rendering, but also maintains the continuity of page data and state. Attached Figure Description

[0053] Appendix Figure 1 This is a module connection block diagram of Embodiment 1 of the present invention;

[0054] Appendix Figure 2 This is a flowchart of the method in Embodiment 2 of the present invention. Detailed Implementation

[0055] In order to make the technical solutions, the technical problems solved and the technical effects of the present application clearer and more apparent, the technical solutions of the present application are described below in detail and completely in combination with specific embodiments.

[0056] Embodiment one: in combination with the attached Figure 1 The embodiment proposes a delay activation type front-end component loading system for a low-code platform, which comprises a component registration and scheduling module, a resource lazy loading module, a component proxy wrapping module, an activation strategy engine module, a life cycle control module and a state keeping and data bridging module.

[0057] The component registration and scheduling module is used for registering the meta information of all components as a core scheduling hub to listen to module events, coordinate execution processes and track component states and handle exceptions throughout the process when the page is initialized.

[0058] Specifically, the component registration and scheduling module involved comprises:

[0059] A registration unit is used for generating a unique ID (such as hash, UUID) for each component in the page parsing stage, binding the meta information containing the type, resource path, activation strategy and initial attributes of the component and persistently storing it, synchronously building a component resource index table to provide basic data support for subsequent scheduling;

[0060] A scheduling unit is used for receiving the activation signal sent by the activation strategy engine module, retrieving the configuration information from the resource index table according to the component ID; checking the current state of the component through the state management unit to avoid repeated loading; sending a loading request to the resource lazy loading module when activated for the first time, and synchronously preparing the running environment required for mounting;

[0061] A mounting unit is used for providing a unified activation entrance after the resource loading is completed, sending a start instruction to the life cycle control module, executing the life cycle processes of component initialization, attribute transmission and event binding in sequence; calling the component proxy wrapping module to complete the replacement of the proxy node and the real component instance, and establishing a data synchronization channel with the state keeping and data bridging module;

[0062] A state management unit is used for maintaining the component life cycle state (including state marking, activation times, last activation time, etc.) in real time, generating traceable activation logs; when activation failure is detected, the state is marked synchronously and the resource lazy loading module is notified to trigger the degradation processing logic, and the scheduling unit is fed back with abnormal information.

[0063] The resource lazy loading module is used for splitting the resource block by component granularity and providing the resource path information to the component registration and scheduling module in the component registration stage, preparing for subsequent dynamic loading; receiving the scheduling instruction when the component is activated, obtaining the resource through the asynchronous loading mechanism and feeding back the loading state, triggering the degradation logic when it fails.

[0064] Specifically, the resource lazy loading module comprises:

[0065] a path segmentation unit, configured to divide resource blocks by component granularity in a page building stage, and synchronize resource path information to the component registration and scheduling module when the component is registered, to provide basic path data for dynamic import in activation;

[0066] an asynchronous loading and error processing unit, configured to receive a loading instruction of the loading and activation linkage unit, implement resource asynchronous loading through a dynamic import capability (such as import()), feed back a loading state to the component registration and scheduling module in real time, trigger a degradation logic and notify the component registration and scheduling module to record an exception when loading fails;

[0067] a loading and activation linkage unit, configured to listen to an activation signal forwarded by the component registration and scheduling module, trigger an asynchronous loading process immediately, send a ready notification to the life cycle control module after resource loading is completed, ensure that a real component is executed to be mounted after resource is complete, and realize asynchronous decoupling of a loading process and component mounting.

[0068] The component proxy wrapping module is configured to: generate a node description based on component registration meta information, create a proxy wrapper to implement initial placeholder rendering; receive a listening instruction of the activation strategy engine module, mount a corresponding listener on a proxy node; when receiving an activation signal, cooperate with the life cycle control module to complete smooth switching to a real component, and provide a standardized access interface.

[0069] Specifically, the component proxy wrapping module comprises:

[0070] a component node description generation unit, configured to receive meta information of component registration, specifically including types, binding data, activation strategies and other meta information of the component, and after preprocessing, construct each component node into a unified configuration description object containing preset key fields, to prepare for subsequent proxy encapsulation; the preset key fields include a component type identifier, a unique ID, rendering attributes (props), an activation strategy (activationConfig) and a component resource path;

[0071] a component proxy wrapper unit, configured to provide a general proxy wrapper (for wrapping all components to be rendered), generate a placeholder container (such as a blank box, a skeleton screen or a loading icon) containing auxiliary elements or prompt information (such as a loading state or a “click to load” button) during initialization, and save a component configuration description object (for real rendering in a subsequent activation process) in the interior;

[0072] The activation listener mounting unit is configured to receive an activation policy engine module monitoring instruction, call a proxy wrapper, and automatically mount a corresponding listener in a non-invasive manner according to an activation policy type configured by the component, to ensure that the component logic is completely isolated before activation.

[0073] The component switching execution unit is configured to monitor an activation condition (the activation condition includes view visibility, user operation, data dependency, etc.) by means of the listener, receive an activation signal when the activation condition is met, load a real component in cooperation with the life cycle control module, and replace the placeholder container with the real component after loading is completed, to ensure a coherent and abnormal-free switching process.

[0074] The proxy component access unit is configured to provide a unified proxy component declaration and access mode, including that all components are encapsulated by a proxy wrapper by default when being registered, platform developers do not need to explicitly declare, the proxy wrapper supports seamless integration with a rendering engine, and supports a delayed activation mechanism through unified configuration control.

[0075] The activation policy engine module is configured to receive an activation policy when a component is registered, standardize various activation conditions (the activation condition includes view visibility, user operation, data dependency, etc.), issue a listener mounting instruction to a component proxy wrapping module, monitor a policy hit in real time, sort activation signals according to priorities and send them to a component registration and scheduling module, and trigger a subsequent loading process.

[0076] Specifically, the activation policy engine module specifically includes:

[0077] The policy standardization and configuration abstraction unit is configured to design a policy description model that can be declared in a page JSON, support multiple activation policy type configuration items, and the policy description is a single condition (such as meeting a view condition or a data condition) or a combined condition (such as meeting a view condition and a data condition at the same time).

[0078] The listener registration and unified scheduling unit is configured to automatically register a corresponding listener according to a policy type and maintain a reference, support concurrent monitoring of multiple policy sources, perform de-duplication and de-bouncing optimization on the listener, and all listeners are uniformly accessed to a monitoring callback channel of the component proxy wrapping module.

[0079] The policy judgment and priority control unit is configured to implement a variety of activation condition combination judgment logic (for example, “view condition and data condition” or “view condition or data condition”), a built-in condition combination analysis engine controls a judgment rule through a logical expression, sets a priority for different activation policies to avoid low-priority policies from preempting an activation opportunity.

[0080] The activation signal unified issuing unit is configured to issue a standard activation signal (containing a component unique ID, an activation source, a policy type, a timestamp, etc., facilitating subsequent tracking) containing the component unique ID and the activation source information to the component registration and scheduling module when the component meets the activation condition, and support recording the activation policy hit log for performance analysis and operation debugging.

[0081] The life cycle control module is configured to receive the activation notification of the component registration and scheduling module, host the life cycle hook of the real component, rebuild the attribute and event binding sequence when the proxy switching stage is reconstructed, isolate and control the side effect execution, and cooperate with the state keeping and data bridging module to ensure the transition integrity of the component from the "inactivated state" to the "completely mounted state".

[0082] Specifically, the life cycle control module specifically includes:

[0083] The proxy hosting unit is configured to cache the delayed triggered life cycle operation before the component is activated, and replay the corresponding life cycle event according to the component type and the framework specification in the component registration meta information after the component is activated, so as to realize the proxy and hosting of the life cycle hook.

[0084] The timing rebuilding unit is configured to cache all the incoming attributes (props) and listeners in the proxy state, and bind them to the real component instance after the component is activated, so as to ensure the behavior consistency and the correct event execution context of the external function or state reference, and complete the timing rebuilding of the attribute and event binding.

[0085] The side effect control unit is configured to freeze all the side effect logics (such as watch, timer, and listener) before the component is activated, perform isolation verification to avoid repeated calling when the component is activated, clear all the bound side effects and release the memory resources when the component fails to be activated, so as to realize the state isolation and side effect control before the component is activated.

[0086] The state keeping and data bridging module is configured to cache the input data and temporary state received by the component in the proxy running stage, inject the cached data and establish a bidirectional data transmission channel when the real component is ready to be mounted, and synchronize the state changes of the proxy and the real component, so as to guarantee the data consistency and continuity before and after the component is activated.

[0087] Specifically, the state keeping and data bridging module specifically includes:

[0088] The pre-activation data capturing unit is configured to cache the change snapshot of the initial attribute, the bound model, the default state, and the bidirectional binding field of the component, and store the snapshot in the cache pool in association with the component unique ID.

[0089] The activated data recovery unit is used to extract the state data of the corresponding component from the cache pool and inject it into the real component, synchronously trigger the binding update logic, and rebuild the reactive dependency relationship to ensure consistency between internal and external states.

[0090] The cross-component data bridging unit is used in complex forms or nested component scenarios to achieve state transfer between parent and child components and sibling components through standardized interfaces (such as context, scope, and props channels). It also automatically restores the bridging channel after the component is activated to ensure the continuity of cross-component data interaction.

[0091] Example 2: Combined with Appendix Figure 2 This embodiment proposes a delayed activation front-end component loading method for low-code platforms, which is based on the system described in Embodiment 1 and specifically includes the following steps:

[0092] S1. Initialization and Registration Phase: The component registration and scheduling module collects all component metadata and completes registration; the resource lazy loading module divides resource blocks according to component granularity and synchronizes resource path information to the component registration and scheduling module; the component proxy wrapping module generates proxy node descriptions based on metadata and creates placeholder rendering proxy wrappers.

[0093] S2, Proxy Operation Phase: The activation strategy engine module receives the activation strategy when the component is registered and sends a listener mounting instruction to the component proxy wrapping module; the component proxy wrapping module mounts the listener on the proxy node to listen for activation trigger conditions; the state maintenance and data bridging module starts working, caching the input data and temporary state received by the component, and establishing and maintaining cross-component data channels.

[0094] S3, Activation Trigger Phase: The activation strategy engine module monitors the strategy hit in real time, sorts the activation signals according to priority and sends them to the component registration and scheduling module; the component registration and scheduling module sends resource loading instructions to the resource lazy loading module.

[0095] S4. Resource Loading Phase: The resource lazy loading module loads the target component resources asynchronously and reports the loading status to the component registration and scheduling module in real time. If loading fails, the resource lazy loading module triggers the degradation logic and the component registration and scheduling module records the exception.

[0096] S5. Real Component Switching Phase: The component registration and scheduling module sends an activation notification to the lifecycle control module. The lifecycle control module takes over the lifecycle hooks of the real component and prepares for the proxy switching process. The state maintenance and data bridging module extracts the input data and temporary state cached by the component during the proxy running phase from the cache, injects them into the real component, establishes a two-way data transmission channel, synchronizes the state changes of the proxy and the real component, migrates the cross-component data channel during the proxy running phase to the real component, restores the state transmission link, and ensures data consistency and continuity before and after activation.

[0097] S6. Mounting Phase Completed: The component proxy packaging module, in conjunction with the lifecycle control module, completes a smooth transition from the proxy node to the real component; the lifecycle control module confirms that the side effects have been executed, and the component enters the "fully mounted state"; the component registration and scheduling module updates the component state record, and the process ends.

[0098] In summary, the lazy-activated front-end component loading system and method for low-code platforms of this invention can achieve on-demand activation, lazy loading, and performance optimization of components through the collaborative work between modules. This solves the performance bottleneck problem caused by the large number of components in low-code pages during runtime and is suitable for scenarios such as complex page construction, large-screen display, and mobile form applications.

[0099] The above specific examples illustrate the principles and implementation methods of the present invention in detail. These embodiments are merely for the purpose of helping to understand the core technical content of the present invention. Based on the above specific embodiments of the present invention, any improvements and modifications made to the present invention by those skilled in the art without departing from the principles of the present invention should fall within the patent protection scope of the present invention.

Claims

1. A low-code platform oriented lazy activated front-end component loading system, characterized in that, The application relates to a component registration and scheduling module, a resource lazy loading module, a component proxy wrapping module, an activation strategy engine module and a life cycle control module. The component registration and scheduling module is used for registering the meta information of all components in a unified manner during page initialization, serving as a core scheduling center for monitoring module events, coordinating execution processes and tracking component states and processing exceptions throughout the whole process. The resource lazy loading module is used for dividing resource blocks according to component granularity during component registration and providing resource path information to the component registration and scheduling module to prepare for subsequent dynamic loading; receiving scheduling instructions during component activation, obtaining resources through an asynchronous loading mechanism and feeding back loading states, and triggering degradation logic when failure occurs. The component proxy wrapping module is used for generating node descriptions based on component registration meta information, creating a proxy wrapper to realize initial placeholder rendering, receiving listening instructions from the activation strategy engine module, mounting corresponding listeners on the proxy node, and cooperating with the life cycle control module to complete smooth switching to a real component and providing a standardized access interface when an activation signal is received. The activation strategy engine module is used for receiving activation strategies during component registration, standardizing various activation conditions, issuing listener mounting instructions to the component proxy wrapping module to monitor strategy hit conditions in real time, and sending activation signals to the component registration and scheduling module according to priority to trigger subsequent loading processes. The life cycle control module is used for receiving activation notifications from the component registration and scheduling module, hosting life cycle hooks of a real component, rebuilding attribute and event binding sequences during proxy switching, isolating and controlling side effect execution, and cooperating with the state keeping and data bridging module to ensure the transition integrity of a component from an inactivated state to a completely mounted state. The state keeping and data bridging module is used for caching input data and temporary states received by a component during proxy running, injecting cached data and establishing a bidirectional data transmission channel when a real component is ready to be mounted. The state of the synchronous proxy and the real component is changed to guarantee the data consistency and continuity before and after activation.

2. The low-code platform facing lazy-activated frontend component loading system of claim 1, wherein, The component registration and scheduling module specifically comprises a registration unit and a scheduling unit. The registration unit is used for generating a unique ID for each component during page parsing, binding meta information containing resource paths, activation strategies and initial attributes and persistently storing the meta information, and synchronously constructing a component resource index table to provide basic data support for subsequent scheduling. The scheduling unit is used for receiving activation signals sent by the activation strategy engine module, retrieving configuration information from the resource index table according to the component ID, checking the current state of the component through a state management unit to avoid repeated loading, sending a loading request to the resource lazy loading module when the component is activated for the first time, and synchronously preparing a running environment required for mounting. The mounting unit is used for providing a unified activation entrance after resource loading is completed, sending a start instruction to the life cycle control module, sequentially executing the life cycle processes of component initialization, attribute transmission and event binding, calling the component proxy wrapping module to complete the replacement of a proxy node and a real component instance, and establishing a data synchronization channel with the state keeping and data bridging module. The state management unit is configured to maintain component lifecycle states in real time, generate traceable activation logs, and when detecting activation failure, synchronize the marked state and notify the resource lazy loading module to trigger degradation processing logic, and meanwhile, feedback abnormal information to the scheduling unit.

3. The low-code platform facing lazy-activated frontend component loading system of claim 2, wherein, The resource lazy loading module specifically includes: The path segmentation unit is configured to divide resource blocks according to component granularity in the page construction stage, synchronize resource path information to the component registration and scheduling module when the component is registered, and provide basic path data for dynamic import in the activation stage. The asynchronous loading and error processing unit is configured to receive loading instructions of the loading and activation linkage unit, realize resource asynchronous loading through dynamic import, feed back loading states to the component registration and scheduling module in real time, trigger degradation logic and notify the component registration and scheduling module to record exceptions when loading fails. The loading and activation linkage unit is configured to listen to activation signals forwarded by the component registration and scheduling module, trigger the asynchronous loading process immediately, send a ready notification to the lifecycle control module after resource loading is completed, ensure that the real component is executed after the resource is complete, and realize asynchronous decoupling of the loading process and component mounting.

4. The low-code platform facing lazy-activated front-end component loading system of claim 3, wherein, The component proxy wrapper module specifically includes: The component node description generation unit is configured to receive meta information of component registration, preprocess each component node, and construct a uniform configuration description object containing preset key fields, to prepare for subsequent proxy encapsulation. The component proxy wrapper unit is configured to provide a general proxy wrapper, generate a placeholder container containing auxiliary elements or prompt information during initialization, and save the component configuration description object internally. The activation listener mounting unit is configured to receive listening instructions of the activation strategy engine module, call the proxy wrapper, and automatically mount the corresponding listener in a non-invasive manner according to the activation strategy type of the component configuration by the proxy wrapper, to ensure that the component logic is completely isolated before activation. The component switching execution unit is configured to load the real component in cooperation with the lifecycle control module when the activation condition is met by means of the listener, replace the placeholder container with the real component after loading is completed, and ensure that the switching process is smooth and free of exceptions. The proxy component access unit is configured to provide a unified proxy component declaration and access method, including that all components are encapsulated by the proxy wrapper by default during registration, the proxy wrapper supports seamless integration with the rendering engine, and the delay activation mechanism can be controlled through unified configuration.

5. The low-code platform facing lazy-activated front-end component loading system of claim 4, wherein, The activation strategy engine module specifically includes: The strategy standardization and configuration abstraction unit is configured to design a strategy description model that can be declared in the page JSON, support multiple activation strategy type configuration items, and the strategy description is a single condition or a combination condition. The listener registration and unified scheduling unit is configured to automatically register the corresponding listener according to the strategy type and maintain the reference, support concurrent listening to multiple policy sources, perform de-duplication and de-bouncing optimization on the listener, and all listeners are uniformly accessed to the listener callback channel of the component proxy wrapper module. The policy judgment and priority control unit is used to realize a variety of activation condition combination judgment logics, and a built-in condition combination analysis engine controls a judgment rule through a logical expression, and sets priorities for different activation strategies to avoid low-priority strategies from preempting activation opportunities. The activation signal unified issuing unit is used to issue a standard activation signal containing a component unique ID and activation source information to a component registration and scheduling module when the component meets the activation condition combination, and supports recording an activation strategy hit log for performance analysis and operation debugging.

6. The low-code platform facing lazy-activated frontend component loading system of claim 5, wherein, The lifecycle control module specifically includes: The proxy hosting unit is used to cache a delayed triggered lifecycle operation before the component is activated, and to replay or supplement the corresponding lifecycle event according to the component type in the component registration meta information and the framework specification after the component is activated, so as to realize proxying and hosting of the lifecycle hook; The timing reconstruction unit is used to cache all incoming attributes and listeners in the proxy state, and to rebind them to the real component instance after the component is activated, so as to ensure consistent behavior and correct event execution context of external functions or state references, and complete timing reconstruction of attribute and event binding; The side effect control unit is used to freeze all side effect logics before the component is activated, to perform isolation verification to avoid repeated calling problems when the component is activated, to clear all bound side effects and release memory resources when the component fails to be activated, and to realize state isolation and side effect control before activation.

7. The low-code platform facing lazy-activated frontend component loading system of claim 6, wherein, The state keeping and data bridging module specifically includes: The pre-activation data capturing unit is used to cache change snapshots of initial attributes, bound models, default states and two-way binding fields of the component, and to associate them to the component unique ID and store them in a cache pool; The post-activation data recovery unit is used to inject the real component with state data of the corresponding component, to synchronously trigger bound update logic, to reconstruct responsive dependency relationships, and to ensure internal and external states to be consistent; The cross-component data bridging unit is used to realize state transmission between parent and child components and between sibling components through a standardized interface in a complex form or nested component scenario, and to automatically recover the bridging channel after the component is activated, so as to ensure continuity of cross-component data interaction.

8. A method for low-code platform oriented lazy activation type front-end component loading, characterized in that, The method is based on the system according to any one of claims 1-7, and specifically includes the following steps: S1, initialization registration stage: the component registration and scheduling module uniformly collects all component meta information and completes registration; the resource lazy loading module divides resource blocks according to component granularity, and synchronizes resource path information to the component registration and scheduling module; The component proxy wrapping module generates a proxy node description based on the meta information, and creates a proxy wrapper for placeholder rendering; S2, proxy running stage: the activation strategy engine module receives an activation strategy when the component is registered, and issues a listener mounting instruction to the component proxy wrapping module; The component proxy wrapping module mounts the listener on the proxy node to listen to the activation trigger condition; the state keeping and data bridging module starts to work, caches input data and temporary states received by the component, and establishes and maintains a cross-component data channel; S3, activation trigger stage: the activation strategy engine module monitors the strategy hit in real time, sorts activation signals according to priorities, and sends them to the component registration and scheduling module; The component registration and scheduling module sends a resource loading instruction to the resource lazy loading module; S4, resource loading stage: the resource lazy loading module loads the target component resources through an asynchronous mechanism, and feeds back the loading state to the component registration and scheduling module in real time; if the loading fails, the resource lazy loading module triggers the degradation logic and records the exception by the component registration and scheduling module; S5, real component switching stage: the component registration and scheduling module sends an activation notification to the life cycle control module, the life cycle control module takes over the life cycle hook of the real component, and prepares the proxy switching process; the state maintenance and data bridging module extracts the input data and temporary state cached by the component in the proxy running stage, injects the real component and establishes a bidirectional data transmission channel, synchronizes the state changes of the proxy and the real component, migrates the cross-component data channel in the proxy running stage to the real component, restores the state transmission link, and guarantees the data consistency and continuity before and after activation; S6, complete mounting stage: the component proxy packaging module cooperates with the life cycle control module to complete the smooth switching from the proxy node to the real component; the life cycle control module confirms that the side effect is executed, and the component enters the "fully mounted state"; the component registration and scheduling module updates the component state record, and the process ends.

Images