Dynamic component loading system based on React framework

Abstract

The invention relates to the technical field of information, and provides a dynamic component loading system based on a React framework, which comprises a server side, a user side and a background control side, realizes component preloading and caching through data interaction and analysis, and comprises a data acquisition unit, a front-end component management unit, a resource preloading unit, a cache management unit and a component loading optimization unit. A front-end component management unit optimizes loading configuration through simulation comparison, a resource preloading unit trains a model to predict user behaviors, a cache management unit carries out clustering analysis on high-frequency access data cache, and a component loading optimization unit optimizes model prediction by using a genetic algorithm, so that the loading efficiency is improved; according to the method and the device, the problem of low loading efficiency of the traditional component is effectively solved, and the Web front-end loading speed and the user experience are improved.

Description

Technical Field

[0001] The present invention relates to the field of information technology processing, and in particular to a dynamic component loading system based on a React framework. Background Art

[0002] In the field of web development, as the scale of applications continues to expand and the complexity increases, dynamic component loading technology has gradually become an important means to improve application performance and user experience. As one of the mainstream choices for front-end development, the development of the dynamic component loading system of the React framework is particularly eye-catching. By introducing the React.lazy() function and the Suspense component, React provides developers with an elegant way to load components on demand. The emergence of this technology not only reduces the initial loading time of the application, but also improves the response speed and overall performance of the application. As the React ecosystem continues to improve, dynamic component loading technology is also continuing to evolve, providing developers with a more flexible and powerful tool set.

[0003] In the existing Web front-end development, dynamic loading of components is an important technology. However, with the continuous development of information technology, when a page needs to dynamically load multiple components, each component may contain multiple resource files, such as JavaScript, CSS, and pictures. Resource files usually need to be obtained from the server through HTTP requests. Too many HTTP requests will significantly increase network latency, and the size of resource files will also gradually increase. For example, uncompressed JavaScript files, high-resolution pictures, etc. will take up a lot of bandwidth and download time. Too many HTTP requests and large resource file sizes lead to the problem of inefficiency in traditional component loading methods, resulting in long page loading time and poor user experience. Especially when dealing with large-scale concurrent requests, the existing technology cannot effectively cope with it, which further affects the system performance. Therefore, there is an urgent need for a new component loading system to improve the loading speed and system performance of the Web front end. Summary of the invention

[0004] In view of the shortcomings of the prior art, the present invention provides a dynamic component loading system based on the React framework to solve the problems of excessive HTTP requests and large resource file size, which lead to inefficient traditional component loading methods, long page loading time and poor user experience.

[0005] In order to solve the above technical problems, the specific technical solutions of the present invention are as follows:

[0006] The present invention provides a dynamic component loading system based on a React framework, comprising: a server end, a user end and a background control end, the server end establishes a communication connection with the user end and the background control end, the server end, the user end and the background control end generate interactive data during the data flow process, the server end analyzes the interactive data, and performs pre-loading and pre-caching of components;

[0007] The data acquisition unit acquires component metadata, resource file data, configuration data, operation data error data and status information, stores the acquired data in the database, and obtains a data set of the component loading system;

[0008] The front-end component management unit receives component requirement information, matches corresponding components in a preset knowledge base according to the component requirement information, obtains knowledge base component matching results, performs data analysis on the knowledge base component matching results, and obtains real-time component loading configuration;

[0009] The resource preloading unit obtains user interaction data, user preference data, performance data, device and environment data, user feedback data, and business-related data, preprocesses the data obtained by the resource preloading unit, trains the model with the preprocessed data, and deploys the trained model to the production environment. The model processes the data obtained by the resource preloading unit in real time and outputs real-time user behavior analysis results. The user behavior analysis results include preloaded component information. According to the preloaded component information, the resource preloading unit completes component preloading;

[0010] The cache management unit retrieves the user interaction data in the resource preloading unit and the component loading system data set in the data acquisition unit, performs cluster analysis on the user interaction data, the cluster analysis result includes the data access frequency clustering result, sets the top 35% of the data in the data access frequency clustering result as pre-cached data, and the cache management unit caches the pre-cached data;

[0011] The component loading optimization unit parses the component requirement information received in the front-end component management unit to obtain the component information that the user needs to load. The component information that the user needs to load is matched with the components that have completed component preloading in the resource preloading unit. If the match is unsuccessful, the model is optimized using a genetic algorithm based on the data in the component loading system data set and the data obtained by the resource preloading unit to obtain an optimized model. The optimized model is deployed and used to analyze user behavior.

[0012] Furthermore, the dynamic component loading system based on the React framework provided by the present invention, the data acquisition unit, includes:

[0013] Component metadata includes component identification information and component dependencies. Component identification information includes identifier, name, and version. Component identification information is used to accurately locate and identify components during dynamic loading. Component dependencies are used to express the relationship between a component and other components or libraries.

[0014] Resource file data includes JavaScript code of dynamic components, CSS style sheets, voice files, pictures, and videos;

