CN116431155A

CN116431155A - Front-end application construction method, medium, device and computing equipment

Info

Publication number: CN116431155A
Application number: CN202310223165.4A
Authority: CN
Inventors: 唐江洪
Original assignee: Hangzhou Netease Cloud Music Technology Co Ltd
Current assignee: Hangzhou Netease Cloud Music Technology Co Ltd
Priority date: 2023-03-03
Filing date: 2023-03-03
Publication date: 2023-07-14

Abstract

The embodiment of the disclosure provides a front-end application construction method, a medium, a device and a computing device, and relates to the technical field of computers, wherein the front-end application construction method comprises the following steps: responding to a loading instruction of an application page of a target front-end application, and acquiring a request message corresponding to the application page, wherein the request message comprises a source code module identifier corresponding to the application page; determining a target source code module corresponding to the application page from source code modules corresponding to the target front-end application according to the source code module identification; compiling a target source code module to obtain a module code corresponding to the target source code module; the module code is executed to render the application page. The method and the device can greatly improve the construction efficiency of the front-end application.

Description

Front-end application construction method, medium, device and computing equipment

Technical Field

Embodiments of the present disclosure relate to the field of computer technology, and more particularly, to a front-end application building method, medium, apparatus, and computing device.

Background

This section is intended to provide a background or context to the embodiments of the disclosure recited in the claims. The description herein is not admitted to be prior art by inclusion in this section.

With the development of front-end technology, the functions of the front-end application are increasingly abundant, and different user demands can be better met.

At present, when the front-end application is constructed, compiling construction of the front-end application can be carried out through a browser, and an executable packet corresponding to the front-end application is obtained, wherein the executable packet comprises a source code module and a dependent module which are related to each front-end application page; and then executing the executable package through a browser, and rendering a final front-end application page. However, the front-end application is built in the mode, and the building efficiency is low.

Disclosure of Invention

The disclosure provides a front-end application construction method, medium, device and computing equipment, which are used for solving the problem of low construction efficiency when the front-end application is constructed in the current mode.

In a first aspect of the embodiments of the present disclosure, a front-end application building method is provided, applied to a browser, where the front-end application building method includes:

responding to a loading instruction of an application page of a target front-end application, and acquiring a request message corresponding to the application page, wherein the request message comprises a source code module identifier corresponding to the application page;

determining a target source code module corresponding to the application page from source code modules corresponding to the target front-end application according to the source code module identification;

Compiling the target source code module to obtain a module code corresponding to the target source code module;

executing the module code to render the application page.

In a second aspect, an embodiment of the present disclosure provides a front-end application building apparatus, applied to a browser, including:

the acquisition module is used for responding to a loading instruction of an application page of the target front-end application and acquiring a request message corresponding to the application page, wherein the request message comprises a source code module identifier corresponding to the application page;

the determining module is used for determining a target source code module corresponding to the application page from source code modules corresponding to the target front-end application according to the source code module identification;

the compiling module is used for compiling the target source code module to obtain a module code corresponding to the target source code module;

and the execution module is used for executing the module code to render the application page.

In a third aspect, embodiments of the present disclosure provide a computing device comprising: a processor, a memory communicatively coupled to the processor;

the memory stores computer-executable instructions;

the processor executes the computer-executable instructions stored in the memory to implement the front-end application build method according to the first aspect of the present disclosure.

In a fourth aspect, an embodiment of the present disclosure provides a storage medium having stored therein computer program instructions that, when executed, implement a front-end application building method according to the first aspect of the present disclosure.

In a fifth aspect, embodiments of the present disclosure provide a computer program product comprising a computer program which, when executed by a processor, implements a front-end application building method according to the first aspect of the present disclosure.

According to the front-end application construction method, medium, device and computing equipment provided by the embodiment of the disclosure, a request message corresponding to an application page is obtained by responding to a loading instruction of the application page of the target front-end application, wherein the request message comprises a source code module identifier corresponding to the application page; determining a target source code module corresponding to the application page from source code modules corresponding to the target front-end application according to the source code module identification; compiling a target source code module to obtain a module code corresponding to the target source code module; the module code is executed to render the application page. According to the method and the device for constructing the front-end application, the source code module in the front-end application of the target is compiled as required, namely, only the source code module required by the current application page is compiled, so that the construction speed of the front-end application of the target is increased, a user can see the page effect faster, the real-time construction of the front-end application of the target in the browser according to the bundless mode is realized, and the construction efficiency of the front-end application can be greatly improved. In addition, the front-end application construction process is completely carried out in the browser, any server resources are not occupied, and the server resources can be effectively saved.

Drawings

The above, as well as additional purposes, features, and advantages of exemplary embodiments of the present disclosure will become readily apparent from the following detailed description when read in conjunction with the accompanying drawings. Several embodiments of the present disclosure are illustrated by way of example, and not by way of limitation, in the figures of the accompanying drawings, in which:

FIG. 1 is a schematic diagram of a sandbox according to an embodiment of the disclosure;

fig. 2 is a schematic view of an application scenario provided in an embodiment of the present disclosure;

FIG. 3 is a flowchart of a method for front end application construction according to an embodiment of the present disclosure;

FIG. 4 is a schematic diagram of front-end application building based on a wrapper approach according to an embodiment of the present disclosure;

FIG. 5 is a schematic diagram of front-end application building based on a native ESM approach according to an embodiment of the present disclosure;

FIG. 6 is a flow chart of a method for front end application build provided in another embodiment of the present disclosure;

FIG. 7 is a schematic structural diagram of a front-end application building apparatus according to an embodiment of the present disclosure;

FIG. 8 is a schematic diagram of a storage medium according to an embodiment of the disclosure;

fig. 9 is a schematic structural diagram of a computing device according to an embodiment of the present disclosure.

In the drawings, the same or corresponding reference numerals indicate the same or corresponding parts.

Detailed Description

