Intelligent compiling method and device for JS codes on front end side and medium
By performing intelligent and incremental compilation of JS code on the client side, the performance bottleneck and resource redundancy issues of the traditional full compilation mode are resolved, enabling dynamic on-demand compilation and fast response, thereby improving the loading speed of front-end applications and user experience.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- 浪潮智慧科技有限公司
- Filing Date
- 2026-02-28
- Publication Date
- 2026-05-15
AI Technical Summary
Traditional full-compile mode has performance bottlenecks in front-end applications, making it difficult to adapt to dynamically changing application scenarios and personalized needs, resulting in resource redundancy and first-screen loading delays. Furthermore, centralized processing architectures are prone to load pressure and single points of failure.
Intelligent compilation of JS code is implemented on the client side. By collecting runtime environment data and dependencies in real time, compilation priority information is generated, and atomic code blocks required by the user's current function are dynamically compiled on demand. Incremental compilation is performed when the code changes to ensure cache consistency.
It improves the loading speed and user experience of front-end applications, reduces resource consumption, increases code update efficiency, and avoids the performance loss caused by full recompilation.
Smart Images
Figure CN122044587A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer program compilation technology, specifically to a method, device, and medium for intelligent compilation of JS code on the front end. Background Technology
[0002] As web front-end applications become more modular, complex, and large-scale, JavaScript (JS), as the core front-end development language, directly impacts application loading speed, runtime performance, and user experience through its code compilation and resource bundling mechanisms. Currently, the industry mainstream adopts a full build-time compilation model, represented by build tools such as Webpack and Vite. This model completes the merging, syntax transpilation, compression, obfuscation, and module bundling of all JS code during the project build phase, generating a complete JS resource package. The browser must fully load this package before it can start and execute application logic.
[0003] As the complexity of front-end applications continues to increase, the amount of JS code data in single-page applications is constantly growing, highlighting the performance bottleneck of the traditional full-build mode. Although the industry has introduced optimization methods such as code splitting and on-demand loading, these only optimize resource loading and do not change the fundamental nature of compilation being completed during the build phase. On the one hand, this mode, by pre-setting fixed judgment conditions and processing logic, is difficult to adapt to dynamically changing application scenarios and personalized needs, has poor rule extensibility, and low applicability and flexibility. On the other hand, the centralized processing architecture, which unifies all data and business logic to a central node for processing, puts a heavy load on the central node, making it prone to processing bottlenecks and single points of failure. At the same time, the data transmission and processing latency is high, making it difficult to meet the requirements of high concurrency and low latency. Summary of the Invention
[0004] To address the aforementioned issues, this application proposes a method for intelligent compilation of front-end JavaScript code, comprising: Receive business requests triggered by users when accessing the client front-end application, parse the target function corresponding to the business request, and obtain multiple code blocks to be compiled associated with the target function based on the pre-built code splitting index; The runtime environment data of the client is collected in real time, and compilation priority information is generated based on the dependencies between the code blocks to be compiled and the runtime environment data; the compilation priority information is used to indicate the compilation priority order of the multiple code blocks to be compiled. A preset compiler scheduler generates a sequence of compilation instructions for the code block to be compiled based on the compilation priority information; the sequence of compilation instructions includes the block identifier of the code block to be compiled. The compilation instruction sequence is sent to the client-side compilation engine, which compiles the code block to be compiled in real time to generate the corresponding executable code and stores the executable code in a preset cache. When a change is detected in the source code of any of the code blocks to be compiled, the scope of the change is determined based on the dependencies between the changed code block and other code blocks to be compiled. The edge-side compilation engine incrementally compiles the recompiled atomic code blocks within the scope of the change to generate corresponding new executable code, and updates the new executable code to the preset cache.
[0005] On the other hand, this application also proposes a front-end-side JS code intelligent compilation device, comprising: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, which, when executed by the at least one processor, enables the at least one processor to execute, for example, a front-end JS code intelligent compilation method as described in the above example.
[0006] On the other hand, this application also proposes a non-volatile computer storage medium storing computer-executable instructions, wherein the computer-executable instructions are configured as: a front-end JS code intelligent compilation method as described in the above example.
[0007] The intelligent compilation method for front-end JS code proposed in this application can bring the following benefits: By shifting the compilation decision-making power from the build phase to the client runtime, dynamic on-demand compilation based on real-time user behavior, network status, and device performance is achieved. Only the atomic code blocks required by the user's current function are compiled, effectively solving the resource redundancy and first-screen loading delay problems caused by full compilation during traditional builds, and significantly improving the loading response speed and user experience of front-end applications.
[0008] Furthermore, by establishing a precise tracking mechanism for the scope of code changes, when the source code changes, only the affected related code blocks are incrementally compiled and the cache is updated. This avoids the performance loss caused by full recompilation, ensures the consistency between the executable code in the cache and the source code, thereby significantly reducing the resource overhead of end-side compilation and improving code update efficiency. Attached Figure Description
[0009] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings: Figure 1 This is a flowchart illustrating a front-end-side intelligent compilation method for JS code in an embodiment of this application. Figure 2 This is a schematic diagram of a front-end-side JS code intelligent compilation device according to an embodiment of this application. Detailed Implementation
[0010] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0011] The technical solutions provided by the various embodiments of this application are described in detail below with reference to the accompanying drawings.
[0012] like Figure 1 As shown, this application provides a method for intelligent compilation of JS code on the front-end side, including: S101. Receive a business request triggered by a user when accessing the client front-end application, parse the target function corresponding to the business request, and obtain multiple code blocks to be compiled associated with the target function based on the pre-built code splitting index.
[0013] Specifically, when a user accesses the front-end application through a browser or WebView, the client generates a corresponding business request when the user performs actions such as clicking or navigating routes. In practice, this business request is received and parsed to determine the target function, such as "user login," "data report export," or "order details viewing."
[0014] Before receiving business requests, a code splitting index needs to be built in advance. The process of building the code splitting index includes: obtaining the full JS code of the front-end project that constitutes the client front-end application, parsing the full JS code, splitting the full JS code based on preset feature dimensions, and generating multiple atomic code blocks.
[0015] The preset feature dimensions include business dimension, function type dimension, and dependency relationship dimension. Then, the source code of each atomic code block is parsed, extracting the identifiers of external code blocks referenced by import statements within the atomic code block, as well as the exported content corresponding to export statements.
[0016] A dependency list corresponding to the atomic code block is generated based on the external code block identifier, and the exported content is hashed to generate the export signature of the atomic code block. Finally, a dependency graph between the corresponding atomic code blocks is constructed based on the dependency list, and the block identifier of the atomic code block, the dependency list, the export signature, and the dependency graph are stored together to obtain the code splitting index.
[0017] When obtaining the code block to be compiled, first determine the target business dimension and the target function type dimension to which the target function belongs. For example, if the target function corresponding to the business request is "viewing order details", then its target business dimension may be "order management" and its target function type dimension may be "viewing function".
[0018] Based on the aforementioned target business dimension and target function type dimension, a query is performed in the pre-built code splitting index to obtain atomic code block identifiers that match the business dimension and function type dimension. Subsequently, according to the retrieved atomic code block identifiers, the corresponding atomic code blocks are read from the code splitting index. These atomic code blocks are the multiple code blocks to be compiled that are required to implement the target function.
[0019] In this embodiment, a five-layer architecture is adopted to achieve intelligent on-demand compilation of front-end JS code. The architecture includes a module splitting layer, a compilation scheduling layer, a client-side compilation layer, a cache management layer, and an interactive visualization layer. The core function of the module splitting layer is to achieve atomic splitting of all JS code and generate a module dependency graph. This is achieved by: building a module splitting configuration center that supports inputting business module division rules, functional type classifications, and dependency definitions; integrating Abstract Syntax Tree (AST) parsing tools, such as Babel Parser, to parse all JS code in the project, extracting core elements such as functions, classes, and variables, and automatically splitting them into atomic modules based on the splitting rules of the configuration center, generating independent files in ES module format; constructing a module dependency graph, displaying the dependencies between modules through a visual interface, supporting manual adjustment of module splitting rules and dependencies to ensure module independence and integrity; and generating a module manifest file containing a unique identifier, path, dependency list, functional description, initial priority, and other meta-information for each module, for subsequent compilation scheduling.
[0020] S102. Real-time collection of the client's runtime environment data, and generation of compilation priority information based on the dependencies between the code blocks to be compiled and the runtime environment data; the compilation priority information is used to indicate the compilation priority order corresponding to the multiple code blocks to be compiled.
[0021] Specifically, after obtaining multiple code blocks to be compiled associated with the target function, it is necessary to determine the compilation order of these code blocks so as to prioritize the compilation of the key code that the user needs most at the moment, thereby improving the first screen loading efficiency and user experience.
[0022] In practice, real-time runtime environment data is collected from the client. This runtime environment data includes user behavior data, network status data, and device performance data. User behavior data reflects the frequency of user usage and operational habits for specific functions; network status data reflects the bandwidth and quality of the network currently accessed by the client; and device performance data reflects the computing resource load on the client device.
[0023] From the pre-built code split index, read the list of dependencies for each code block to be compiled. The list of dependencies records the block identifiers of other atomic code blocks that the code block to be compiled depends on, which is used to characterize the dependencies between the code blocks to be compiled.
[0024] Based on the list of dependencies to be compiled, calculate the dependency weight value for each code block to be compiled. The dependency weight value is used to characterize the criticality of the code block to be compiled in the dependency graph. For example, if a code block to be compiled is depended on by multiple other code blocks, its dependency weight value is high, and it should be compiled first to ensure that the code blocks that depend on it can run normally.
[0025] Simultaneously, based on the collected runtime environment data, a runtime environment quantization coefficient is calculated for each code block to be compiled. This runtime environment quantization coefficient includes user behavior popularity, network status coefficient, and device performance coefficient.
[0026] For user behavior popularity, the system calculates the trigger frequency of the corresponding function in the code block to be compiled within a preset time window based on user behavior data. For network status coefficient, the system identifies the current network type the client is connected to, such as intranet, 5G, 4G, 3G, etc., based on network status data. Different network types have different preset network status coefficients; the better the network status, the higher the coefficient. For device performance coefficient, the system monitors the client's CPU utilization based on device performance data. The corresponding device performance coefficient is determined based on the CPU utilization range; the less active the device, the higher the coefficient.
[0027] After obtaining the dependency weight values and runtime environment quantization coefficients, the runtime environment quantization coefficients are weighted and calculated to obtain the compilation priority score for the corresponding code block to be compiled. Specifically, the user behavior popularity value, network state coefficient, and device performance coefficient are weighted and summed according to preset weights to obtain the comprehensive value of the runtime environment quantization coefficient, which is then fused with the dependency weight values to generate the final compilation priority score.
[0028] Based on the compilation priority score corresponding to each code block to be compiled, the multiple code blocks to be compiled are sorted. The code blocks to be compiled with higher scores are given higher compilation priority, and the code blocks to be compiled with lower scores are given lower compilation priority.
[0029] In this embodiment, the compilation scheduling layer is used to dynamically allocate compilation priorities and resources based on a multi-dimensional decision model. Implementation: A Compilation Priority Scheduling Model (CPSM) is deployed, integrating four decision factors: user behavior popularity (based on tracking the click frequency and usage duration of corresponding functions in the module); module dependency weight (calculating the criticality of modules based on dependency graphs); network status (obtaining network type via the Navigator.connection API); and device performance (obtaining CPU utilization and memory usage via the Performance API). Module compilation priority scores are calculated, and compilation queues are generated by sorting modules in descending order of score. Compilation resources are dynamically adjusted based on device performance and network status, dynamically allocating compilation threads to avoid blocking the main thread during compilation. Compilation timing triggering mechanisms include pre-compilation triggering: automatically starting the compilation of high-priority modules after the initial screen loads; lazy compilation triggering: immediately adding a non-core module to the compilation queue and increasing its priority when a user triggers its corresponding function; and background compilation triggering: starting the compilation of low- and medium-priority modules when the main thread is idle.
[0030] S103. Using a preset compiler scheduler, a sequence of compilation instructions for the code block to be compiled is generated according to the compilation priority information; the sequence of compilation instructions includes the block identifier of the code block to be compiled.
[0031] Specifically, after generating compilation priority information, the compilation scheduler needs to convert the priority information into an executable sequence of compilation instructions so that the edge compilation engine can compile each code block to be compiled in a predetermined order.
[0032] In practice, a pre-configured compiler scheduler reads the dependency list for each code block to be compiled. This dependency list is obtained from the code splitting index and records the block identifiers of other atomic code blocks that the code block to be compiled depends on, thus representing the dependencies between code blocks.
[0033] Based on the list of dependencies to be compiled, determine the execution order of dependencies that must be satisfied between the code blocks to be compiled. The execution order of dependencies means that if code block B depends on code block A, then code block A must be compiled before code block B; otherwise, code block B will not be able to find its dependent code block A at runtime, resulting in an execution error. The execution order of dependencies is a rigid constraint that must be followed during the compilation process.
[0034] At the same time, the compilation priority score corresponding to each code block to be compiled is obtained from the compilation priority information, and the compilation priority order generated based on the score is obtained.
[0035] Under the constraint of satisfying the execution order of dependencies, multiple code blocks to be compiled are arranged based on the compilation priority to generate a sequence of compilation instructions for the code blocks to be compiled. Specifically, while ensuring that the code block that is depended on always comes before the code block that depends on it, the code blocks are ordered as high as possible in descending order of compilation priority. For example, if code block A has a higher priority than code block B, but code block B depends on code block A, then code block A will still come before code block B in the final instruction sequence, which is determined by the execution order of dependencies.
[0036] The final generated sequence of compilation instructions contains identifiers of code blocks to be compiled, arranged in the specified order. This sequence of instructions is sent to the edge compilation engine, which then compiles each code block in real time according to the order specified in the sequence.
[0037] In this embodiment, the client-side compilation layer is used to achieve real-time compilation of atomic modules through a lightweight client-side compilation engine. This is achieved by developing a client-side compilation engine (CSE) that integrates the following core capabilities: AST parsing and optimization: Parsing JS code into an AST using Babel Parser, removing invalid code, simplifying conditional judgments, and merging duplicate logic; Syntax transpilation: Automatically adapting transpilation rules based on the current browser's User-Agent information; Code compression: Using a lightweight version of the Terser algorithm, performing variable obfuscation, whitespace removal, and function abbreviation on the compiled code; Dependency injection: Automatically parsing the module dependency list, fetching the compilation results of dependent modules from the cache or remote repository, and injecting them into the execution context of the current module. It also includes a non-blocking compilation implementation: Encapsulating the compilation process into a Web Worker thread to avoid consuming main thread resources, and communicating with the main thread via the PostMessage API during compilation to synchronize compilation progress.
[0038] S104. The compilation instruction sequence is sent to the client-side compilation engine, which is deployed on the client side. The client-side compilation engine performs real-time compilation of the code block to be compiled, generates the corresponding executable code, and stores the executable code in a preset cache.
[0039] Specifically, after the compiler scheduler generates the sequence of compilation instructions, the instruction sequence needs to be sent to the actual compilation execution module, i.e., the client-side compilation engine deployed on the client side. The client-side compilation engine is a lightweight compilation module integrated into the front-end runtime environment, capable of real-time compilation of atomic code blocks in the browser or WebView.
[0040] In practice, a sequence of compilation instructions is sent to the client-side compilation engine. This sequence contains identifiers of code blocks to be compiled, arranged in the specified order. Upon receiving the sequence, the client-side compilation engine processes each code block in turn according to the order specified in the sequence.
[0041] For each code block to be compiled, the client-side compilation engine performs real-time compilation. Specifically, the client-side compilation engine reads the source code corresponding to the code block to be compiled from the code split index, and parses, transposes, and compresses the source code. During the syntax transposition process, the client-side compilation engine dynamically adapts the transposition rules according to the type and version of the client's current browser. For example, if the client is a high version of Chrome, there is no need to transpose ES6+ code to ES5; if the client is IE11, the code needs to be transposed to ES5 to ensure compatibility. During the code compression process, the client-side compilation engine uses a lightweight compression algorithm to obfuscate variables, remove whitespace, and delete comments in the compiled code to reduce its size.
[0042] It's important to note that, to achieve non-blocking compilation, the client-side compilation engine encapsulates the compilation process within a Web Worker thread, avoiding the consumption of browser main thread resources. During compilation, the client-side compilation engine maintains communication with the main thread via the PostMessage API to synchronize compilation progress and status.
[0043] Once the code block to be compiled is completed, the client-side compilation engine generates the corresponding executable code. This executable code is then stored in a pre-defined cache. The cache employs a dual storage mechanism, including a memory cache and local storage. It's worth noting that the memory cache stores the compilation results of currently used or frequently accessed code blocks, offering extremely fast read speeds; local storage, such as IndexedDB or localStorage, stores the results of all compiled code blocks, supporting cross-page session reuse.
[0044] By storing executable code in the cache, when a user needs to use the same code block to be compiled again, the client-side compilation engine can directly read the compiled result from the cache without recompiling, thereby greatly improving the loading speed and response performance of subsequent accesses.
[0045] In this embodiment, the cache management layer is used to optimize the storage and reuse of compilation results, reducing the overhead of repeated compilation. The implementation involves dual caching storage: a memory cache (storing the compilation results of frequently accessed modules in memory) and a local storage (serializing the results of all compiled modules and storing them in localStorage / indexedDB, setting a cache expiration period, and supporting cross-session reuse). A cache key is designed, using a composite key of module unique identifier, code version number, and browser type, such as "user-login-v1.0-chrome," to ensure the uniqueness and accuracy of cached results. A cache eviction strategy is designed: when the local storage capacity reaches a threshold, a hybrid eviction mechanism of least recently used and priority is used, prioritizing the eviction of low-priority, long-unused module caches. A cache update mechanism is designed: when a new version of the project is released, cache invalidation is triggered by version number comparison, automatically deleting the cache of old version modules to ensure that the latest compilation results are loaded.
[0046] S105. When a change is detected in the source code of any of the code blocks to be compiled, the scope of the change is determined based on the dependency relationship between the changed code block and other code blocks to be compiled.
[0047] Specifically, during the development phase or application runtime, the source code of a front-end project may be updated, for example, to fix bugs, add new features, or optimize code logic. When the source code changes, it is necessary to identify other code blocks that are affected by the change so that they can be recompiled to ensure that the executable code in the cache is consistent with the latest source code and to avoid runtime errors caused by outdated dependencies.
[0048] In practice, it is necessary to monitor whether the source code of the code block to be compiled has changed. Monitoring methods include, but are not limited to, any of the following or a combination thereof: monitoring the version number corresponding to each code block to be compiled in the code split index; when the version number of any code block to be compiled is updated, it is determined that the source code of the corresponding code block to be compiled has changed; or, monitoring the source file directory of the front-end project; when the source file corresponding to any code block to be compiled is modified, it is determined that the source code of the corresponding code block to be compiled has changed; or, receiving code update notifications sent by version control tools, and determining the atomic code blocks that have changed based on the code update notifications.
[0049] When a change is detected in the source code of any code block to be compiled, that code block is marked as the changed code block. The modified export signature corresponding to the changed code block is obtained, and the unmodified export signature corresponding to the changed code block is read from the code splitting index. The export signature is generated by hashing the export content corresponding to the export statements in the atomic code block, and is used to uniquely identify the interfaces and functions provided by that code block.
[0050] Compare the exported signature after the change with the exported signature before the change. If the comparison results are the same, it means that although the source code of the modified code block has changed, its exported content has not changed. That is, the change is an internal implementation-level modification and does not affect other code blocks that depend on this code block. In this case, there is no need to trigger recompilation. If the comparison results are inconsistent, it is determined that the exported content of the modified code block has changed. This change may affect other code blocks that depend on this code block that are yet to be compiled, and the scope of the change needs to be further determined.
[0051] When it is determined that the exported content of a modified code block has changed, the modified dependency list corresponding to the modified code block is read from the code split index. The modified dependency list records the block identifiers of other atomic code blocks that the modified code block depends on, but here we need to look for other code blocks that depend on the modified code block, not the code blocks that it depends on. Therefore, a reverse traversal query is performed on the pre-generated dependency graph based on the modified dependency list.
[0052] A dependency graph is a directed graph structure built upon a dependency list of all atomic code blocks. Nodes represent atomic code blocks, and directed edges represent dependencies, with the direction pointing from the depended-on code block to the dependent code block. A recursive traversal search is performed on the dependency graph, starting from the changed code block node and searching in the reverse direction along the dependency edges to find all other atomic code blocks that directly or indirectly depend on the changed code block. These found atomic code blocks are the code blocks affected by the change, and are considered the recompiled atomic code blocks covered by the scope of the change's influence.
[0053] S106. Using the end-side compilation engine, incrementally compile the recompiled atomic code blocks within the scope of the change to generate corresponding new executable code, and update the new executable code to the preset cache.
[0054] Specifically, after determining the scope of the changes and obtaining the recompiled atomic code blocks, these affected code blocks need to be recompiled to ensure that the executable code in the cache is consistent with the latest source code. Meanwhile, to avoid the performance overhead of a full recompilation, an incremental compilation approach is used, compiling only the changed parts.
[0055] In practice, the list of recompiled atomic code blocks within the scope of the change is sent to the client-side compilation engine. After receiving the recompiled atomic code blocks, the client-side compilation engine performs incremental compilation operations on each recompiled atomic code block in turn.
[0056] The core of incremental compilation lies in compiling only the changed parts of the source code, rather than recompiling the entire code block. Specifically, the client-side compilation engine reads the latest source code of the recompiled atomic code block from the code splitting index and retrieves the old version of the executable code generated during the last compilation of that code block from a preset cache. By parsing the abstract syntax tree of the old and new versions of the source code, a tree structure comparison is performed to locate the changed nodes. Changed nodes include newly added functions, modified logic, and deleted variables. Subsequently, only the code snippets corresponding to the changed nodes are recompiled to generate the compiled result of the changed parts. This compiled result of the changed parts is then concatenated with the unchanged parts of the old executable code to generate a complete new executable code.
[0057] During incremental compilation, the client-side compilation engine will also dynamically adapt the syntax transpilation rules according to the type and version of the client's current browser, and compress the compiled code to ensure the compatibility and size advantage of the new executable code.
[0058] After the atomic code block is recompiled incrementally and generates new executable code, the new executable code needs to be updated in the preset cache. When updating the cache, the new executable code is written to the cache using a composite key consisting of the block identifier of the atomic code block, the current version number, and the browser type.
[0059] Cache updates include in-memory cache updates and local storage updates. For in-memory cache updates, the new executable code directly replaces the old version of the corresponding code block's compilation result in memory. For local storage updates, the new executable code is written to IndexedDB or localStorage, and the version number and export signature of the corresponding code block are updated. If an old version of the code block's compilation result already exists in local storage, it is overwritten or marked as invalid.
[0060] It's important to note that when updating the cache for recompiled atomic code blocks, dependency versioning mechanisms must be considered. Since changes to a recompiled atomic code block may alter its exported signature, any other code blocks that depend on it need to be marked as pending recompilation. Therefore, after updating the cache, it's necessary to read the dependency list of the recompiled atomic code block from the code split index, search the dependency graph for all other atomic code blocks that directly or indirectly depend on it, and mark the caches of these code blocks as invalid to ensure that recompilation is triggered the next time it's used.
[0061] In this embodiment, an interactive visualization layer is also included for real-time feedback on the compilation status and support for user interaction. This is implemented as follows: Compilation progress display: A lightweight visualization component is developed and embedded in a corner of the page or settings panel, displaying the current compilation queue length, compilation progress of each module, and estimated remaining time through a progress bar and text prompts; User interaction: Supports users clicking "Prioritize Compilation," "Pause Compilation," and "Clear Cache"; Error handling and feedback: When compilation fails, the visualization component displays an error message, supports one-click retry of compilation, and records error logs for developers to troubleshoot.
[0062] This application achieves dynamic on-demand compilation based on real-time user behavior, network status, and device performance by shifting the compilation decision-making power from the build phase to the client runtime. It compiles only the atomic code blocks required by the user's current function, effectively solving the resource redundancy and first-screen loading delay problems caused by full compilation in traditional builds, and significantly improving the loading response speed and user experience of front-end applications.
[0063] Furthermore, by establishing a precise tracking mechanism for the scope of code changes, when the source code changes, only the affected related code blocks are incrementally compiled and the cache is updated. This avoids the performance loss caused by full recompilation, ensures the consistency between the executable code in the cache and the source code, thereby significantly reducing the resource overhead of end-side compilation and improving code update efficiency.
[0064] like Figure 2 As shown in the embodiments of this application, a front-end JS code intelligent compilation device is also proposed, comprising: At least one processor; and, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, which, when executed by the at least one processor, enables the at least one processor to execute a front-end JS code intelligent compilation method as described in any of the above embodiments.
[0065] This application also provides a non-volatile computer storage medium storing computer-executable instructions, wherein the computer-executable instructions are configured as: a front-end JS code intelligent compilation method as described in any of the above embodiments.
[0066] The various embodiments in this application are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the device and medium embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the description of the method embodiments.
[0067] The devices and media provided in this application are one-to-one with the methods. Therefore, the devices and media also have similar beneficial technical effects as their corresponding methods. Since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media will not be repeated here.
[0068] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0069] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.
[0070] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.
[0071] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.
[0072] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.
[0073] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.
[0074] Computer-readable media include both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.
[0075] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
[0076] The above description is merely an embodiment of this application and is not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.
Claims
1. A method for intelligent compilation of JavaScript code on the front-end, characterized in that, include: Receive business requests triggered by users when accessing the client front-end application, parse the target function corresponding to the business request, and obtain multiple code blocks to be compiled associated with the target function based on the pre-built code splitting index; The runtime environment data of the client is collected in real time, and compilation priority information is generated based on the dependencies between the code blocks to be compiled and the runtime environment data. The compilation priority information is used to indicate the compilation priority order of the multiple code blocks to be compiled; A preset compiler scheduler generates a sequence of compilation instructions for the code block to be compiled based on the compilation priority information; the sequence of compilation instructions includes the block identifier of the code block to be compiled. The compilation instruction sequence is sent to the client-side compilation engine, which compiles the code block to be compiled in real time to generate the corresponding executable code and stores the executable code in a preset cache. When a change is detected in the source code of any of the code blocks to be compiled, the scope of the change is determined based on the dependencies between the changed code block and other code blocks to be compiled. The edge-side compilation engine incrementally compiles the recompiled atomic code blocks within the scope of the change to generate corresponding new executable code, and updates the new executable code to the preset cache.
2. The intelligent compilation method for front-end JS code according to claim 1, characterized in that, Before receiving the business request triggered by the user when accessing the client front-end application and parsing the target function corresponding to the business request, the method further includes: Obtain the full JS code of the front-end application project, parse the full JS code, and split the full JS code based on preset feature dimensions to generate multiple atomic code blocks; the preset feature dimensions include business dimension, function type dimension and dependency relationship dimension; Parse the source code of each atomic code block, extract the identifier of the external code block referenced by the import statement in the atomic code block, and the exported content corresponding to the export statement; Generate a dependency list corresponding to the atomic code block based on the external code block identifier, and perform a hash operation on the exported content to generate the export signature of the atomic code block; Based on the dependency list, a dependency graph between corresponding atomic code blocks is constructed, and the block identifier of the atomic code block, the dependency list, the export signature, and the dependency graph are associated and stored to construct a code splitting index.
3. The intelligent compilation method for front-end JS code according to claim 2, characterized in that, The step of obtaining multiple code blocks to be compiled associated with the target function based on a pre-built code splitting index specifically includes: Determine the target business dimension and target function type dimension to which the target function belongs, and based on the target business dimension and the target function type dimension, query the code splitting index to obtain the matching atomic code block identifier; Based on the matching atomic code block identifier, the corresponding matching atomic code block is read from the code splitting index to obtain multiple code blocks to be compiled associated with the target function.
4. The intelligent compilation method for front-end JS code according to claim 2, characterized in that, The step of generating compilation priority information based on the dependencies between the code blocks to be compiled and the runtime environment data specifically includes: Read the list of dependencies to be compiled for each code block to be compiled from the code splitting index; Based on the list of dependencies to be compiled, calculate the dependency weight value corresponding to the code block to be compiled, and based on the runtime environment data, calculate the runtime environment quantization coefficient corresponding to the code block to be compiled. The quantization coefficients of the runtime environment are weighted to obtain the compilation priority score of the corresponding code block to be compiled. Based on the compilation priority score, the multiple code blocks to be compiled are sorted to generate compilation priority information.
5. The intelligent compilation method for front-end JS code according to claim 4, characterized in that, The quantitative coefficients of the operating environment include user behavior heat value, network status coefficient and device performance coefficient; The step of calculating the runtime environment quantization coefficient corresponding to the code block to be compiled based on the runtime environment data specifically includes: The runtime environment data of the client is collected; the runtime environment data includes user behavior data, network status data, and device performance data. Based on the user behavior data, the trigger frequency of the code block to be compiled within a preset time window is counted, and a user behavior heat value corresponding to the code block to be compiled is generated based on the trigger frequency. Based on the network status data, identify the network type currently accessed by the client, and match the corresponding network status coefficient according to the network type; Based on the device performance data, monitor the CPU utilization rate of the client, and determine the corresponding device performance coefficient based on the range of CPU utilization rate.
6. The intelligent compilation method for front-end JS code according to claim 4, characterized in that, The step of generating the compilation instruction sequence for the code block to be compiled based on the compilation priority information using a preset compilation scheduler specifically includes: The compiler uses a pre-defined compiler scheduler to read the list of dependencies to be compiled corresponding to the code block to be compiled. Based on the list of dependencies to be compiled, determine the dependency execution order between each code block to be compiled, and obtain the compilation priority score and corresponding compilation priority order of each code block to be compiled from the compilation priority information; Under the constraint of the dependent execution order, the plurality of code blocks to be compiled are arranged according to the compilation priority order to generate a sequence of compilation instructions for the code blocks to be compiled.
7. The intelligent compilation method for front-end JS code according to claim 2, characterized in that, When a change is detected in the source code of any of the code blocks to be compiled, the scope of the change is determined based on the dependencies between the changed code block and other code blocks to be compiled, specifically including: Monitor whether the source code of the code block to be compiled has been changed; When a change is detected in the source code of any of the code blocks to be compiled, the modified export signature corresponding to the modified code block is obtained, and the unmodified export signature corresponding to the modified code block is read from the code splitting index. The modified export signature is then compared with the unmodified export signature. If the comparison results are inconsistent, it is determined that the exported content of the modified code block has changed, and the change dependency list corresponding to the modified code block is read from the code split index; Based on the changed dependency list, a recursive traversal query is performed in the dependency graph to find the direct and indirect dependent code blocks corresponding to the changed code block, which are then used as the recompiled atomic code blocks covered by the scope of the change.
8. The intelligent compilation method for front-end JS code according to claim 7, characterized in that, The monitoring of whether the source code of the code block to be compiled has changed specifically includes: Monitor the version number of each code block to be compiled in the code split index. When the version number of any code block to be compiled is updated, it is determined that the source code of the corresponding code block to be compiled has changed. or, Monitor the source file directory of the front-end project. When the source file corresponding to any code block to be compiled is modified, it is determined that the source code of the corresponding code block to be compiled has changed. or, Receive code update notifications from version control tools and determine the atomic code blocks that have been changed based on the code update notifications.
9. A front-end-side intelligent JS code compilation device, characterized in that, include: At least one processor; as well as, A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, which, when executed by the at least one processor, enables the at least one processor to perform a front-end-side JS code intelligent compilation method as described in any one of claims 1 to 8.
10. A non-volatile computer storage medium storing computer-executable instructions, characterized in that, The computer-executable instructions are configured to execute a front-end-side JS code intelligent compilation method as described in any one of claims 1 to 8.