[0015] Configuration data includes environment variables and user preferences. Environment variables include different configuration data loaded by each component. User preferences include dynamically adjusting the behavior or style of components according to user preferences.

[0016] Operational data includes API response data and cache data;

[0017] Error data includes network request failure and data format error, and status information includes component loading status.

[0018] Furthermore, the dynamic component loading system based on the React framework provided by the present invention, the front-end component management unit, includes:

[0019] The specific steps for data analysis of the knowledge base component matching results are as follows: the knowledge base component matching results include the components that need to be loaded corresponding to the component requirement information, obtaining the front-end component management unit configuration and architecture information, establishing a mirror front-end component management unit, establishing a mirror front-end component management unit including a first front-end component simulation management unit, a second front-end component simulation management unit and a third front-end component simulation management unit, and the knowledge base component matching results are sequentially loaded into the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit.

[0020] Furthermore, the dynamic component loading system based on the React framework provided by the present invention, the front-end component management unit, includes:

[0021] Monitor the speed of loading knowledge base component matching by the first front-end component simulation management unit, the second front-end component simulation management unit, and the third front-end component simulation management unit;

[0022] Compare the speeds of loading the knowledge base component matching of the first front-end component simulation management unit, the second front-end component simulation management unit, and the third front-end component simulation management unit to obtain a comparison result of the loading speeds of the front-end component simulation management units;

[0023] The component loading configuration of the front-end component simulation management unit ranked first in the front-end component simulation management unit loading speed comparison result is extracted as the real-time component loading configuration.

[0024] Furthermore, the dynamic component loading system based on the React framework provided by the present invention, the front-end component management unit, includes:

[0025] The first front-end component simulates the management unit loading method:

[0026] After receiving the knowledge base component matching result, the first front-end component simulation management unit loads the component in a synchronous manner, and other parts of the page will not continue to render or execute before the component loading is completed;

[0027] During the loading process, no cache mechanism is used to simulate the experience of first-time users;

[0028] Record various performance indicators during the loading process, including loading time, resource consumption, etc., for subsequent analysis and comparison;

[0029] The second front-end component simulates the management unit loading method:

[0030] After receiving the knowledge base component matching result, the component is loaded asynchronously. Before the component loading is completed, other parts of the page are allowed to continue rendering and executing during the component loading period. When the component enters the viewport or meets specific conditions, the component loading process is triggered. During the component loading process, the cache management unit cache is used to reduce component network requests and component loading time.

[0031] The third front-end component simulates the management unit loading method:

[0032] Based on the user behavior analysis result obtained by the resource preloading unit, the third front-end component simulation management unit preloads the components that the user may access soon;

[0033] Use code splitting techniques to split large components into chunks and dynamically load those chunks as needed, prioritizing the loading process based on the importance of the components and the urgency of the user's needs.

[0034] Furthermore, the dynamic component loading system based on the React framework provided by the present invention, the front-end component management unit, also includes:

[0035] Configure the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit with the same network environment, and send the same component requirement information to the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit respectively;

[0036] Record the total time for each simulation management unit from receiving component requirement information to completing component loading;

[0037] The performance indicators of the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit in the process of loading components are collected. The performance indicators in the process of loading components include network request time, resource processing time and rendering time.

[0038] Furthermore, the present invention provides a dynamic component loading system based on the React framework, a resource preloading unit, comprising:

[0039] Select logistic regression as the training model, use the preprocessed data as the training set to train the model, and deploy the trained model to the production environment;

[0040] After the trained model is deployed to the production environment, the trained model is tested. During the test, the computing resources and storage capacity are detected. If the computing resources and storage capacity are lower than the preset stable values, a warning message indicating insufficient space for model operation is generated.

[0041] Furthermore, the dynamic component loading system based on the React framework provided by the present invention, the cache management unit, includes:

[0042] Retrieve user interaction data from the resource preloading unit, retrieve component loading system data set from the data acquisition unit, preprocess the data, and obtain different data clusters through clustering algorithms;

[0043] Analyze each data cluster, calculate the frequency of data access, and sort the clustering results according to the frequency of data access;

[0044] The top 35% of the data clusters are selected and identified as the frequently accessed data, and the frequently accessed data are set as the pre-cached data;

[0045] When a user requests data, the cache management unit first checks whether the data exists in the pre-cached data;

[0046] If it exists, the data is returned to the user directly from the cache, and the pre-cached data is updated regularly.

[0047] Furthermore, the present invention provides a dynamic component loading system based on the React framework, and a component loading optimization unit, comprising:

[0048] The component loading optimization unit parses the component demand information received in the front-end component management unit to obtain the component information that the user needs to load, and matches the component information that the user needs to load with the component preloaded in the resource preloading unit. If the match is unsuccessful, the model is optimized using a genetic algorithm based on the data in the component loading system data set and the data obtained by the resource preloading unit to obtain an optimized model, which is deployed for user behavior analysis;

[0049] If the match is successful, the component preloading in the resource preloading unit is used to complete the component preloading.

