A method for implementing dynamic import and execution of components in a React framework

Abstract

The present invention discloses a method for dynamically importing and executing components in a React framework, which solves the technical problems of slow loading speed and time-consuming compilation and release of existing web applications. The present invention includes js code based on dynamically imported components, exports a render function, the return value of the render function is jsx code for describing component node information, and adds a deps attribute to the static property of the render function; uses Babel to compile the jsx code to obtain a component code block; uploads the component code block to a static resource server; obtains the component code block in the static resource server, parses the deps attribute of the component code block to obtain a jsx component and renders it. The present invention only needs to modify the code of a single component, and the container does not need to be compiled and packaged. Compared with packaging the code of the entire component library, the editing and packaging time of a single component is reduced, and the development efficiency can be improved.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end development, and particularly relates to a method for dynamically importing and executing components in a react framework. Background Art

[0002] With the development of computer technology, visual experience is increasingly emphasized in software interface design. A large number of UI component libraries have emerged in the field of web front-end development. These component libraries generally provide common components such as forms, buttons, tables, and charts. In the react framework, these components are all html components generated based on the execution of js code. The more complex the component, the more js code is required to implement it, which will result in very bloated js code after packaging, slower component loading, and unfriendly user experience. Moreover, as the software iteration speed continues to increase, the code modification frequency will gradually increase, and the compilation and packaging of the component library will also consume a lot of time. Therefore, it is necessary to implement a method for dynamically importing and executing components, which can not only accelerate the loading speed of web applications, but also save the time for compiling and releasing functions every time. Summary of the Invention

[0003] The present invention provides a method for dynamically importing and executing components in a react framework, which solves the technical problems of slow loading speed and time-consuming compilation and release of existing web applications.

[0004] To achieve the above object, the technical solution adopted by the present invention is as follows:

[0005] A method for dynamically importing and executing components in a react framework, comprising the following steps:

[0006] S1. Based on the js code of the dynamically imported component, export a render function, the return value of the render function is jsx code for describing component node information, and add a deps attribute to the static property of the render function, and the deps attribute is used to describe the component packages externally dependent on the component;

[0007] S2. Compile the jsx code using babel to obtain a component code block;

[0008] S3. Upload the component code block to a static resource server;

[0009] S4. Obtain the component code block in the static resource server, parse the deps attribute of the component code block to obtain a jsx component and render it.

[0010] Further, in S1, the deps attribute is a mapping structure. The key value of the mapping structure is the name of the component package, and the value value is the cdn address of the corresponding component package. The cdn address is used to store the js code of the corresponding component package.

[0011] Further, the component package is in umd format.

[0012] Further, S4 includes: S41. Obtain the component code block in the static resource server through an http request; S42. Create a proxy object; S43. Parse the deps attribute on the render function in the component code block, obtain the js code of the component package through the value value of the deps attribute, put the js code of the component package into the eval method to obtain the component package variable, update the value value of the deps attribute to the component package variable, and record the updated set of key / value values as the dependency mapping of a component package; S44. Repeat S43 to obtain the dependency mappings of all component packages; S45. The proxy object intercepts the dependency mappings and injects them into the get method of the proxy object; S46. Put each dependency mapping into the eval method to execute, obtain the corresponding jsx component and render it.

[0013] Further, S42 also includes setting a with keyword for accessing the content in the proxy object, specifically including: S421. Create an independent scope using an immediately-invoked function expression; S422. Use the with keyword in the function body of the immediately-invoked function expression so that the code in the function body can only access the content in the proxy object.

[0014] Further, in S2, the babel runtime library of babel is used to compile the jsx code into the execution code of the react framework, and the compiled execution code is recorded as the component code block.

[0015] Further, the compilation of the jsx code into the execution code of the react framework specifically includes: S21. Use the runtime library of Babel, and pass the jsx code to babel by calling the API of babel; S22. Babel parses and converts the jsx code into a React.createElement call, that is, the execution code of the react framework.

[0016] Further, S3 also includes verifying whether the component code block is uploaded successfully, specifically as follows: The static resource server provides the API for the current upload, uploads the component code block and records the md5 fingerprint of the currently uploaded component code; after the upload is completed, access the md5 fingerprint of the component code block through an http request and compare it with the recorded md5 fingerprint. If they are the same, it means that the component code block is uploaded successfully.

[0017] Further, use the upload function in the SDK to upload the component code block.

[0018] Compared with the prior art, the present invention has the following beneficial effects:

[0019] The present invention uses the static storage server address storing the component code block as a parameter, no longer relies on various heavy component libraries, divides the heavy component libraries into each dynamically imported component, and the volume of each component packaged will be much smaller. Based on the characteristics of modern browser multiplexing, the loading speed is improved.

[0020] When the component is modified, only the code of a single component needs to be modified, and the container does not need to be compiled and packaged. Compared with packaging the code of the entire component library, the editing and packaging time of a single component is reduced, and the development efficiency can be improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] Figure 1 It is the flowchart of the method of the present invention. DETAILED DESCRIPTION OF THE INVENTION

[0022] Term Explanation:

[0023] JS code is a programming language;

[0024] JSX code is a code unit encapsulating user interface logic and structure;

[0025] The deps attribute is a dependency array used to specify dependencies;

[0026] The CDN address is a way to quickly provide static resources through a global distributed server network;

[0027] Babel is a code compilation tool;

[0028] The eval method is a built-in method in JavaScript used to execute a string as code;

[0029] The get method is a request method in the HTTP protocol;

[0030] API is an application programming interface;

[0031] The MD5 fingerprint is usually a 32-bit hexadecimal string generated through a hashing algorithm;

[0032] The upload function in the SDK (Software Development Kit) is a code interface for uploading files or data to a specific service (such as a cloud storage service);

[0033] A web application is an application program built based on web technologies;

[0034] A TCP connection is a reliable, connection-oriented network communication mechanism established based on TCP (Transmission Control Protocol).

[0035] To make the objectives, technical solutions and advantages of the present invention clearer and more understandable, the present invention will be further described in detail below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all of the embodiments. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without any creative efforts shall fall within the scope of protection of the present invention.

[0036] As Figure 1 shown, a method for implementing dynamic import and execution of components in a react framework provided by the present invention includes the following steps:

[0037] S1. Based on the js code of the dynamically imported component, export a render function. The return value of the render function is jsx code for describing component node information. Add a deps attribute to the static property of the render function. The deps attribute is used to describe the component packages externally dependent on the component;

[0038] S2. Use babel to compile the jsx code to obtain a component code block;

[0039] S3. Upload the component code block to a static resource server;

[0040] S4. Obtain the component code block in the static resource server, parse the deps attribute of the component code block, and obtain and render the jsx component.

[0041] The present invention uploads the code blocks of individual components to a static resource server and dynamically loads these component code blocks when needed, thereby making full use of the multiplexing characteristics of modern browsers. Specifically, existing web applications usually request a large JavaScript file during initial loading, which contains all the functions and components of the application. This results in a long initial loading time and a poor user experience. In contrast, the present invention splits the component library of the entire application into multiple independent component code blocks and uploads these component code blocks to a static resource server (preferably a CDN server). When a certain component needs to be rendered, only the component code block corresponding to that component needs to be requested, rather than the entire component library. Each component code block only contains the necessary js code of the component and its deps property, and the deps property describes the cdn addresses of the external component packages on which the component depends. Therefore, the browser only needs to request these small files (component code blocks) as needed, instead of loading a huge file at once. Since modern browsers support multiplexing and can handle multiple requests simultaneously on the same TCP connection, multiple component code blocks can be loaded in parallel, greatly improving the loading speed. In addition, by storing the component code blocks on a static resource server, the present invention can utilize the caching mechanism of the server and the distributed network of the CDN to further accelerate the access speed of resources. In this way, when a user accesses different pages of a web application, only the component code blocks that are actually needed need to be downloaded, rather than repeatedly downloading the code that has already been loaded. This on-demand loading method not only speeds up the initial loading speed but also reduces the subsequent page loading time, enhancing the user experience.

[0042] Step S1 of the present invention is to define each dynamically imported component. Specifically, a render function is exported based on the js code of the component, and this function is used to define the attributes of the component, including the jsx code for describing the component node information and the component packages for describing the external dependencies of the component. Among them, the deps property is a map structure, the key value of the map structure is the name of the component package, and the value value is the cdn address of the corresponding component package. The cdn address is used to store the js code of the corresponding component package. Preferably, the component package is in umd format, and the umd format component package ensures that it can be used in all environments. The umd format is obtained by packing with the babel tool.

[0043] In the present invention, S2 is to compile jsx code. To achieve dynamic code compilation, the babel runtime library of babel (specifically @babel / standalone) is used to compile the jsx code into the execution code of the react framework, and the compiled execution code is denoted as the component code block. The babel runtime library is loaded through the cdn method to reduce the packaging volume. Then, the jsx code is compiled into code that can be executed by the react framework through the Babel.transform method.

[0044] The compilation of the jsx code into the execution code of the react framework specifically includes: S21. Use the runtime library of Babel to pass the jsx code to babel by calling the API of babel; S22. Babel parses and converts the jsx code into React.createElement calls, that is, the execution code of the react framework. After compilation, the generated code is called the component code block, which is valid JavaScript code that can be directly executed in the React environment. Finally, the compiled component code block will be stored as a variable for subsequent upload to the static resource server and dynamic import.

[0045] In the present invention, S3 is to upload the component code block to the static resource server. The static resource server preferably uses a CDN server, which is generally used for static resource hosting and accelerating resource access. Using the address of the static storage server storing the component code block as a parameter and no longer relying on various heavy component libraries will greatly reduce the page loading speed. If the component code block is put into production without successful upload, production accidents such as access failure and page white screen will occur. Therefore, it is also necessary to verify whether the component code block is uploaded successfully, as follows: The static resource server provides the API for the current upload, uploads the component code block and records the md5 fingerprint of the currently uploaded component code; after the upload is completed, access the md5 fingerprint of the component code block through an http request and compare it with the recorded md5 fingerprint. If they are the same, it means that the component code block is uploaded successfully. Preferably, use the upload function in the sdk to upload the component code block.

[0046] In the present invention, S4 is to parse the component code blocks in the static resource server to obtain jsx components and render them. Specifically, it includes: S41, obtaining the component code blocks in the static resource server through an http request; S42, creating a proxy object (Proxy), which can intercept operations of code to obtain and set variables; S43, parsing the deps attribute on the render function in the component code block, obtaining the js code of the component package through the value of the deps attribute. Since the js code of the component package is a string, putting the js code of the component package into the eval method to obtain the component package variables, updating the value of the deps attribute to the component package variables, and recording the updated set of key / value pairs as a dependency mapping of a component package; S44, repeating S43 to obtain the dependency mappings of all component packages; S45, the proxy object intercepts the dependency mappings and injects them into the get method of the proxy object; S46, putting each dependency mapping into the eval method for execution, specifically through the createElement function of the react framework for execution, to obtain the corresponding jsx components and render them.

[0047] S42 further includes setting a with keyword for accessing the content in the proxy object. Setting the with keyword for accessing the content in the proxy object actually means restricting the scope of the component code in a certain way so that it can only access the content of the proxy object. Using the with keyword can achieve this purpose, but directly using the with keyword in the component code is not the best practice because it may bring some side effects and performance issues. To ensure that the component code does not accidentally access other variables in the host environment while taking advantage of the characteristics of the with keyword to restrict the component code to only access the proxy object, it specifically includes: S421, creating an independent scope using an immediately-invoked function expression (IIFE); S422, using the with keyword within the function body of the immediately-invoked function expression so that the code within the function body can only access the content of the proxy object, thus avoiding accessing variables in the external scope.