The principles and spirit of the present disclosure will be described below with reference to several exemplary embodiments. It should be understood that these embodiments are presented merely to enable one skilled in the art to better understand and practice the present disclosure and are not intended to limit the scope of the present disclosure in any way. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

Those skilled in the art will appreciate that embodiments of the present disclosure may be implemented as a system, apparatus, device, method, or computer program product. Accordingly, the present disclosure may be embodied in the following forms, namely: complete hardware, complete software (including firmware, resident software, micro-code, etc.), or a combination of hardware and software. The data to which the present disclosure relates may be data authorized by a user or sufficiently authorized by parties, and the embodiments/examples of the present disclosure may be combined with each other.

According to an embodiment of the disclosure, a front-end application construction method, medium, device and computing equipment are provided.

In this context, it is to be understood that the terms involved:

Sandboxes, which are isolated environments provided for program execution, are mainly referred to in this disclosure as environments in which a complete application code can be run;

the main thread is used for the browser to process user events, page drawing and the like; by default, the browser runs all JavaScript (a lightweight, interpreted or just-in-time programming language with function priority) scripts in a page in a main thread, and presents layout, reflow and garbage collection;

a background thread (Web workbench), which is a background thread in a browser that can run independently of a main thread, and can run arbitrary code except that some methods and attributes in document object model (Document Object Model, DOM) elements or using window (window) objects cannot be directly manipulated in the Web workbench thread; the presence of Web Worker threads has the meaning that time consuming processing tasks can be performed in separate threads, allowing the main thread, which is typically a User Interface (UI) thread, not to be blocked/slowed down thereby;

an event-driven Web Worker thread (Service Worker), which is an event-driven Web Worker thread registered under a specified source and path; the Service Worker adopts JavaScript to control the associated page, intercepts and modifies the page access and resource request, and caches the resource in fine granularity; the Service Worker essentially acts as a proxy server between the Web application, browser, and the network (when available); the Service Worker intercepts the network request and updates the resources from the server according to whether the network is available to take appropriate action; the method and the device mainly use the function of intercepting the page request by the Service workbench;

A hypertext markup language (Hyper Text Markup Language, HTML) element (iframe), which is an HTML element for containing other HTML documents; specifying an iframe element through an iframe mark; the iframe can be placed anywhere in the HTML document and thus anywhere on the web page;

a broadcast channel (Broadcast Channel), which is a browser communication technology; the BroadcastChannel interface brokers a named channel that can be subscribed to by any browsing context under a specified source (origin); which allows communication between different browser windows, tab pages or different documents under an iframe of the same source; by triggering a message event, a message may be broadcast to all BroadcastChannel objects listening to the channel;

cache Storage (Cache Storage), which is a Storage technology of a browser and is mainly used for caching requests; the CacheStorage interface represents storage of a Cache object; the Cache Storage provides a Service Worker, other types of threads (Worker) or a main directory of all named caches which can be accessed in a window range, and maintains a mapping from a character string name to a corresponding Cache object;

Node (namely Node. Js, a JavaScript running environment) package manager (Node Package Manager, NPM) is a package management and distribution tool of Node. Js, and has become an unofficial standard for releasing Node modules (packages);

CommonJS is a JavaScript modular scheme, each file is a module, and has independent scope, variable, method and the like, and is invisible to other modules; the JavaScript modularization scheme also comprises modularization schemes such as asynchronous module definition (Asynchronous Module Definition, AMD) and universal module definition (Universal Module Definition, UMD);

a standardized module system (EcmaScript Modules, ESM) of the authority of JavaScript, in which the module function is realized on the level of the language standard in the ES6 (i.e. the next generation standard of JavaScript language) version of JavaScript, and the realization is quite simple, and can completely replace the modular schemes of common js and AMD, thus becoming a universal module solution for browsers and servers; the design idea of the ES6 module is to make the ES6 module static as much as possible, so that the dependence of the module and the input and output variables can be determined during compiling;

unpacking (unpacking), namely removing the packing process, analyzing the portals by utilizing the browser based on the ESM import statement (portals) characteristics of the original browser, compiling and returning on demand at the server, completely skipping the concept of packing, and enabling the server to be used at any time;

esm.sh is a service that converts all modules in the NPM package into modules using ESM, and then distributes content; since the JavaScript official modularization standard is proposed later, there are many modularized NPM packages using common js, etc., if the front-end project is constructed with bundless, and the NPM packages are used, then an esm.sh-like service is required to modularly convert the used NPM packages;

webpack is a static module packaging tool for JavaScript applications; when weback processes an application, a dependency graph (dependency graph) is built internally from one or more entry points, and then each module required in the project is combined into one or more packages (bundles), which are all static resources for displaying corresponding content;

vite is a novel front-end construction tool, and can remarkably improve front-end development experience; as a building tool based on the original ESM of the browser, vite omits the packaging process of the development environment, utilizes the browser to analyze the portals, and compiles and returns the portals on demand at the server; meanwhile, the development environment has a module hot update which is surprisingly fast, and the hot update speed is not slowed along with the increase of the modules; therefore, development using Vite is at least about 10 times faster than weback in development efficiency;

CodeSandbox, an online code editor, focuses mainly on creating Web projects; the project code building and executing modes mainly comprise a Browser Sandbox (Browser Sandbox) mode and a Cloud Sandbox (Cloud Sandbox) mode, namely in a Browser and a Cloud host respectively.

Furthermore, any number of elements in the figures is for illustration and not limitation, and any naming is used for distinction only and not for any limiting sense.

It should be noted that, the user information (including, but not limited to, user equipment information, user personal information, etc.) and the data (including, but not limited to, data for analysis, stored data, presented data, etc.) related to the present disclosure are information and data authorized by the user or sufficiently authorized by each party, and the collection, use and processing of the related data need to comply with the related laws and regulations and standards of the related country and region, and be provided with corresponding operation entries for the user to select authorization or rejection.

The principles and spirit of the present disclosure are explained in detail below with reference to several representative embodiments thereof.

Summary of The Invention