[0050] Furthermore, the present invention provides a dynamic component loading system based on the React framework, and a component loading optimization unit, comprising:

[0051] When the matching fails, the component loading optimization unit optimizes the existing model using a genetic algorithm based on the data in the component loading system data set and the data obtained by the resource preloading unit;

[0052] Define the fitness function, randomly generate a set of model parameter configurations, each configuration represents an individual in the genetic algorithm, train the model using the parameter configurations in the initial population, and evaluate its performance through the fitness function. Select excellent individuals based on the fitness value, and perform hybridization operations to generate new parameter configurations.

[0053] Repeat the training, evaluation and genetic operations. If the preset number of iterations or fitness threshold is reached, the optimization of the genetic algorithm is completed.

[0054] After optimization by the genetic algorithm, an optimized model is obtained, which is deployed in the production environment for real-time processing and analysis of user behavior data.

[0055] Beneficial effects of the present invention;

[0056] Improve page loading speed: Through dynamic component loading and preloading mechanisms, unnecessary HTTP requests and component loading time are reduced, significantly improving the initial loading speed and response speed of the page. This is of great significance for improving user experience and enhancing user stickiness.

[0057] Optimize system performance: The cache management unit reduces the burden on the server and improves data access efficiency by pre-caching frequently accessed data, thereby optimizing the overall performance of the system. This is especially important for handling large-scale concurrent requests and coping with high-load scenarios.

[0058] Enhanced user experience: Real-time user behavior analysis allows the system to make intelligent predictions and preloads based on users’ actual usage habits and needs, allowing users to access the components and information they need more quickly, thereby improving the user experience.

[0059] Improve resource utilization: Through the simulation and optimization of multiple loading strategies in the component management unit, as well as the continuous optimization and iteration of the model, the system can more efficiently utilize computing resources and network resources, avoiding waste of resources.

[0060] Flexibility and scalability: The system is built on the React framework, making full use of the React ecosystem and tool set, allowing developers to easily develop and maintain components. At the same time, the loose coupling design between the various units of the system also facilitates subsequent functional expansion and upgrades.

[0061] Intelligent decision support: By using advanced data analysis and optimization techniques such as genetic algorithms, the system can make more intelligent and accurate decisions based on large amounts of data, further improving system performance and user experience.

[0062] To sum up, this invention effectively solves the problems of low efficiency, long page loading time, and poor user experience in traditional component loading methods through a dynamic component loading system based on the React framework, significantly improves the performance and user experience of Web front-end applications, and has important practical application value and promotion significance. BRIEF DESCRIPTION OF THE DRAWINGS

[0063] In order to more clearly illustrate the technical solution of the present invention, the following briefly introduces the drawings required for use in the embodiments. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0064] Figure 1 A schematic diagram of a system architecture provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0065] In order to make the purpose, technical solution and advantages of the present invention clearer, the technical solution of the present invention will be clearly and completely described in conjunction with the specific embodiments of the present invention and the corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention. The technical solutions provided by the embodiments of the present invention are described in detail below in conjunction with the drawings.

[0066] In order to better understand the purpose of the present invention, the present invention is described in further detail below.

[0067] The present invention provides a dynamic component loading system based on a React framework, comprising: a server end, a user end and a background control end, the server end establishes a communication connection with the user end and the background control end, the server end, the user end and the background control end generate interactive data during the data flow process, the server end analyzes the interactive data, and performs pre-loading and pre-caching of components;

[0068] The data acquisition unit acquires component metadata, resource file data, configuration data, operation data error data and status information, stores the acquired data in the database, and obtains a data set of the component loading system;

[0069] The data acquisition unit collects data from multiple channels, including but not limited to component metadata, resource file data, configuration data, operation data, error data, and status information.

[0070] Component metadata includes component identification information (such as identifier, name, version) and dependencies, which are used to accurately locate and identify components and their dependencies during dynamic loading.

[0071] Resource file data includes resource files required by dynamic components such as JavaScript code, CSS style sheets, voice files, images, and videos.

[0072] Configuration data includes environment variables and user preferences, which are used to dynamically adjust component behavior based on different environments and user preferences.

[0073] Runtime data records API responses and cache status to provide a basis for performance analysis and optimization.

[0074] Error data records information such as network request failures and data format errors for troubleshooting and error handling.

[0075] Status information reflects the loading status of components and helps monitor system health and user experience.

[0076] Data processing: After collecting these data, the data acquisition unit performs necessary preprocessing and cleaning to ensure the quality and consistency of the data.

[0077] The preprocessing steps may include data formatting, deduplication, outlier processing, etc. The processed data is stored in the database to form a component loading system data set for other units to call and analyze.

[0078] The data acquisition unit provides rich data support for the entire system, enabling other units to make more accurate and intelligent decisions based on this data. For example, the resource preloading unit needs user interaction data to predict user behavior, the cache management unit needs access frequency data to determine the cache strategy, and the component loading optimization unit needs various operating data and user feedback to optimize the loading model.