[0048] The above method creates an independent scope through IIFE to ensure that the component code does not affect the host environment and is not polluted by the global variables of the host environment; using the with keyword ensures that the code within the function body of IIFE can only access the content of the proxy object, thereby improving the security and controllability of the code; although the with keyword may affect performance in some cases, restricting it within the function body of an IIFE can control this impact to a minimum. Through the above method, the goal that the component code can only access the content of the proxy object can be achieved more securely, while ensuring the efficiency and controllability of the dynamic import and rendering process of the component.

[0049] Finally, it should be noted that the above embodiments are only preferred embodiments of the present invention to illustrate the technical solutions of the present invention, rather than limiting it, and certainly not limiting the patent scope of the present invention; although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that they can still modify the technical solutions described in the foregoing embodiments, or perform equivalent replacements on some or all of the technical features; and these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the various embodiments of the present invention; that is to say, any meaningless changes or polishing made in the main design concept and spirit of the present invention, as long as the technical problems solved are still the same as those of the present invention, should be included in the protection scope of the present invention; in addition, directly or indirectly applying the technical solutions of the present invention to other related technical fields shall also be included in the patent protection scope of the present invention by the same token.

Claims

1. A method for implementing dynamic import and execution of components in a react framework, characterized in that, It includes the following steps: S1. Export a render function based on the js code of the dynamically imported component. The return value of the render function is the jsx code used to describe the component node information. Add a deps attribute to the static property of the render function. The deps attribute is used to describe the component packages externally dependent on the component; S2. Compile the jsx code using babel to obtain the component code block; S3. Upload the component code block to the static resource server; S4. Obtain the component code block in the static resource server, parse the deps attribute of the component code block to obtain the jsx component and render it; In S1, the deps attribute is a mapping structure. The key value of the mapping structure is the name of the component package, and the value is the cdn address of the corresponding component package. The cdn address is used to store the js code of the corresponding component package; S4 includes: S41. Obtain the component code block in the static resource server through an http request; S42. Create a proxy object; S43. Parse the deps attribute on the render function in the component code block, obtain the js code of the component package through the value of the deps attribute, put the js code of the component package into the eval method to obtain the component package variable, update the value of the deps attribute to the component package variable, and record the updated set of key / value pairs as the dependency mapping of a component package; S44. Repeat S43 to obtain the dependency mappings of all component packages; S45. The proxy object intercepts the dependency mappings and injects them into the get method of the proxy object; S46. Put each dependency mapping into the eval method to execute, obtain the corresponding jsx component and render it.

2. The method for implementing dynamic import and execution of components in a react framework according to claim 1, wherein The component package is in umd format.

3. The method for implementing dynamic import and execution of components in a react framework according to claim 1, wherein, S42 also includes setting a with keyword for accessing the content in the proxy object, specifically including: S421. Create an independent scope using an immediately invoked function expression; S422. Use the with keyword in the function body of the immediately invoked function expression so that the code in the function body can only access the content in the proxy object.

4. A method for implementing dynamic import and execution of components in a react framework according to claim 1, characterized in that, In S2, use the babel runtime library of babel to compile the jsx code into the execution code of the react framework, and record the compiled execution code as the component code block.

5. The method for implementing dynamic import and execution of components in a react framework according to claim 4, wherein, The specific process of compiling the jsx code into the execution code of the react framework includes: S21. Use the runtime library of Babel, and pass the jsx code to babel by calling the API of babel; S22. Babel parses and converts the jsx code into a React.createElement call, that is, the execution code of the react framework.

6. A method for implementing dynamic import and execution of components in a react framework according to claim 1, characterized in that, The S3 also includes verifying whether the component code block is uploaded successfully, specifically as follows: The static resource server provides the API for the current upload, uploads the component code block and records the md5 fingerprint of the currently uploaded component code; after the upload is completed, access the md5 fingerprint of the component code block through an http request and compare it with the recorded md5 fingerprint. If they are the same, it means that the component code block is uploaded successfully.

7. A method for implementing dynamic import and execution of components in a React framework according to claim 5, characterized in that, Use the upload function in the sdk to upload the component code block.

Images