Method for improving SPA application development performance

Abstract

The invention discloses a method for improving SPA application development performance. The method comprises the steps that an npm package installer is adopted to initialize an SPA application so as to manage application dependency in a unified mode; splitting dependent packages and codes with high computing power in the SPA application so as to reduce the number of files when an npm package manager compiles and packages; performing a Wasm conversion test and conversion on the high-computing-power code, and performing Wasm compilation on the dependent package to improve the compilation speed; judging updating of the dependent package in the application installation directory by adopting a package detector so as to re-execute the compiling work of the dependent package; and integrating the front-end framework with the Wasm through SPA application configuration so as to realize shunt loading of the framework structure. According to the method, front-end dependence rapid compiling and loading can be achieved, the construction performance and the construction speed are improved as much as possible, the pressure of an npm package manager is relieved, meanwhile, the compiling speed is improved, and the limitation of traditional SPA application compiling and packaging is solved.

Description

Technical Field

[0001] The present invention belongs to the technical field of computer application development and deployment, and in particular relates to a method for improving SPA application development performance. Background Art

[0002] With the continuous development of Internet technology, Internet applications have become more and more functional and larger in scale. In a large application, there are often thousands or even tens of thousands of dependent resources. These dependent packages will have a great impact on the overall build speed, loading speed, running speed and other performance of medium and large application projects.

[0003] During software development and iteration, compiling source files and dependent packages into target files is a very frequent task. Each time you compile, you need to check whether the dependencies are fully installed. Otherwise, the dependencies will be reinstalled according to the application configuration directory. For medium and large projects, due to the huge number of dependent packages, and the dependency installer must be used to check the completeness of the dependencies at the beginning of each compilation, it may take 5 to 10 minutes to compile using the framework's own npm package manager, which prolongs the entire compilation time, thereby prolonging the software development and iteration time. The traditional resource package compilation process is Figure 1 Although some build tools have solved the slow build speed problem of the npm package manager in recent years, such as esbuild and vite, they still cannot fundamentally solve the slow compilation speed problem of large and medium-sized projects. Summary of the invention

[0004] In view of the above-mentioned deficiencies in the prior art, the present invention provides a method for improving SPA application development performance based on Rust language, transforms the single page (SPA) application framework, splits the npm dependency package and the code with high computing power and the conventional code, calls the function provided by the WebAssembly module, compiles such files or codes into bytecodes, divides the compilation work, and then executes it in the browser by WASI, so as to realize fast compilation and loading of front-end dependencies, improve the build performance and build speed as much as possible, reduce the pressure of the npm package manager, and improve the compilation speed, so as to solve the limitations of traditional SPA application compilation and packaging.

[0005] In order to achieve the above technical objectives, the technical solution adopted by the present invention is:

[0006] A method for improving SPA application development performance, comprising:

[0007] Use the npm package installer to initialize the SPA application to uniformly manage application dependencies;

[0008] Split the dependent packages and high-computational code in the SPA application to reduce the number of files when the npm package manager compiles and packages;

[0009] Perform wasm conversion tests and conversion on high-computing power codes, and perform wasm compilation on dependent packages to improve compilation speed;

[0010] Use a package detector to determine updates to dependent packages in the application installation directory, so as to recompile the dependent packages.

[0011] Integrate the front-end framework with wasm through SPA application configuration to achieve diversion loading of the framework structure.

[0012] To optimize the above technical solutions, the specific measures taken also include:

[0013] The above npm package installer installs the npm resource package registered by the SPA application in the project directory, generates a node_modules folder, and manages application dependencies in a unified manner.

[0014] The above-mentioned wasm conversion test of the high-computing power code includes: performing a demo performance test on the high-computing power code to test whether the expected acceleration effect can be achieved to determine whether to convert it to the wasm format. If the acceleration effect does not meet the expectations, it will not be converted to the wasm format, otherwise it will be converted to the wasm format.

[0015] The above-mentioned wasm conversion process of the high-computing power code is as follows: Use Rust as the source language of wasm, write Rust code, and use the Rust tool chain to batch compile the high-computing power code in the SPA application into a web-oriented binary file WebAssembly format .wasm file, and use the wasm-pack tool for building the Rust WebAssembly project and the JavaScript adjustment generation tool wasm-bindgen to interact with JavaScript.

[0016] The above-mentioned wasm compilation of dependent packages includes: using the standalone singleton mode of the language code conversion framework Emscripten to compile the dependent packages into wasm; using the tool chain to compile the source code into a wasm binary file.

[0017] The above-mentioned wasm compilation of dependent packages also includes: entrusting the dependent package compilation and conversion tasks to the WebAssembly tool written in Rust to improve the compilation speed; using WebAssembly in the compiler to call functions written in Rust to improve performance and reliability.