[0079] By collecting operation data and error data, the data acquisition unit helps the server monitor the performance and stability of the application in real time. When performance bottlenecks or error anomalies are found, the server can take timely measures to optimize and adjust.

[0080] The data provided by the data acquisition unit is an important basis for the server to make decision support. By analyzing these data, the server can understand the user's usage habits and demand changes, and adjust the strategy to adapt to market changes.

[0081] The data acquisition unit helps the server to promptly discover and resolve performance issues through real-time monitoring and data analysis, thereby improving the response speed and stability of the entire system.

[0082] Based on rich user interaction data and user preference settings, the data acquisition unit supports the server to provide more personalized and accurate component loading and service experience, thereby improving user satisfaction and stickiness.

[0083] The data acquisition unit provides powerful data support capabilities for the server side, enabling the server side to make more intelligent and accurate decisions based on large amounts of data to cope with complex and changing market environments.

[0084] A front-end component management unit receives component requirement information, matches corresponding components in a preset knowledge base according to the component requirement information, obtains knowledge base component matching results, the knowledge base component matching results include components that need to be loaded corresponding to the component requirement information, obtains the front-end component management unit configuration and architecture information, establishes a mirror front-end component management unit, and establishes a mirror front-end component management unit including a first front-end component simulation management unit, a second front-end component simulation management unit, and a third front-end component simulation management unit. The knowledge base component matching results are sequentially loaded into the first front-end component simulation management unit, the second front-end component simulation management unit, and the third front-end component simulation management unit, and the speeds of loading the knowledge base component matching of the first front-end component simulation management unit, the second front-end component simulation management unit, and the third front-end component simulation management unit are compared to obtain a front-end component simulation management unit loading speed comparison result, and the component loading configuration of the front-end component simulation management unit ranked first in the front-end component simulation management unit loading speed comparison result is extracted as the real-time component loading configuration;

[0085] The front-end component management unit receives component requirement information from the user end, and the requirement information includes components explicitly requested by the user. After receiving the requirement information, the front-end component management unit matches the corresponding components in the preset knowledge base to obtain the knowledge base component matching result.

[0086] In order to optimize the component loading strategy, the front-end component management unit will establish multiple mirror front-end component management units, including the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit. The mirror units use different loading strategies to load components, so as to compare and select the optimal strategy later.

[0087] The knowledge base component matching results are loaded into each image front-end component management unit in turn, and the loading speed and performance indicators (such as loading time, resource consumption, etc.) of each unit are recorded. By comparing the loading speed and performance indicators of different units, the best loading configuration is extracted as the real-time component loading configuration.

[0088] For large components, the front-end component management unit will use code splitting technology to split them into multiple small blocks and dynamically load these blocks as needed. The loading process is prioritized according to the importance of the component and the urgency of user needs to ensure that key components can be loaded first.

[0089] By establishing multiple mirrored front-end component management units and comparing their loading speeds and performance indicators, the front-end component management unit can find the optimal component loading strategy to improve component loading efficiency. Fast component loading speed can significantly improve user experience, reduce user waiting time, and increase user satisfaction and stickiness.

[0090] The front-end component management unit works closely with the resource preloading unit to support component preloading based on user behavior prediction. This enables the system to load components that users are likely to access in advance, further improving the user experience.

[0091] By optimizing component loading strategies and using code splitting technology, the front-end component management unit significantly improves component loading efficiency and reduces user waiting time.

[0092] The fast component loading speed and intelligent predictive preloading function significantly improve the user experience and increase user satisfaction and loyalty.

[0093] Efficient component loading strategies reduce the burden on the server, reduce network latency and resource consumption, and thus enhance the performance and stability of the entire system.

[0094] The resource preloading unit obtains user interaction data, user preference data, performance data, device and environment data, user feedback data, and business-related data, preprocesses the data obtained by the resource preloading unit, trains the model with the preprocessed data, and deploys the trained model to the production environment. The model processes the data obtained by the resource preloading unit in real time and outputs real-time user behavior analysis results. The user behavior analysis results include preloaded component information. According to the preloaded component information, the resource preloading unit completes component preloading;

[0095] The resource preloading unit collects user interaction data, user preference data, performance data, device and environment data, user feedback data, and business-related data from multiple channels. The data is preprocessed, including data cleaning, format conversion, feature extraction, and other steps, for subsequent analysis.

[0096] Select an appropriate machine learning model (such as logistic regression) for user behavior analysis. Use the preprocessed data as a training set to train the model to learn the correlation between user behavior and resource access.

[0097] Deploy the trained model to the production environment and receive and process data from the user in real time.

[0098] The model outputs real-time user behavior analysis results, including information about components that users are likely to visit.

[0099] According to the preloaded component information output by the model, the resource preloading unit loads these components and their dependent resource files (such as JavaScript code, CSS style sheets, pictures, etc.) from the server in advance.

[0100] Store preloaded components in the client cache so they respond quickly when users actually access them.