The inventor discovers that at present, when the front-end application is constructed, compiling construction of the front-end application can be carried out through a browser to obtain an executable packet corresponding to the front-end application, wherein the executable packet comprises a source code module and a dependent module which are related to each front-end application page; and then executing the executable package through a browser, and rendering a final front-end application page. The above manner of constructing the front-end application can be understood as a browser-end sandbox mode, and the application generated by the browser-end template (Browser Templates) of CodeSandbox is constructed by using the browser-end sandbox mode. Specifically, codeSandbox may be understood as a simplified version of weback running in a browser, and fig. 1 is a schematic structural diagram of a sandbox provided in an embodiment of the present disclosure, where, as shown in fig. 1, the structural diagram of the entire sandbox mainly includes two parts: online Packager (Bundler) and NPM Packager (Packager) services. The user (such as a certain platform) only needs to refer to the packaged Sandbox component, an iframe label is built in the component to load the deployed Sandbox page, and JavaScript code in the page is the core part of the Sandbox, namely the online Bundler. The concrete sandbox construction process comprises the following steps:

S101, the Sandbox component transfers a compiling (command) instruction containing source code of the front-end application to be built to an online Bundler in the iframe through a postMessage (namely a common function in a Windows application program interface), and the online Bundler starts to build the application after receiving the command instruction.

S102, the online Bundler sends a request message to the NPM packaging service, wherein the request message is used for acquiring NPM dependent content of the front-end application to be constructed. Accordingly, the NPM wrapper service receives the request message.

And S103, the NPM packaging service sends the NPM dependent content of the front-end application to be constructed to the online Bundler. Accordingly, the online Bundler receives the NPM dependent content.

S104, compiling a source code from an entry file of the front-end application to be constructed, analyzing an abstract syntax tree (Abstract Syntax Tree, AST), finding out a lower-level dependency module, and performing recursion compiling to finally form a dependency graph, wherein the mutual reference among the modules conforms to the CommonJS specification.

S105, starting from an entry file of the front-end application to be constructed, executing the entry file by using an eval (execution function for executing the compiled code) function, and if a required (for calling a dependent module) function is called in the execution process, recursively relying on the eval module to obtain a rendered application page.

And S106, the online Bundler sends a notification message to the Sandbox component, wherein the notification message is used for indicating that the rendering of the application page of the front-end application to be constructed is completed.

However, the front-end application is built in the above manner, and the build time becomes longer as the size of the front-end application increases. Specifically, since the above manner simulates a simplified version of weback in the browser, the bottom layer packages the front-end resources in a common js modularized manner, and the CodeSandbox recursively compiles and executes all the referenced modules through the portal file of the front-end application, as the size of the front-end application is built becomes larger, the number of modules involved increases, the overall build time increases, and the build efficiency is lower.

In addition, in the related art, real-time construction for general-purpose applications may employ a Cloud Sandbox (Cloud Sandbox) mode. Specifically, a code running environment is initialized in a server, such as a Docker (a containerized deployment scheme) or a micro virtual machine (micro Virtual Machine, micro vm); then, copying the code of the application to be constructed from a designated position into the running environment, and installing the dependency, wherein the designated position is a certain git (an open-source distributed version control system) code warehouse; and finally, executing a construction command to construct the application to be constructed. The cloud sandbox mode has no specific requirements on programming languages and the like adopted by the application, and is completely equivalent to a local environment. Currently, the application of Cloud Templates (Cloud Templates) generation of CodeSandbox is constructed by adopting a Cloud sandbox mode. However, the above related art has the following disadvantages: (1) The occupied server resources are more, and because the codes are finally operated in the server in the cloud sandbox mode, the more the constructed application codes are, the more the occupied server resources are; (2) The first construction time is long, and the code running environment needs to be initialized in the server when the application code is first constructed, so that the first construction process is time-consuming, and the second construction time can be optimized in a container keep-alive/file caching mode and the like.

Based on the above problems, the present disclosure provides a method, medium, device and computing device for constructing a front-end application, by modifying open source schemes such as Vite, esm.sh, and combining with browser technologies such as Web workbench, service workbench, broadcast Channel, cache Storage and iframe, the method and device for constructing the front-end application in real time according to a bundle mode in the browser, that is, on-demand compiling of modules in the front-end application is realized, only modules required by compiling a current page are required, so that the construction speed of the front-end application is increased, a user can see a page effect more quickly, and the construction efficiency of the front-end application can be greatly improved.

Application scene overview

An application scenario of the solution provided in the present disclosure is first illustrated with reference to fig. 2. Fig. 2 is a schematic diagram of an application scenario provided by an embodiment of the present disclosure, as shown in fig. 2, in the application scenario, a user accesses a low-code development platform through a terminal 201, and performs development of a front-end application in the low-code development platform by a dragging manner. The terminal 201 may be a tablet computer, a notebook computer, a desktop computer, etc., and the terminal 201 is illustrated in fig. 2 as a notebook computer. In the process of developing the front-end application, the user modifies the code corresponding to a certain application page in the front-end application, and can immediately and intuitively check the application page effect corresponding to the modified code through the browser displayed on the display screen 202 connected with the terminal 201.

It should be noted that fig. 2 is only a schematic diagram of an application scenario provided by the embodiment of the present disclosure, and the embodiment of the present disclosure does not limit the apparatus included in fig. 2.

Exemplary method

A method for front-end application construction according to an exemplary embodiment of the present disclosure is described below with reference to fig. 3 in conjunction with the application scenario of fig. 2. It should be noted that the above application scenario is only shown for the convenience of understanding the spirit and principles of the present disclosure, and the embodiments of the present disclosure are not limited in any way in this respect. Rather, embodiments of the present disclosure may be applied to any scenario where applicable.

First, a front-end application construction method is described by way of specific embodiments.

Fig. 3 is a flowchart of a front-end application construction method according to an embodiment of the present disclosure, which is applied to a browser. As shown in fig. 3, the method of the embodiment of the present disclosure includes:

s301, responding to a loading instruction of an application page of a target front-end application, and acquiring a request message corresponding to the application page, wherein the request message comprises a source code module identifier corresponding to the application page.

In the embodiment of the disclosure, the loading instruction of the application page facing the target front-end application is triggered when the application page of the target front-end application is loaded by the iframe tag, for example, the loading instruction corresponds to a request message, so that the request message corresponding to the application page can be obtained, and the request message is "http:// xxx/preview/index. Html". It should be noted that, since the application page of the target front-end application to be built is loaded by the iframe tag, only the response processing needs to be performed on the request message from the application page in the iframe tag.

S302, determining a target source code module corresponding to the application page from source code modules corresponding to the target front-end application according to the source code module identification.

Illustratively, at the start of the sandbox, a source code module corresponding to the target front-end application may be obtained from the development server. In the step, after the request message corresponding to the application page is obtained, the request message can be analyzed to obtain the source code module identifier in the request message, and then the target source code module corresponding to the application page can be determined from the source code modules corresponding to the target front-end application according to the source code module identifier.

S303, compiling the target source code module to obtain a module code corresponding to the target source code module.

In the step, after determining the target source code module, compiling the target source code module to obtain a module code corresponding to the target source code module, and converting the module code into a Response (Response) object to be stored in the Cache Storage, so that the browser obtains the module code from the Cache Storage.

S304, executing the module code to render the application page.

Illustratively, the browser fetches the Response object containing the compiled module code from the Cache Storage, returns the Response to the application page in the iframe tag as a Response to the request message, and executes the module code to render the application page. It can be appreciated that, with the execution of the module code compiled by the source code module in the target front-end application, the application page of the target front-end application is rendered in the iframe.

According to the front-end application construction method provided by the embodiment of the disclosure, a request message corresponding to an application page is obtained by responding to a loading instruction of the application page of the target front-end application, wherein the request message comprises a source code module identifier corresponding to the application page; determining a target source code module corresponding to the application page from source code modules corresponding to the target front-end application according to the source code module identification; compiling a target source code module to obtain a module code corresponding to the target source code module; the module code is executed to render the application page. According to the method and the device for constructing the front-end application, the source code module in the front-end application is compiled as required, namely, only the source code module required by the current application page is compiled, so that the construction speed of the front-end application is increased, a user can see the page effect faster, the real-time construction of the front-end application in the browser according to the bundless mode is realized, and the construction efficiency of the front-end application can be greatly improved. In addition, the front-end application construction process is completely carried out in the browser, any server resources are not occupied, and the server resources can be effectively saved.

Based on the above embodiment, in one possible implementation, the browser includes Vite, which runs a specified Web workbench thread in the browser page. In order to more clearly understand how to apply Vite to the front-end application construction method provided by the embodiments of the present disclosure, first, a basic principle of Vite and how to modify Vite to operate in a browser are described briefly, which is specifically as follows:

1. Basic principle of Vite

The Vite is a novel front-end construction tool, and front-end development experience can be remarkably improved. Vite is used as a building tool based on the original ESM of the browser, the packaging process of the development environment is omitted, the browser is utilized to analyze the portals, and compiling and returning are carried out on the server side as required. Meanwhile, the development environment has extremely fast module hot update, and the hot update speed is not slowed down with the increase of the modules.

Currently, when a development server is cold started, the wrapper-based mode of starting must first grab and build the entire application before it can provide service. Specifically, fig. 4 is a schematic diagram of front-end application construction based on a wrapper mode provided by an embodiment of the present disclosure, as shown in fig. 4, a browser sends a hypertext transfer protocol (Hyper Text Transfer Protocol, HTTP) request to a development server, after the development server receives the HTTP request, from an entry file of a front-end application to be constructed, the development server compiles and wraps each module (i.e., module 1, module 2, module 3, module 4, … …, module m) corresponding to each application page (i.e., application page 1, application page 2, … …, application page n) of the front-end application to be constructed, when the packaging is completed, the development server is ready, and returns a package product corresponding to the front-end application to be constructed to the browser, where the browser displays the corresponding application page.

And the Vite improves the starting time of the development server by dividing the modules in the front-end application into two types of dependence and source codes. Wherein (1) most of dependencies are pure JavaScript which is not changed during development, and some larger dependencies (such as component libraries of hundreds of modules) are very costly to process, and the dependencies usually exist in various modularized formats (such as ESM or CommonJS); vit pre-builds dependencies using esbuild (a weback-like build tool), which is written in go language and 10-100 times faster than wrapper pre-build dependencies written in JavaScript; (2) Source code, which usually contains some files that are not JavaScript directly, need to be converted, such as JSX (syntax extension of a JavaScript), cascading style sheets (Cascading Style Sheets, CSS) or Vue (a set of progressive frames that construct a user interface) components/Svelte (a pure JavaScript front-end frame that can compile source code into no dependencies), and so on, and are often edited; meanwhile, not all source codes need to be loaded at the same time; vite provides source code in a native ESM fashion, which is actually part of the job that lets the browser take over the wrapper: the Vite only needs to convert when the browser requests the source codes and provide the source codes as required, and dynamically imports the codes according to the scene, namely, the codes can be processed only when actually used on the current screen. Based on fig. 4, fig. 5 is a schematic diagram of front-end application construction based on a native ESM manner provided by an embodiment of the present disclosure, as shown in fig. 5, a development server is ready, and determines a module (i.e., a module 1, a module 2, and a module 3 in fig. 5) corresponding to a current application page (such as an application page 1 in fig. 5) from an entry file of the front-end application to be constructed in response to an HTTP request of an application page facing the front-end application to be constructed, that is, splitting a code of the front-end application to be constructed, and only compiling a module required by the current application page to obtain a module code corresponding to the module; and executing the module code, namely rendering the current application page. And the like, for the application page 2, only the compiling module 3 and the compiling module 4 are needed, and for the application page n, only the compiling module m is needed, so that the dynamic importing of codes is realized. Compared with the construction process of the front-end application based on the packer mode shown in fig. 4, the construction process of the front-end application shown in fig. 5 does not need packing, and can effectively improve the construction efficiency of the front-end application.