[0018] The above-mentioned wasm compilation of dependent packages also includes: using Web Workers multi-threaded parallel processing of different parts of the compilation tasks; and scheduling tasks according to the dependency relationship of the compilation tasks.

[0019] The above-mentioned wasm compilation of dependent packages also includes: integrating the compilation process into the automated build process; using the CI / CD automated deployment mode for continuous integration to ensure that each submission can quickly compile the resource package.

[0020] The above-mentioned wasm compilation of dependent packages also includes: using a cache mechanism to cache the compiled results; and only compiling the changed part of the code.

[0021] The above-mentioned front-end framework is integrated with wasm through SPA application configuration, including:

[0022] Create a JavaScript wrapper to interact with the wasm module and use the wasm file in JavaScript;

[0023] Import wasm modules into the front-end framework and use WebPack to package multiple JavaScript and WASM modules to reduce loading time and improve front-end performance.

[0024] Modify SPA application configuration: install specified dependencies, create wasm module area, and configure file path;

[0025] The wasm-bindgen and js-sys libraries are used to achieve seamless interaction between Rust and JavaScript to call the functions provided by the wasm module in the SPA application.

[0026] The present invention has the following beneficial effects:

[0027] The present invention provides a more efficient dependency compilation solution for software developers to meet the growing development needs, promote technological innovation, and promote the software industry to develop in a more efficient and sustainable direction, so as to achieve cost reduction and efficiency improvement for enterprises. Through application framework disassembly, that is, splitting the framework npm resource package and the code with high computing power, two sets of independently running compilation rules are formed with the ordinary code, which reduces the compilation pressure of the package manager and speeds up the program running speed; through Rust writing optimization, the memory safety, concurrency safety and high performance characteristics of the Rust language are used to accelerate the compilation process; the optimized compilation algorithm is written as a WebAssembly module (wasm module) to run in the browser and provide high-performance computing power; using wasm-bindgen and js-sys libraries: using wasm-bindgen and js-sys libraries to achieve seamless interaction between Rust and JavaScript, and conveniently calling the functions provided by the WebAssembly module in the SPA application; combining the WebPack tool to package multiple JavaScript and wasm modules, reducing loading time and improving front-end performance.

[0028] Beneficial effects also include:

[0029] 1. Shorten compilation time: By leveraging the high performance features of Rust and WebAssembly and accelerating the execution speed of optimization algorithms, the SPA application compilation process can be significantly shortened and development efficiency can be improved. Fast front-end dependency compilation speed can reduce the time developers spend waiting for compilation, improve development efficiency, and shorten the development cycle.

[0030] 2. Improve deployment speed: A fast front-end build process can speed up deployment, quickly release updated code to the production environment, and reduce the time and risk of the release process.

[0031] 3. Improve user experience: Fast compilation speed means faster page loading time, which can improve the user experience of SPA applications, reduce user waiting time, and improve user satisfaction. Fast front-end dependency compilation speed can reduce page loading time, improve user experience, and allow users to access and use websites or applications faster.

[0032] 4. Save computing resources: By using WebAssembly for computing on the client side, you can reduce the server burden, save server resources, and improve the overall performance and stability of SPA applications. Slower compilation speeds will cause developers to choose to use fewer dependencies or simpler solutions instead of better dependencies or more complex functions, thereby reducing resource utilization.

[0033] 5. Improve developer experience: Optimization using Rust and WebAssembly technologies can provide more modern and efficient development tools, improve the developer's work experience, and promote team collaboration and product development process. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] Figure 1 Compile process for traditional resource packages;

[0035] Figure 2 This is a flowchart of the steps of an embodiment of the present invention;

[0036] Figure 3 It is the overall flow chart of the present invention;

[0037] Figure 4 Calling the wasm module in vue of the present invention;

[0038] Figure 5 This is a directory structure diagram after the framework of the present invention is transformed;

[0039] Figure 6 This is the architecture diagram of the front-end part of the system after the framework of the present invention is modified. DETAILED DESCRIPTION

[0040] 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 and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0041] Although the steps in the present invention are arranged with numbers, they are not used to limit the order of the steps. Unless the order of the steps is clearly stated or the execution of a certain step requires other steps as a basis, the relative order of the steps can be adjusted. It is understood that the term "and / or" used in this article involves and covers any and all possible combinations of one or more of the associated listed items.

[0042] like Figure 2 As shown, a method for improving SPA application development performance of the present invention is characterized by comprising:

[0043] 1. Package Installer: Use the npm package manager to execute the npminstall installation command to initialize the application;