[0101] By preloading components that users are likely to access soon, the resource preloading unit significantly reduces the waiting time when users actually access these components.

[0102] Fast response speed and smooth interactive experience improve users' overall satisfaction and loyalty to the application. The preloading strategy based on user behavior analysis enables the system to allocate resources more reasonably and prioritize the loading of components that users are most likely to access, thereby improving resource utilization.

[0103] The resource preloading unit significantly shortens the overall page loading time by loading key components and resource files in advance. Fast component loading speed enables the application to respond to user operation requests more quickly, improving the responsiveness and interactivity of the application. Optimized resource allocation and loading strategies reduce the burden on the server, reduce network latency and resource consumption, and thus improve the performance and stability of the entire system.

[0104] The cache management unit retrieves the user interaction data in the resource preloading unit and the component loading system data set in the data acquisition unit, performs cluster analysis on the user interaction data, the cluster analysis result includes the data access frequency clustering result, sets the top 35% of the data in the data access frequency clustering result as pre-cached data, and the cache management unit caches the pre-cached data;

[0105] The component loading optimization unit parses the component requirement information received in the front-end component management unit to obtain the component information that the user needs to load. The component information that the user needs to load is matched with the components that have completed component preloading in the resource preloading unit. If the match is unsuccessful, the model is optimized using a genetic algorithm based on the data in the component loading system data set and the data obtained by the resource preloading unit to obtain an optimized model. The optimized model is deployed and used to analyze user behavior.

[0106] Data preparation and preprocessing: Collect component metadata, resource file data, configuration data, operation data, error data, and status information from the component loading system data set.

[0107] User interaction data, user preference data, performance data, device and environment data, user feedback data, and business-related data are obtained from the resource preloading unit, and these data are preprocessed, including data cleaning, formatting, feature extraction, etc., for subsequent genetic algorithm processing.

[0108] Define the fitness function: The fitness function is the key to evaluating the quality of individuals in the genetic algorithm. In the present invention, the fitness function can be designed based on the matching degree between the model prediction of the component that the user is about to access and the actual user behavior.

[0109] The fitness function can also consider multiple factors such as component loading efficiency, user satisfaction, system resource consumption, etc. to comprehensively evaluate the performance of the model.

[0110] Initialize the population: Based on the current model parameters and possible parameter space, randomly generate a set of initial model parameter configurations as the initial population of the genetic algorithm. Each individual represents a specific set of model parameter configurations that will be used to generate a model to predict user behavior.

[0111] Model training and evaluation: Use each individual in the initial population (i.e. each set of model parameters) to train the model and evaluate the model. The evaluation process involves applying the model to the preprocessed data, observing the model's performance in predicting user behavior, and calculating the fitness value of each individual based on the fitness function.

[0112] Selection operation: According to the fitness value of the individual, a part of the individuals with better performance are selected as the parents of the next generation. Common selection methods include roulette selection, tournament selection, etc. These methods tend to select individuals with higher fitness.

[0113] Crossover (hybridization) operation: Perform a crossover operation between the selected parent individuals to exchange some of their genetic information (i.e., part of the model parameters). The crossover operation helps to generate new individuals with the good characteristics of both parents and increase the diversity of the population.

[0114] Mutation operation: mutate certain genetic information (model parameters) in the new individuals generated after the crossover operation with a certain probability. The mutation operation introduces new genetic information by randomly changing the values ​​of model parameters, which helps to jump out of the local optimal solution and explore a wider solution space.

[0115] Generate a new population: The new individuals generated by selection, crossover and mutation operations will replace some individuals in the current population to form a new generation of population. Repeat the model training, evaluation, selection, crossover and mutation operations until the stopping condition is met (such as reaching the maximum number of iterations, fitness reaching the preset threshold, etc.).

[0116] Optimized model selection and deployment: During the multi-generation evolution process, the genetic algorithm will gradually converge to a better model parameter configuration. The individuals with the highest fitness in the final generation are selected as the optimized model parameter configuration. The model is retrained using this set of optimized model parameters and deployed to the production environment.

[0117] Real-time user behavior analysis and component preloading: The deployed optimization model will receive user behavior data from the resource preloading unit in real time. By analyzing this data, the model predicts the components that users may need in the future and guides the resource preloading unit to load these components in advance, thereby improving the application's response speed and user experience.

[0118] The genetic algorithm effectively utilizes the component loading system data set and the data acquired by the resource preloading unit to optimize the prediction model in the scenario based on the present invention, thereby achieving more accurate user behavior prediction and more efficient component loading strategy.

[0119] Specifically, the dynamic component loading system based on the React framework provided by the present invention, the data acquisition unit, includes:

[0120] Component metadata includes component identification information and component dependencies. Component identification information includes identifier, name, and version. Component identification information is used to accurately locate and identify components during dynamic loading. Component dependencies are used to express the relationship between a component and other components or libraries.

[0121] Resource file data includes JavaScript code of dynamic components, CSS style sheets, voice files, pictures, and videos;