2. Modification of Vite

In order to make Vite run in the browser, the modification to Vite mainly includes the following functional points:

(1) Node native module used by Vite

Vite is a Node application in which many Node native modules are used, such as file system modules (fs) or path modules (path), etc., which are not present in the browser. For this embodiment of the present disclosure, in the process of packing the Vite source code by using weback, the Node native module is replaced with a corresponding browser polyfill package (i.e., code for implementing a native application program interface that is not supported by the browser), for example, the Node native module path is replaced with a path-browse service (i.e., a package that supports running by the browser). Some Node native modules and corresponding application program interfaces (Application Programming Interface, APIs) provided by the browser polyfill package are not completely consistent, for example, the native modules url of the Node and the APIs provided by the corresponding polyfill package Node-url are not completely consistent, so that secondary packaging is required on the basis of the Node-url package to ensure that the APIs provided by the browser polyfill package and the APIs of the corresponding native modules are completely consistent.

(2) File system for Vite

When the Vite builds the front-end application, the file system is required to read and write the file. However, due to security issues, the browser cannot directly operate the disk file system of the user computer, and instead of this, the memory file system implemented by memfs is used in the embodiments of the present disclosure. The API provided by memfs is basically consistent with the native fs module of the Node.

(3) Stripping Vite dependent pre-build functionality

When the Vite is started, the dependence pre-construction is carried out, namely, the front-end application dependence module in the Node native module (node_modules) is converted and packaged according to the ESM modularized format by using the esbuild, and the processing result is stored in the Vite catalog under the node_modules so as to be reused in the subsequent front-end application construction process, thereby improving the secondary construction speed. Thus, the dependence pre-construction process of Vite depends on node_modules.

Although in the above embodiments, it is mentioned that the embodiments of the present disclosure use a memfs-implemented memory file system, since the node_modules of the front-end application are generally very large in size, writing the complete node_modules into the memory occupies very much memory. Thus, embodiments of the present disclosure strip the Vite's dependency pre-build function and migrate the packaging of dependencies into the server, specifically through the esm. Sh service. The esm.sh service is a service for converting all modules in the NPM package in an ESM modularized manner and then distributing content, wherein the most core dependent processing is also realized through esbuild. The esm.sh service is an open source item implemented in the go language with a repository address https:// gitsub.com/ije/esm.sh. In particular, the method comprises the steps of,

The optimization process of the user-defined Vite is that when the bare module of the NPM package is imported in the Vite parsing module, for example, when the execution statement of 'import React from' act '"is parsed, the Vite parsing module replaces the bare module with' import React from 'https:// esm.sh/react@17.0.2'". The browser, upon parsing to the import portion, initiates an HTTP request "HTTPs:// esm. Sh/react@17.0.2". After receiving the request, the esm.sh service converts the modules in the reaction package according to ESM modularization and returns the modules to the page in the browser. Since esm.sh service has a cache policy, and most of the dependencies in front-end application are basically the same, the last conversion result can be quickly obtained from the cache and returned directly, and the process of the dependency processing is skipped. In the actual operation of the sandbox, it may be determined that the dependent processing phase is very fast and does not take too much time for the entire front-end application build process. The problems encountered during the specific use of the esm.sh service and the corresponding solutions are described in detail below.

First, for the processing of private NPM packages, many companies have private NPM sources to store internal NPM packages, and esm.sh services cannot obtain such NPM packages. Since the esm.sh service downloads the NPM package through the yarn (a universal resource management system) and then performs the following related processing, the esm.sh service only needs to be deployed to the intranet environment of the company, so that the esm.sh service can be downloaded to the internal NPM package through the yarn.

Secondly, if the esm.sh service does not package the processing result of the NPM packet, the problem of requesting the waterfall flow may be triggered, which results in that the whole sandbox construction process sends thousands of hundreds of requests, and seriously blocks the construction process. For example, when "https:// esm.sh/antd@5.2.0" is requested, only the content of the ant (a Java-based build tool) package itself is actually returned, but the ant depends on many other NPM packages, thus triggering many additional requests, resulting in a very slow overall build process, where the ant is a compact (JavaScript library for building User interfaces) User Interface (UI) component library based on the ant design architecture. In this regard, the anti packet and the content of the NPM packet depending on the anti packet are uniformly packed and then returned, and a bundle parameter, such as 'https:// esm.sh/antd@5.2.0bundle', can be added after the esm.sh request address. The esm.sh service can transmit the bundle parameters to the internal esbundle, and the esbundle is packaged after the NPM module is converted and is output after the packaging is completed.

Finally, for the case that multiple NPM packages depend on the same NPM package, for example, many UI packages depend on the reaction package, if the reaction package is packaged into each NPM package, the constructed page executes multiple reaction package codes to cause error reporting. For example, many UI packages also rely on a relatively large library of components, such as an add, which can result in a very time consuming packaging process if each UI package packages an add, and a larger packaging product, ultimately affecting the dependent loading speed, resulting in a slower speed of sandboxed building applications. In addition, some NPM packets have side effects, for example, when some variables are globally initialized, multiple load execution may also cause repeated initialization of the variables, and previous assignment loss. In contrast, the Vite running in the Node environment independently extracts and packs the common dependencies in the dependency pre-construction stage. While the embodiment of the present disclosure employs appending an external parameter after an esm.sh request, e.g., "https:// esm.sh/reaction-tables-employes@1.0.0bundle & external=add". The esm.sh service passes the "external=anti" parameter to the internal esbuild, which ignores the anti dependence when packaged, and still retains the original reference, e.g., "import x as k from 'anti'; ".

