Method for realizing component dynamic import execution in react framework

Abstract

The invention discloses a method for realizing dynamic import and execution of components in a react framework, and solves the technical problems of low loading speed and time consumption in compiling and publishing of the existing web application. The method comprises the steps that a render function is exported based on a js code of a dynamic import component, a return value of the render function is a jsx code used for describing component node information, and a deps attribute is added to a static attribute of the render function; compiling the jsx code by adopting a abel to obtain a component code block; uploading the component code block to a static resource server; and obtaining a component code block in the static resource server, analyzing the deps attribute of the component code block to obtain a jsx component, and rendering the jsx component. Only the codes of the single component need to be modified, the container does not need to be compiled and packaged, compared with packaging of the codes of the whole component library, editing and packaging time of the single component is shortened, and development efficiency can be improved.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end development, and in particular to a method for implementing dynamic import execution of components in a react framework. Background Art

[0002] With the development of computer technology, software interface design pays more and more attention to visual experience. A large number of UI component libraries have emerged in the field of web front-end development. These component libraries generally provide commonly used components such as forms, buttons, tables, and charts. In the react framework, these components are all HTML components generated based on js code execution. The more complex the component, the more js code is required to implement it, which will cause the packaged js code to be very bloated, slow component loading, and unfriendly user experience. As the software iteration speed continues to accelerate, the frequency of code modification will gradually increase, and the compilation and packaging of component libraries will also take a lot of time. Therefore, it is necessary to implement a method for dynamically importing and executing components, which can not only speed up the loading speed of web applications, but also save the time of compiling and publishing each time a function is released. Summary of the invention

[0003] The present invention provides a method for implementing dynamic import and execution of components in a react framework, which solves the technical problems of slow loading speed and time-consuming compilation and publishing of existing web applications.

[0004] To achieve the above purpose, the technical solution adopted by the present invention is as follows: A method for implementing dynamic component import execution in a react framework includes the following steps: S1. Based on the js code of the dynamically imported component, a render function is exported. The return value of the render function is the jsx code used to describe the component node information. A deps attribute is added to the static attribute of the render function. The deps attribute is used to describe the component package that the component depends on externally. S2. Use babel to compile the jsx code to obtain the component code block; S3, upload the component code block to the static resource server; S4. Get the component code block in the static resource server, parse the deps attribute of the component code block, get the jsx component and render it.

[0005] Furthermore, 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, and the cdn address is used to store the js code of the corresponding component package.

[0006] Furthermore, the component package is in umd format.

[0007] Furthermore, the S4 includes: S41, obtaining the component code block in the static resource server through an http request; S42, creating a proxy object; 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, putting the js code of the component package into the eval method to obtain the component package variable, updating the value of the deps attribute to the component package variable, and recording the updated set of key / value values ​​as a dependency mapping of the component package; S44, repeating S43 to obtain the dependency mapping of all component packages; S45, the proxy object intercepts the dependency mapping and injects it into the get method of the proxy object; S46, putting each dependency mapping into the eval method for execution, obtaining the corresponding jsx component and rendering it.

[0008] Furthermore, the S42 also includes setting a with keyword for accessing the content in the proxy object, specifically including: S421, using an immediately called function expression to create an independent scope; S422, using the with keyword in the function body of the immediately called function expression so that the code in the function body can only access the content in the proxy object.

[0009] Furthermore, 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 a component code block.

[0010] Furthermore, the compiling of the jsx code into the execution code of the react framework specifically includes: S21, using the runtime library of Babel, passing the jsx code to babel by calling the babel API; S22, babel parses the jsx code and converts it into a React.createElement call, that is, the execution code of the react framework.

[0011] Furthermore, the S3 also includes verifying 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, the md5 fingerprint of the component code block is accessed through an http request and compared with the recorded md5 fingerprint. If they are consistent, it means that the component code block has been uploaded successfully.

[0012] Furthermore, use the upload function in the SDK to upload the component code block.

[0013] Compared with the prior art, the present invention has the following beneficial effects: The present invention uses the static storage server address of the storage component code block as a parameter, and no longer relies on various heavy component libraries. The heavy component library is subdivided into each dynamically imported component. The packaged volume of each component will be much smaller. Based on the multiplexing characteristics of modern browsers, the loading speed is improved.

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

[0015] Figure 1 The present invention is a flow chart of the method. DETAILED DESCRIPTION

[0016] Terminology explanation: js code is a programming language; JSX code is a code unit that encapsulates the logic and structure of the user interface; The deps attribute is a dependency array used to specify dependencies; CDN address is a way to quickly provide static resources through a global distributed server network; Babel is a code compilation tool; The eval method is a built-in method in JavaScript that is used to execute a string as code; The get method is a request method in the http protocol; API is an application programming interface; The md5 fingerprint is usually a 32-bit hexadecimal string generated by a hash algorithm; The upload function in the SDK (Software Development Kit) is a code interface used to upload files or data to a specific service (such as a cloud storage service); A web application is an application built on web technology; TCP connection is a reliable, connection-oriented network communication mechanism based on TCP (Transmission Control Protocol).

[0017] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0018] like Figure 1 As shown, the present invention provides a method for implementing dynamic component import execution in a react framework, comprising the following steps: S1. Based on the js code of the dynamically imported component, a render function is exported. The return value of the render function is the jsx code used to describe the component node information. A deps attribute is added to the static attribute of the render function. The deps attribute is used to describe the component package that the component depends on externally. S2. Use babel to compile the jsx code to obtain the component code block; S3, upload the component code block to the static resource server; S4. Get the component code block in the static resource server, parse the deps attribute of the component code block, get the jsx component and render it.

[0019] The present invention makes full use of the multiplexing characteristics of modern browsers by uploading the code blocks of a single component to a static resource server and dynamically loading these component code blocks when needed. Specifically, existing web applications usually request a huge JavaScript file at the initial loading time, which contains all the functions and components of the application, which will result in a long initial loading time and poor user experience. 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 component needs to be rendered, only the component code block corresponding to the 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 attribute, which describes the cdn address of the external component package on which the component depends. Therefore, the browser only needs to request these small files (component code blocks) as needed, without having to load a huge file at one time. Since modern browsers support multiplexing and can process multiple requests simultaneously on the same TCP connection, multiple component code blocks can be loaded in parallel, greatly improving the loading speed. In addition, the present invention can further accelerate the access speed of resources by storing component code blocks on a static resource server, utilizing the cache mechanism of the server and the distributed network of the CDN. In this way, when users visit different pages of the web application, they only need to download the component code blocks that are actually needed, 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 time for subsequent page loading, improving the user experience.

[0020] S1 of the present invention is to define each dynamically imported component, specifically to export a render function based on the js code of the component, which is used to define the properties of the component, including jsx code for describing the component node information and component packages for describing the external dependencies of the component. The deps attribute is a mapping structure, the key value of the mapping structure is the name of the component package, the value value is the cdn address of the corresponding component package, and 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 component package in umd format ensures that it can be used in all environments. The umd format is obtained by packaging with the babel tool.

[0021] S2 of the present invention is to compile the jsx code. In order to realize the dynamic compilation of the code, the babel runtime library (specifically @babel / standalone) 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 a 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 the code that can be executed by the react framework through the Babel.transform method.

[0022] The process of compiling the jsx code into the execution code of the react framework specifically includes: S21, using Babel's runtime library to pass the jsx code to babel by calling babel's API; S22, babel parses the jsx code and converts it into React.createElement call, i.e., the execution code of the react framework. After the compilation is completed, the generated code is called a component code block, which is a valid JavaScript code that can be directly executed in the React environment. Finally, the compiled component code block will be stored as a variable so that it can be uploaded to the static resource server and dynamically imported in the subsequent steps.

[0023] S3 of the present invention is to upload the component code block to the static resource server. The static resource server is preferably a CDN server, which is generally used for static resource hosting, accelerating resource access, etc. The static storage server address that stores the component code block is used as a parameter, and no longer relies on various heavy component libraries, which will greatly reduce the page loading speed. If the component code block is put into production before being uploaded successfully, there will be production accidents such as access failure leading to a white screen of the page, so 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, the md5 fingerprint of the component code block is accessed through an http request and compared with the recorded md5 fingerprint. If they are consistent, it means that the component code block has been uploaded successfully. Preferably, the upload function in the sdk is used to upload the component code block. The present invention S4 is to parse the component code block in the static resource server, obtain the JSX component and render it. Specifically, it includes: S41, obtain the component code block in the static resource server through http request; S42, create a proxy object (Proxy), the proxy object can intercept the code acquisition and variable setting operations; 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, because the JS code of the component package is a string, 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 values ​​as a dependency map of a component package; S44, repeat S43 to obtain the dependency map of all component packages; S45, the proxy object intercepts the dependency map and injects it into the get method of the proxy object; S46, put each dependency map into the eval method for execution, specifically through the createElement function of the react framework, obtain the corresponding JSX component and render it.

[0024] The S42 also includes setting a with keyword for accessing the contents of the proxy object. Setting the with keyword for accessing the contents of the proxy object actually means limiting the scope of the component code in some way so that it can only access the contents of the proxy object. This can be achieved using the with keyword, but using the with keyword directly in the component code is not a best practice because it may cause some side effects and performance issues. In order to ensure that the component code does not accidentally access other variables in the host environment, while at the same time using the characteristics of the with keyword to limit the component code to only access the proxy object, it specifically includes: S421, using an immediately invoked function expression (IIFE) to create an independent scope; S422, using 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 contents of the proxy object, thereby avoiding access to variables in the external scope.

[0025] The above method creates an independent scope through IIFE, ensuring that the component code will not affect the host environment, nor will it be polluted by the global variables of the host environment; using the with keyword ensures that the code in 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, limiting it to the function body of an IIFE can minimize this impact. Through the above method, the goal of component code only being able to access the content of the proxy object can be achieved more safely, while ensuring that the dynamic import and rendering process of the component is efficient and controllable.

[0026] 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 them, and certainly not limiting the patent scope of the present invention. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions recorded in the aforementioned embodiments, or replace some or all of the technical features therein by equivalents. These modifications or replacements do not make the essence of the corresponding technical solutions deviate from the scope of the technical solutions of the embodiments of the present invention. In other words, any changes or modifications made to the main design concept and spirit of the present invention that have no substantive significance, and the technical problems they solve are still consistent with the present invention, should be included in the protection scope of the present invention. In addition, the direct or indirect application of the technical solutions of the present invention in other related technical fields is also included in the patent protection scope of the present invention.

Claims

1. A method for implementing dynamic import and execution of components in a react framework, characterized in that: The following steps are involved: S1. Based on the js code of the dynamically imported component, a render function is exported. The return value of the render function is the jsx code used to describe the component node information. A deps attribute is added to the static attribute of the render function. The deps attribute is used to describe the component package that the component depends on externally. S2. Use babel to compile the jsx code to obtain the component code block; S3, upload the component code block to the static resource server; S4. Get the component code block in the static resource server, parse the deps attribute of the component code block, get the jsx component and render it.

2. According to a method for implementing dynamic component import execution in a react framework according to claim 1, it is characterized in that: 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.

3. According to a method for implementing dynamic component import execution in a react framework according to claim 2, it is characterized in that: The component package is in umd format.

4. According to a method for implementing dynamic component import execution in a react framework according to claim 2, it is characterized in that: The S4 includes: S41, obtaining the component code block in the static resource server through an http request; S42, creating a proxy object; 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, putting the js code of the component package into the eval method to obtain the component package variable, updating the value of the deps attribute to the component package variable, and recording the updated set of key / value values ​​as a dependency mapping of the component package; S44, repeating S43 to obtain the dependency mapping of all component packages; S45, the proxy object intercepts the dependency mapping and injects it into the get method of the proxy object; S46, putting each dependency mapping into the eval method for execution, obtaining the corresponding jsx component and rendering it.

5. According to a method for implementing dynamic component import execution in a react framework according to claim 4, it is characterized in that: The S42 also includes setting a with keyword for accessing the content in the proxy object, specifically including: S421, using an immediately called function expression to create an independent scope; S422, using the with keyword in the function body of the immediately called function expression so that the code in the function body can only access the content in the proxy object.

6. According to a method for implementing dynamic component import execution in a react framework according to claim 1, it is characterized in that: 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 a component code block.

7. According to a method for implementing dynamic component import execution in a react framework according to claim 6, it is characterized in that: The compiling of the jsx code into the execution code of the react framework specifically includes: S21, using the runtime library of Babel, passing the jsx code to babel by calling the babel API; S22, babel parses the jsx code and converts it into React.createElement call, that is, the execution code of the react framework.

8. According to a method for implementing dynamic component import execution in a react framework according to claim 1, it is characterized in that: The S3 also includes verifying whether the component code block is uploaded successfully, which is 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, the md5 fingerprint of the component code block is accessed through an http request and compared with the recorded md5 fingerprint. If they are consistent, it means that the component code block has been uploaded successfully.

9. The method for implementing dynamic component import execution in a react framework according to claim 7, characterized in that: Use the upload function in the SDK to upload the component code block.

Images