[0122] Configuration data includes environment variables and user preferences. Environment variables include different configuration data loaded by each component. User preferences include dynamically adjusting the behavior or style of components according to user preferences.

[0123] Operational data includes API response data and cache data;

[0124] Error data includes network request failure and data format error, and status information includes component loading status.

[0125] Specifically, the dynamic component loading system based on the React framework provided by the present invention, the front-end component management unit, includes:

[0126] The first front-end component simulates the management unit loading method:

[0127] After receiving the knowledge base component matching result, the first front-end component simulation management unit loads the component in a synchronous manner, and other parts of the page will not continue to render or execute before the component loading is completed;

[0128] During the loading process, no cache mechanism is used to simulate the experience of first-time users;

[0129] Record various performance indicators during the loading process, including loading time, resource consumption, etc., for subsequent analysis and comparison;

[0130] The second front-end component simulates the management unit loading method:

[0131] After receiving the knowledge base component matching result, the component is loaded asynchronously. Before the component loading is completed, other parts of the page are allowed to continue rendering and executing during the component loading period. When the component enters the viewport or meets specific conditions, the component loading process is triggered. During the component loading process, the cache management unit cache is used to reduce component network requests and component loading time.

[0132] The third front-end component simulates the management unit loading method:

[0133] Based on the user behavior analysis result obtained by the resource preloading unit, the third front-end component simulation management unit preloads the components that the user may access soon;

[0134] Use code splitting techniques to split large components into chunks and dynamically load those chunks as needed, prioritizing the loading process based on the importance of the components and the urgency of the user's needs.

[0135] Specifically, the dynamic component loading system based on the React framework provided by the present invention, the front-end component management unit, also includes:

[0136] Configure the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit with the same network environment, and send the same component requirement information to the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit respectively;

[0137] Record the total time for each simulation management unit from receiving component requirement information to completing component loading;

[0138] Collecting performance indicators of the first front-end component simulation management unit, the second front-end component simulation management unit, and the third front-end component simulation management unit during component loading, wherein the performance indicators during component loading include network request time, resource processing time, and rendering time;

[0139] According to the comparison results, the simulation management unit with poor performance is optimized, and the steps in the front-end component management unit are repeated until the front-end component simulation management unit is set to the optimal component loading configuration.

[0140] Specifically, the present invention provides a dynamic component loading system based on the React framework, a resource preloading unit, including:

[0141] Select logistic regression as the training model, use the preprocessed data as the training set to train the model, and deploy the trained model to the production environment;

[0142] After the trained model is deployed to the production environment, the trained model is tested. During the test, the computing resources and storage capacity are detected. If the computing resources and storage capacity are lower than the preset stable values, a warning message indicating insufficient space for model operation is generated.

[0143] Specifically, the dynamic component loading system based on the React framework provided by the present invention, the cache management unit, includes:

[0144] Retrieve user interaction data from the resource preloading unit, retrieve component loading system data set from the data acquisition unit, preprocess the data, and obtain different data clusters through clustering algorithms;

[0145] Analyze each data cluster, calculate the frequency of data access, and sort the clustering results according to the frequency of data access;

[0146] The top 35% of the data clusters are selected and identified as the frequently accessed data, and the frequently accessed data are set as the pre-cached data;

[0147] When a user requests data, the cache management unit first checks whether the data exists in the pre-cached data;

[0148] If it exists, the data is returned to the user directly from the cache, and the pre-cached data is updated regularly.

[0149] Specifically, the present invention provides a dynamic component loading system based on the React framework, and a component loading optimization unit, including:

[0150] The component loading optimization unit parses the component demand information received in the front-end component management unit to obtain the component information that the user needs to load, and matches the component information that the user needs to load with the component preloaded in the resource preloading unit. If the match is unsuccessful, the model is optimized using a genetic algorithm based on the data in the component loading system data set and the data obtained by the resource preloading unit to obtain an optimized model, which is deployed for user behavior analysis;

[0151] If the match is successful, the component preloading in the resource preloading unit is used;

[0152] When the matching fails, the component loading optimization unit optimizes the existing model using a genetic algorithm based on the data in the component loading system data set and the data obtained by the resource preloading unit;

[0153] Define the fitness function, randomly generate a set of model parameter configurations, each configuration represents an individual in the genetic algorithm, train the model using the parameter configurations in the initial population, and evaluate its performance through the fitness function. Select excellent individuals based on the fitness value, and perform hybridization operations to generate new parameter configurations.

[0154] Repeat the training, evaluation and genetic operations. If the preset number of iterations or fitness threshold is reached, the optimization of the genetic algorithm is completed.

[0155] After optimization by the genetic algorithm, an optimized model is obtained, which is deployed in the production environment for real-time processing and analysis of user behavior data.

[0156] After deployment, the optimization model will receive and process user behavior data from the resource preloading unit in real time. By analyzing this data, the model can predict the components that users may need in the future and preload them in advance.

[0157] The present invention solves the problems of low efficiency, long page loading time and poor user experience caused by excessive HTTP requests and large resource file size in traditional component loading methods through the following key technologies and methods:

[0158] Dynamic component loading and preloading: The present invention realizes on-demand loading of components, reduces the amount of resources that need to be downloaded during initial loading, and improves the response speed of the application.

[0159] The resource preloading unit analyzes user behavior data, predicts components that users are likely to access, and preloads them in advance. When users actually need these components, the components have already been loaded to the client, thus reducing the user's waiting time.

[0160] Component caching mechanism: The cache management unit analyzes user interaction data to identify frequently accessed data and sets it as pre-cached data. When the user requests this data again, it can be directly obtained from the cache, reducing the burden on the server and network latency. This caching mechanism applies not only to the component itself, but also to the resource files that the component depends on, such as JavaScript code, CSS style sheets, etc., further improving loading efficiency.

[0161] Component loading strategy optimization: The front-end component management unit establishes a mirrored front-end component management unit, including multiple loading strategies such as synchronous loading, asynchronous loading, and preloading based on user behavior prediction, and compares and optimizes the strategies to find the best component loading configuration.

[0162] The component loading optimization unit uses genetic algorithms to optimize existing models and continuously adjusts component loading strategies based on a large amount of user behavior data to adapt to the usage habits and scenario requirements of different users.

[0163] Code splitting and resource optimization: For large components, use code splitting technology to split them into multiple small chunks and dynamically load these chunks as needed to further reduce the initial loading time and improve the responsiveness of the application.

[0164] Optimize resource files, such as compressing JavaScript code, optimizing images and video resources, etc., to reduce the size of resource files and shorten download time.

[0165] Real-time user behavior analysis: By analyzing user behavior data in real time, the model can predict the components that users may need in the future and preload them in advance. This intelligent decision support mechanism enables the system to meet user needs more accurately and improve user experience.

[0166] In summary, the present invention effectively solves the problem of inefficiency of traditional component loading methods caused by excessive HTTP requests and large resource file size through various technologies and methods such as dynamic component loading, component caching, loading strategy optimization, code segmentation and resource optimization, and real-time user behavior analysis, and significantly improves page loading speed and user experience.

[0167] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations, and the above-described embodiments of the present invention do not constitute a limitation on the scope of protection of the present invention.

Claims

1. A dynamic component loading system based on the React framework, characterized in that: include: The server, the user and the backend control end establish communication connections with the server, the user and the backend control end, and the server, the user and the backend control end generate interactive data during the data flow process. The server analyzes the interactive data and pre-loads and pre-caches the components. The data acquisition unit acquires component metadata, resource file data, configuration data, operation data error data and status information, stores the acquired data in the database, and obtains a data set of the component loading system; The front-end component management unit receives component requirement information, matches corresponding components in a preset knowledge base according to the component requirement information, obtains knowledge base component matching results, performs data analysis on the knowledge base component matching results, and obtains real-time component loading configuration; The resource preloading unit obtains user interaction data, user preference data, performance data, device and environment data, user feedback data, and business-related data, preprocesses the data obtained by the resource preloading unit, trains the model with the preprocessed data, and deploys the trained model to the production environment. The model processes the data obtained by the resource preloading unit in real time and outputs real-time user behavior analysis results. The user behavior analysis results include preloaded component information. According to the preloaded component information, the resource preloading unit completes component preloading; The cache management unit retrieves the user interaction data in the resource preloading unit and the component loading system data set in the data acquisition unit, performs cluster analysis on the user interaction data, the cluster analysis result includes the data access frequency clustering result, sets the top 35% of the data in the data access frequency clustering result as pre-cached data, and the cache management unit caches the pre-cached data; The component loading optimization unit parses the component requirement information received in the front-end component management unit to obtain the component information that the user needs to load. The component information that the user needs to load is matched with the components that have completed component preloading in the resource preloading unit. If the match is unsuccessful, the model is optimized using a genetic algorithm based on the data in the component loading system data set and the data obtained by the resource preloading unit to obtain an optimized model. The optimized model is deployed and used to analyze user behavior.

2. The dynamic component loading system based on the React framework as claimed in claim 1, characterized in that: The data acquisition unit comprises: Component metadata includes component identification information and component dependencies. Component identification information includes identifier, name, and version. Component identification information is used to accurately locate and identify components during dynamic loading. Component dependencies are used to express the relationship between a component and other components or libraries. Resource file data includes JavaScript code of dynamic components, CSS style sheets, voice files, pictures, and videos; Configuration data includes environment variables and user preferences. Environment variables include different configuration data loaded by each component. User preferences include dynamically adjusting the behavior or style of components according to user preferences. Operational data includes API response data and cache data; Error data includes network request failure and data format error, and status information includes component loading status.

3. The dynamic component loading system based on the React framework as claimed in claim 1, characterized in that: Front-end component management unit, including: The specific steps for data analysis of the knowledge base component matching results are as follows: the knowledge base component matching results include the components that need to be loaded corresponding to the component requirement information, obtaining the front-end component management unit configuration and architecture information, establishing a mirror front-end component management unit, establishing a mirror front-end component management unit including a first front-end component simulation management unit, a second front-end component simulation management unit and a third front-end component simulation management unit, and the knowledge base component matching results are sequentially loaded into the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit.