The browser-provided import map (import maps) technique is then re-utilized, which allows the developer to control the uniform resource locator (Uniform Resource Locator, URL) of the library obtained by the import statement or the import () expression of JavaScript, so that the reference to the anti component library can be directed to the esm.

(4) Replacement of HTTP servers by Service workbench

When building a front-end application, vite needs to use an HTTP server to process and respond to requests from the browser page. For example, after a page in a browser initiates an HTTP request "http:// xxx/xxx/A.js", the Vite receives the request in a server, locates to a corresponding module in source code and compiles the module, and finally transcodes the compiled module into a Response object and returns the Response object to the page in the browser. However, the HTTP server cannot be run in the browser, so in the embodiment of the disclosure, the server workbench technology of the browser is adopted to simulate an HTTP server, and the server workbench technology can intercept and modify page access and resource requests, and essentially acts as a proxy server among the Web application, the browser and the network. Specifically, a Web Worker thread is used for running Vite, then a Service Worker is registered, a page request is intercepted by the Service Worker, and request information is forwarded to Vite running in the Web Worker; the Vite determines a corresponding module according to the request information and compiles the corresponding module, then the compiled module code is returned to the Service Worker, and the Service Worker returns the compiled module code to the page as a request response.

Fig. 6 is a flowchart of a front-end application building method according to another embodiment of the present disclosure. Based on the above embodiments, the embodiments of the present disclosure further describe a front-end application building method based on the Vite and Service Worker included in the browser. The file system used by the Vite is memfs; the Service workbench is used for proxy browser pages. As shown in fig. 6, a method of an embodiment of the present disclosure may include:

s601, initializing a Web workbench thread for running Vite; receiving source codes applied by a target front end; initializing and registering a Service workbench thread; an iframe tag is created to load an application page of the target front-end application.

Illustratively, when the sandbox is started, initializing a Web workbench thread (i.e. a Vite workbench thread) running Vite, wherein the Vite workbench thread receives source codes of a target front-end application sent by a development server; initializing and registering a Service workbench thread for intercepting a page request to simulate an HTTP server used by a Vite in a Node environment, wherein the initialization of the Service workbench thread and the initialization of the Vite workbench thread have no dependency relationship and can be performed simultaneously; after the Service workbench thread is successfully registered, an iframe label is created to load an application page of the target front-end application. The page URL setting of the iframe tag needs to add a special pre-path, for example, "< iframe src= '/preview/index. Html'/>", so as to distinguish whether the page request is from a main page or an iframe tag loaded page when the Service workbench thread intercepts the page request; because the application page of the target front-end application to be constructed is loaded by the iframe tag, response processing is only needed to be carried out on the request message from the application page in the iframe tag.

This step can be understood as the preparation phase at start-up of the sandbox.

In an embodiment of the present disclosure, step S301 in fig. 3 may further include the following step S602:

s602, responding to a loading instruction of an application page of the target front-end application, and acquiring a request message corresponding to the application page through a Service workbench, wherein the request message comprises a source code module identifier corresponding to the application page.

For example, when the application page of the target front-end application is loaded by the iframe tag, the loading instruction of the application page of the target front-end application is triggered, for example, and the Service workbench is used for intercepting the page request, the Service workbench can acquire (i.e. intercept) the request message corresponding to the application page, and the request message is "http:// xxx/preview/index.

S603, the Service workbench sends the request message to the Vite in a broadcast mode. Accordingly, vite receives the request message.

For example, after the request message corresponding to the application page is obtained through the Service workbench, the request message includes, for example, a request URL, a request header field, and the like, and the request message may be sent to the Vite workbench thread in a broadcast manner through the Service workbench, that is, the request message is sent to the Vite workbench thread through Broadcast Channel. Accordingly, the Vite Worker thread receives the request message.

In an embodiment of the present disclosure, step S302 in fig. 3 may further include the following step S604:

s604, determining a target source code module corresponding to the application page from source code modules corresponding to the target front-end application through Vite according to the source code module identification.

For example, the Vite workbench thread may determine, from source code modules corresponding to the target front-end application, a target source code module corresponding to the application page for on-demand compilation according to the source code module identification in the request message.

In an embodiment of the present disclosure, step S303 in fig. 3 may further include step S605 as follows:

s605, compiling the target source code module through the Vite to obtain a module code corresponding to the target source code module, storing the module code in a cache, and sending a notification message to the Service Worker.

After determining the target source code module, the Vite Worker thread compiles the target source code module to obtain a module code corresponding to the target source code module, converts the module code into a Response object, stores the Response object in a Cache Storage, and sends a notification message to the Service Worker, wherein the notification message is used for notifying the Service Worker that the compiling of the target source code module is completed.

S606, receiving a notification message sent by the Vite through the Service workbench, wherein the notification message is used for indicating the compiling completion of the target source code module.

S607, obtaining the module code from the cache through the Service workbench.

Illustratively, after receiving a notification message that the compiling of the target source code module by the Vite workbench thread is completed, the Service workbench fetches a Response object containing the compiled module code from the Cache Storage, and returns the Response to the page in the iframe tag as a Response of the request message, so that the compiled module code is executed in the browser.

S608, the browser executes the module code to render the application page.

Illustratively, when the http:// xxx/preview/A.js request is processed, the Vite workbench thread first determines a target source code module A.js from source code modules corresponding to the target front-end application, then compiles the target source code module A.js through tools such as a babel (JavaScript compiler) or an esbuild, and returns the compiled module code to the browser. When the browser executes the module code compiled by the target source code module A.js, if other modules are referenced in an ESM report mode, such as ' report { foo } from ' B.js ', an HTTP request http:// xxx/preview/B.js of the module B.js is sent; then, intercepting the HTTP request through the Service workbench, sending the HTTP request to the Vite workbench thread for processing, and returning the HTTP request; all modules in the final front-end application are compiled and executed, i.e. the entire front-end application is built.