[0044] The npm package installer is used to install the npm resource package for application registration in the project directory, generate a node_modules folder, and manage application dependencies in a unified manner;

[0045] 2. Application disassembly: Split the dependent packages and high-computing code in the application to reduce the number of files when the npm package manager compiles and packages;

[0046] In the embodiment, based on all modules in the SPA application, the codes or files that affect the performance are sorted out, such as the dependency packages, video file upload, file comparison, video encoding and decoding, games and other modules in the SPA application;

[0047] 3. File type conversion:

[0048] (1) High-computing power code conversion test: perform demo performance test to determine whether to use the wasm format; test whether the expected acceleration effect can be achieved. If the acceleration effect is not obvious, then it is not suitable to switch to wasm;

[0049] (2) High-computing code conversion process: Use Rust as the source language of wasm. First, write Rust code and use the Rust tool chain to batch compile the performance-intensive files in the SPA application into .wasm files in the WebAssembly format for web-oriented binary files. The command is as follows:

[0050] emcc file.rs-o file.wasm-s EXPORTED_FUNCTIONS="['_sumArray']"

[0051] Use the Cargo tool to manage dependencies and build Rust code, and use wasm-pack, a tool for building Rust WebAssembly projects, to compile Rust code into WASM files.

[0052] In the embodiment, Rust is used to write / reconstruct high-computing power code, and the high-computing power code is converted into a WASM file through Emscripten's emcc tool, so that WebAssembly can be used on the client to accelerate the computing process; with the help of wasm-pack and wasm-bindgen tools, it is convenient to interact with JavaScript and simplify the integration of WebAssembly modules.

[0053] (3) Resource package conversion / dependency package compilation:

[0054] ① Use the standalone mode of the language code conversion framework Emscripten to compile dependent packages into wasm;

[0055] ② Use the toolchain to compile the source code into a WASM binary file. Run a script to generate a WASM file from the source code.

[0056] Furthermore, 1) WebAssembly is used to accelerate compilation:

[0057] ① Entrust the resource package conversion task to the WebAssembly tool written in Rust to improve the compilation speed.

[0058] ② Use WebAssembly in the compiler to call functions written in Rust to improve performance and reliability.

[0059] 2) Parallel compilation processing:

[0060] ① Use Web Workers multi-threading to process different parts of the compilation task in parallel to speed up the overall compilation process.

[0061] ② Design a suitable task scheduling algorithm based on the dependencies of compilation tasks to fully utilize the advantages of parallel processing.

[0062] 3) Continuous integration and automated build:

[0063] ① Integrate the compilation process into the automated build process to reduce manual operations and improve efficiency.

[0064] ② Use CI / CD automated deployment mode for continuous integration to ensure that resource packages can be compiled quickly for each submission.

[0065] 4) Cache and incremental compilation:

[0066] ① Use a caching mechanism to cache compiled results to avoid repeatedly compiling the same code.

[0067] ② Consider implementing incremental compilation to compile only the changed code instead of the entire application.

[0068] 4. Packet detector:

[0069] Used to determine whether the npm resource package in the application installation directory is updated;

[0070] Use Renovate or Dependabot tools to automatically detect updates to dependent packages in the project, and send notifications to developers or automatically submit update requests to facilitate developers to re-execute dependent package type conversion and compilation work.

[0071] 5. Front-end framework integration:

[0072] Through configuration, the front-end framework (such as React, Vue) is integrated with WebAssembly to achieve the purpose of framework structure diversion loading and improve front-end performance.

[0073] (1) Create a JavaScript wrapper: In order to use WASM files in JavaScript, you need to create a JavaScript wrapper to interact with JavaScript and WASM modules and expose the functions of the WASM modules to JavaScript.

[0074] (2) Importing WASM modules: Use the WebAssembly.instantiateStreaming method or the fetch API to load the WASM file and instantiate the module using the WebAssembly.instantiate method, such as Figure 4 ;

[0075] (3) Modify the SPA application configuration: Install the specified dependencies through the npminstall@wasm-tool / wasm-pack-plugin--save-dev command, create a WASM area in webpack.config.js, and configure the configuration file path;

[0076] 6. Program running: Treat the functions of the WASM module as ordinary JavaScript functions, and call the functions exported in the WASM module through JavaScript to perform corresponding operations.

[0077] The overall flow chart is as follows Figure 3 ; The framework directory structure is as follows Figure 5 .

[0078] The terms in this article are explained as follows:

[0079] Rust is a modern, safe, high-performance system programming language suitable for developing high-performance, highly concurrent applications. Its design makes it easier to write reliable and efficient code, and it is favored by more and more developers.