4. The dynamic component loading system based on the React framework as described in claim 3, characterized in that: Front-end component management unit, including: Monitor the speed of loading knowledge base component matching by the first front-end component simulation management unit, the second front-end component simulation management unit, and the third front-end component simulation management unit; Compare the speeds of loading the knowledge base component matching of the first front-end component simulation management unit, the second front-end component simulation management unit, and the third front-end component simulation management unit to obtain a comparison result of the loading speeds of the front-end component simulation management units; The component loading configuration of the front-end component simulation management unit ranked first in the front-end component simulation management unit loading speed comparison result is extracted as the real-time component loading configuration.

5. The dynamic component loading system based on the React framework as described in claim 4, characterized in that: Front-end component management unit, including: The first front-end component simulates the management unit loading method: After receiving the knowledge base component matching result, the first front-end component simulation management unit loads the component in a synchronous manner, and other parts of the page will not continue to render or execute before the component loading is completed; During the loading process, no cache mechanism is used to simulate the experience of first-time users; Record various performance indicators during the loading process, including loading time, resource consumption, etc., for subsequent analysis and comparison; The second front-end component simulates the management unit loading method: After receiving the knowledge base component matching result, the component is loaded asynchronously. Before the component loading is completed, other parts of the page are allowed to continue rendering and executing during the component loading period. When the component enters the viewport or meets specific conditions, the component loading process is triggered. During the component loading process, the cache management unit cache is used to reduce component network requests and component loading time. The third front-end component simulates the management unit loading method: Based on the user behavior analysis result obtained by the resource preloading unit, the third front-end component simulation management unit preloads the components that the user may access soon; Use code splitting techniques to split large components into chunks and dynamically load those chunks as needed, prioritizing the loading process based on the importance of the components and the urgency of the user's needs.

6. The dynamic component loading system based on the React framework as claimed in claim 1, characterized in that: The front-end component management unit also includes: Configure the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit with the same network environment, and send the same component requirement information to the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit respectively; Record the total time for each simulation management unit from receiving component requirement information to completing component loading; The performance indicators of the first front-end component simulation management unit, the second front-end component simulation management unit and the third front-end component simulation management unit in the process of loading components are collected. The performance indicators in the process of loading components include network request time, resource processing time and rendering time.

7. The dynamic component loading system based on the React framework as claimed in claim 1, characterized in that: Resource preloading unit, including: Select logistic regression as the training model, use the preprocessed data as the training set to train the model, and deploy the trained model to the production environment; After the trained model is deployed to the production environment, the trained model is tested. During the test, the computing resources and storage capacity are detected. If the computing resources and storage capacity are lower than the preset stable values, a warning message indicating insufficient space for model operation is generated.

8. The dynamic component loading system based on the React framework as claimed in claim 1, characterized in that: Cache management unit, including: Retrieve user interaction data from the resource preloading unit, retrieve component loading system data set from the data acquisition unit, preprocess the data, and obtain different data clusters through clustering algorithms; Analyze each data cluster, calculate the frequency of data access, and sort the clustering results according to the frequency of data access; The top 35% of the data clusters are selected and identified as the frequently accessed data, and the frequently accessed data are set as the pre-cached data; When a user requests data, the cache management unit first checks whether the data exists in the pre-cached data; If it exists, the data is returned to the user directly from the cache, and the pre-cached data is updated regularly.

9. The dynamic component loading system based on the React framework as claimed in claim 1, characterized in that: Component loading optimization unit, including: The component loading optimization unit parses the component demand information received in the front-end component management unit to obtain the component information that the user needs to load, and matches the component information that the user needs to load with the component preloaded in the resource preloading unit. If the match is unsuccessful, the model is optimized using a genetic algorithm based on the data in the component loading system data set and the data obtained by the resource preloading unit to obtain an optimized model, which is deployed for user behavior analysis; If the match is successful, the component preloading in the resource preloading unit is used to complete the component preloading.

10. The dynamic component loading system based on the React framework as claimed in claim 1, characterized in that: Component loading optimization unit, including: When the matching fails, the component loading optimization unit optimizes the existing model using a genetic algorithm based on the data in the component loading system data set and the data obtained by the resource preloading unit; Define the fitness function, randomly generate a set of model parameter configurations, each configuration represents an individual in the genetic algorithm, train the model using the parameter configurations in the initial population, and evaluate its performance through the fitness function. Select excellent individuals based on the fitness value, and perform hybridization operations to generate new parameter configurations. Repeat the training, evaluation and genetic operations. If the preset number of iterations or fitness threshold is reached, the optimization of the genetic algorithm is completed. After optimization by the genetic algorithm, an optimized model is obtained, which is deployed in the production environment for real-time processing and analysis of user behavior data.

Images