Optionally, the target front-end application includes a dependency module, and executing the module code may include: when the browser executes the module code, if the module code is determined to depend on the dependent code corresponding to the dependent module, the dependent code is obtained through an esm.sh service, the dependent code is executed, and the esm.sh service is used for converting and packaging the dependent module according to an ESM modularized format to obtain the dependent code and storing the dependent code in a cache.

Illustratively, the dependent modules are, for example, modules in an NPM package. All modules in the NPM package can be converted and packaged in an ESM modular manner through esm.sh service, and then. For example, when the browser parses the import portion, it initiates an HTTP request "HTTPs:// esm.sh/react@17.0.2bundle", and after receiving the request, the esm.sh service converts the modules in the reaction package according to ESM modularization and then returns to the page in the browser. The execution step of this example may be performed simultaneously with the steps S606 to S608 described above.

It can be appreciated that, with the execution of the source code module compiled module code and NPM dependent code in the target front-end application, the application page of the target front-end application is finally rendered in the iframe.

The above steps S602 to S608 can be understood as the sandboxed construction phase.

According to the front-end application construction method provided by the embodiment of the disclosure, a request message corresponding to an application page is obtained through a Service Worker in response to a loading instruction of the application page of the target front-end application, and the request message comprises a source code module identifier corresponding to the application page; the Service workbench sends the request message to the Vite in a broadcasting mode; the Vite determines a target source code module corresponding to the application page from source code modules corresponding to the target front-end application according to the source code module identification, compiles the target source code module to obtain a module code corresponding to the target source code module, stores the module code in a cache, and sends a notification message for indicating the completion of compiling the target source code module to the Service Worker; the Service workbench acquires the module codes from the cache, so that the browser executes the module codes and renders the application page. According to the embodiment of the invention, the Vite running in the browser is combined with browser technologies such as Service workbench and the like, and the source code module in the target front-end application is compiled as required, namely, only the source code module required by the current application page is compiled, so that the construction speed of the target front-end application is accelerated, the user can see the page effect faster, the real-time construction of the target front-end application in the browser according to the bundling mode is realized, and the process of initializing the code running environment in the server is not performed, so that the construction efficiency of the front-end application can be greatly improved. In addition, the front-end application construction process is completely carried out in the browser, any server resources are not occupied, and the server resources can be effectively saved.

Exemplary apparatus

Having described the medium of the exemplary embodiments of the present disclosure, next, a front-end application build apparatus of the exemplary embodiments of the present disclosure will be described with reference to fig. 7. The device of the exemplary embodiment of the disclosure can realize each process in the foregoing front-end application construction method embodiment and achieve the same functions and effects.

Fig. 7 is a schematic structural diagram of a front-end application building apparatus according to an embodiment of the present disclosure, which is applied to a browser. As shown in fig. 7, a front-end application building apparatus 700 of an embodiment of the present disclosure includes: an acquisition module 701, a determination module 702, a compiling module 703 and an execution module 704. Wherein:

the obtaining module 701 is configured to obtain, in response to a load instruction of an application page of a target front-end application, a request message corresponding to the application page, where the request message includes a source code module identifier corresponding to the application page.

And the determining module 702 is configured to determine, according to the source code module identifier, a target source code module corresponding to the application page from source code modules corresponding to the target front-end application.

And the compiling module 703 is configured to compile the target source code module to obtain a module code corresponding to the target source code module.

And an execution module 704, configured to execute the module code to render the application page.

In a possible implementation manner, the browser includes a Vite, the Vite uses a native module with a corresponding function in the browser, a file system used by the Vite is a memory file system memfs, and the determining module 702 may specifically be configured to: and determining a target source code module corresponding to the application page from source code modules corresponding to the target front-end application through the Vite according to the source code module identification.

In one possible implementation, the compiling module 703 may be specifically configured to: and compiling the target source code module through the Vite to obtain a module code corresponding to the target source code module, and storing the module code in a cache.

In one possible implementation manner, the browser includes a Service workbench, where the Service workbench is used for proxy browser pages, and the obtaining module 701 may specifically be configured to: and acquiring the request message corresponding to the application page through the Service workbench.

In a possible implementation manner, the front-end application construction device 700 further includes a sending module 705, configured to send, by the Service Worker, the request message corresponding to the application page to the Vite in a broadcast manner after the obtaining module 701 obtains the request message by the Service Worker.

In a possible implementation manner, the front-end application construction device 700 further includes a processing module 706, configured to, after the compiling module 703 compiles the target source code module through the Vite, obtain a module code corresponding to the target source code module, and store the module code in a cache, receive, through the Service Worker, a notification message sent by the Vite, where the notification message is used to indicate that the compiling of the target source code module is completed; and acquiring the module code from the cache through the Service workbench so that the browser executes the module code.

In one possible implementation, the target front-end application includes a dependency module, and the execution module 704 may be specifically configured to: when the browser executes the module code, if the module code is determined to depend on the dependent code corresponding to the dependent module, the dependent code is obtained through an esm.sh service, and the dependent code is executed, and the esm.sh service is used for converting and packaging the dependent module according to an ESM modularized format, so that the dependent code is obtained, and the dependent code is stored in a cache.

In a possible implementation manner, the front-end application construction device 700 further includes an initializing module 707, configured to initialize a Web workbench thread running the Vite before the acquiring module 701 acquires the request message corresponding to the application page; receiving source codes of the target front-end application; initializing and registering a Service workbench thread; and creating an iframe tag to load an application page of the target front-end application.

The device of the embodiment of the disclosure may be used to execute the scheme of the front-end application construction method in any of the above method embodiments, and its implementation principle and technical effects are similar, and are not repeated here.

Exemplary Medium

Having described the method of the exemplary embodiments of the present disclosure, next, a storage medium of the exemplary embodiments of the present disclosure will be described with reference to fig. 8.

Fig. 8 is a schematic diagram of a storage medium according to an embodiment of the disclosure. Referring to fig. 8, a storage medium 800, in which a program product for implementing the above-described method according to an embodiment of the present disclosure is stored, may employ a portable compact disc read only memory (CD-ROM) and include program code, and may be run on a terminal device such as a personal computer. However, the program product of the present disclosure is not limited thereto.