[0080] WebAssembly (Wasm for short) is a low-level language that can run on the Web. Its design goal is to provide an execution speed close to native performance. The emergence of Wasm enables SPA applications to utilize hardware resources more efficiently, providing users with faster loading speeds and a smoother experience.

[0081] WASI (WebAssembly System Interface) In order to compile multiple languages ​​into WebAssembly and run on various backends (regardless of whether the front-end framework is jQuery, Vue, or React, and whether the back-end is java, node.js, Java, or Go), interface docking specifications must be made for multiple languages. This is WebAssembly SystemInterface (wasi).

[0082] It will be apparent to those skilled in the art that the invention is not limited to the details of the exemplary embodiments described above and that the invention can be implemented in other specific forms without departing from the spirit or essential features of the invention. Therefore, the embodiments should be considered exemplary and non-limiting in all respects, and the scope of the invention is defined by the appended claims rather than the foregoing description, and it is intended that all variations falling within the meaning and scope of the equivalent elements of the claims be included in the invention. Any reference numeral in a claim should not be considered as limiting the claim to which it relates.

[0083] In addition, it should be understood that although the present specification is described according to implementation modes, not every implementation mode contains only one independent technical solution. This description of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each embodiment may also be appropriately combined to form other implementation modes that can be understood by those skilled in the art.

Claims

1. A method for improving SPA application development performance, characterized in that: include: Use the npm package installer to initialize the SPA application to uniformly manage application dependencies; Split the dependent packages and high-computational code in the SPA application to reduce the number of files when the npm package manager compiles and packages; Perform wasm conversion tests and conversion on high-computing power codes, and perform wasm compilation on dependent packages to improve compilation speed; Use a package detector to determine updates to dependent packages in the application installation directory, so as to recompile the dependent packages. Integrate the front-end framework with wasm through SPA application configuration to achieve diversion loading of the framework structure.

2. A method for improving SPA application development performance according to claim 1, characterized in that: The npm package installer installs the npm resource package registered by the SPA application in the project directory, generates a node_modules folder, and uniformly manages application dependencies.

3. A method for improving SPA application development performance according to claim 1, characterized in that: The wasm conversion test of the high computing power code includes: performing a demo performance test on the high computing power code to test whether the expected acceleration effect can be achieved to determine whether to convert it to the wasm format; if the acceleration effect does not meet expectations, it will not be converted to the wasm format; otherwise, it will be converted to the wasm format.

4. A method for improving SPA application development performance according to claim 1, characterized in that: The wasm conversion process of the high-computing power code is as follows: Rust is used as the source language of wasm, Rust code is written, and the Rust tool chain is used to batch compile the high-computing power code in the SPA application into .wasm files in the WebAssembly format, a web-oriented binary file, and the wasm-pack tool for building the Rust WebAssembly project and the JavaScript adjustment generation tool wasm-bindgen are used to interact with JavaScript.

5. A method for improving SPA application development performance according to claim 1, characterized in that: The wasm compilation of the dependent package includes: using the standalone singleton mode of the language code conversion framework Emscripten to compile the dependent package into wasm; and using the tool chain to compile the source code into a wasm binary file.

6. A method for improving SPA application development performance according to claim 5, characterized in that: The wasm compilation of the dependent package also includes: entrusting the dependent package compilation and conversion task to a WebAssembly tool written in Rust to improve the compilation speed; using WebAssembly in the compiler to call functions written in Rust to improve performance and reliability.

7. A method for improving SPA application development performance according to claim 5, characterized in that: The wasm compilation of the dependent package also includes: using Web Workers multi-threaded parallel processing of different parts of the compilation tasks; and scheduling tasks according to the dependency relationship of the compilation tasks.

8. A method for improving SPA application development performance according to claim 5, characterized in that: The wasm compilation of the dependent package also includes: integrating the compilation process into the automated build process; using the CI / CD automated deployment mode for continuous integration to ensure that each submission can quickly compile the resource package.

9. A method for improving SPA application development performance according to claim 5, characterized in that: The wasm compilation of the dependent package also includes: using a cache mechanism to cache the compiled results; and only compiling the changed part of the code.

10. A method for improving SPA application development performance according to claim 1, characterized in that: The front-end framework is integrated with wasm through SPA application configuration, including: Create a JavaScript wrapper to interact with the wasm module and use the wasm file in JavaScript; Import wasm modules into the front-end framework and use WebPack to package multiple JavaScript and WASM modules to reduce loading time and improve front-end performance. Modify SPA application configuration: install specified dependencies, create wasm module area, and configure file path; The wasm-bindgen and js-sys libraries are used to achieve seamless interaction between Rust and JavaScript to call the functions provided by the wasm module in the SPA application.

Images