The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium would include the following: an electrical connection having one or more wires, a portable disk, a hard disk, random Access Memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

The readable signal medium may include a data signal propagated in baseband or as part of a carrier wave with readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. The readable signal medium may also be any readable medium other than a readable storage medium.

Program code for carrying out operations of the present disclosure may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C++ or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, partly on a remote computing device, or entirely on the remote computing device or server. In the context of remote computing devices, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN).

Exemplary computing device

Having described the methods, media, and apparatus of exemplary embodiments of the present disclosure, a computing device of exemplary embodiments of the present disclosure is next described with reference to fig. 9.

The computing device 900 shown in fig. 9 is merely an example and should not be taken as limiting the functionality and scope of use of embodiments of the present disclosure.

Fig. 9 is a schematic structural diagram of a computing device according to an embodiment of the disclosure, and as shown in fig. 9, the computing device 900 is in the form of a general-purpose computing device. Components of computing device 900 may include, but are not limited to: the at least one processing unit 901, the at least one storage unit 902, and a bus 903 connecting different system components (including the processing unit 901 and the storage unit 902). For example, the processing unit 901 may be specifically a processor, the storage unit 902 stores computer-executable instructions, and the processing unit 901 executes the computer-executable instructions stored in the storage unit 902 to implement the front-end application building method described above.

Bus 903 includes a data bus, a control bus, and an address bus.

The storage unit 902 may include readable media in the form of volatile memory, such as Random Access Memory (RAM) 9021 and/or cache memory 9022, and may further include readable media in the form of non-volatile memory, such as Read Only Memory (ROM) 9023.

The storage unit 902 may also include a program/utility 9025 having a set (at least one) of program modules 9024, such program modules 9024 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, each or some combination of which may include an implementation of a network environment.

Computing device 900 can also communicate with one or more external devices 904 (e.g., keyboard, pointing device, etc.). Such communication may occur through an input/output (I/O) interface 905. Moreover, computing device 900 may also communicate with one or more networks such as a Local Area Network (LAN), a Wide Area Network (WAN) and/or a public network, for example, the Internet, through network adapter 906. As shown in fig. 9, the network adapter 906 communicates with other modules of the computing device 900 over the bus 903. It should be appreciated that although not shown, other hardware and/or software modules may be used in connection with computing device 900, including, but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, data backup storage systems, and the like.

It should be noted that although in the above detailed description several units/modules or sub-units/modules of the front-end application build device are mentioned, this division is only exemplary and not mandatory. Indeed, the features and functionality of two or more units/modules described above may be embodied in one unit/module in accordance with embodiments of the present disclosure. Conversely, the features and functions of one unit/module described above may be further divided into ones that are embodied by a plurality of units/modules.

Furthermore, although the operations of the methods of the present disclosure are depicted in the drawings in a particular order, this is not required to or suggested that these operations must be performed in this particular order or that all of the illustrated operations must be performed in order to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step to perform, and/or one step decomposed into multiple steps to perform.

While the spirit and principles of the present disclosure have been described with reference to several particular embodiments, it is to be understood that this disclosure is not limited to the particular embodiments disclosed nor does it imply that features in these aspects are not to be combined to benefit from this division, which is done for convenience of description only. The disclosure is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims.

Claims

1. The front-end application construction method is applied to a browser and comprises the following steps:

executing the module code to render the application page.

2. The front-end application construction method according to claim 1, wherein the browser includes Vite, the Vite uses a native module with a corresponding function in the browser, a file system used by the Vite is a memory file system memfs, and the determining, according to the source code module identifier, a target source code module corresponding to the application page from source code modules corresponding to the target front-end application includes:

and determining a target source code module corresponding to the application page from source code modules corresponding to the target front-end application through the Vite according to the source code module identification.

3. The front-end application construction method according to claim 2, wherein compiling the target source code module to obtain a module code corresponding to the target source code module includes:

and compiling the target source code module through the Vite to obtain a module code corresponding to the target source code module, and storing the module code in a cache.

4. The front-end application building method according to claim 3, wherein the browser includes a Service workbench, the Service workbench is used for proxy browser pages, and the obtaining the request message corresponding to the application page includes:

and acquiring the request message corresponding to the application page through the Service workbench.

5. The method for constructing a front-end application according to claim 4, wherein after the obtaining, by the Service Worker, the request message corresponding to the application page, the method further comprises:

and sending the request message to the Vite in a broadcasting mode through the Service workbench.

6. The method for constructing a front-end application according to claim 5, wherein after compiling the target source code module through the Vite to obtain a module code corresponding to the target source code module and storing the module code in a cache, the method further comprises:

receiving a notification message sent by the Vite through the Service workbench, wherein the notification message is used for indicating the compiling completion of the target source code module;

and acquiring the module code from the cache through the Service workbench so that the browser executes the module code.

7. The front-end application building method according to any one of claims 1 to 6, the target front-end application comprising a dependency module, the executing the module code comprising:

When the browser executes the module code, if the module code is determined to depend on the dependent code corresponding to the dependent module, the dependent code is obtained through an esm.sh service, and the dependent code is executed, and the esm.sh service is used for converting and packaging the dependent module according to an ESM modularized format, so that the dependent code is obtained, and the dependent code is stored in a cache.

8. The front-end application building method according to any one of claims 2 to 6, further comprising, before the obtaining the request message corresponding to the application page:

initializing a Web workbench thread for running the Vite;

receiving source codes of the target front-end application;

initializing and registering a Service workbench thread;

and creating an iframe tag to load an application page of the target front-end application.

9. A front-end application building apparatus for use in a browser, the front-end application building apparatus comprising:

10. The front-end application building apparatus according to claim 9, wherein the browser includes a Vite, the Vite uses a native module with a corresponding function in the browser, a file system used by the Vite is a memory file system memfs, and the determining module is specifically configured to: