CN112835578A - Bundle file generation method and storage medium - Google Patents
Bundle file generation method and storage medium Download PDFInfo
- Publication number
- CN112835578A CN112835578A CN202110120393.XA CN202110120393A CN112835578A CN 112835578 A CN112835578 A CN 112835578A CN 202110120393 A CN202110120393 A CN 202110120393A CN 112835578 A CN112835578 A CN 112835578A
- Authority
- CN
- China
- Prior art keywords
- file
- bundle
- information list
- character string
- chunk
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 76
- 238000003860 storage Methods 0.000 title claims abstract description 15
- 230000003068 static effect Effects 0.000 claims description 53
- 238000004806 packaging method and process Methods 0.000 claims description 21
- 238000011084 recovery Methods 0.000 claims description 13
- 238000010276 construction Methods 0.000 claims description 12
- 238000012545 processing Methods 0.000 claims description 8
- 238000004590 computer program Methods 0.000 claims description 5
- 230000008569 process Effects 0.000 description 19
- 230000006870 function Effects 0.000 description 14
- 230000008859 change Effects 0.000 description 6
- 230000004048 modification Effects 0.000 description 5
- 238000012986 modification Methods 0.000 description 5
- 238000012856 packing Methods 0.000 description 4
- 230000001419 dependent effect Effects 0.000 description 3
- 230000001960 triggered effect Effects 0.000 description 3
- 238000004140 cleaning Methods 0.000 description 2
- 239000000284 extract Substances 0.000 description 2
- 230000008676 import Effects 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000012858 packaging process Methods 0.000 description 2
- 239000000243 solution Substances 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 229910002056 binary alloy Inorganic materials 0.000 description 1
- 230000015556 catabolic process Effects 0.000 description 1
- 238000011217 control strategy Methods 0.000 description 1
- 101150035837 cssA gene Proteins 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000005012 migration Effects 0.000 description 1
- 238000013508 migration Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/73—Program documentation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Library & Information Science (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention provides a bundle file generating method and a storage medium, wherein the method comprises the steps of carrying out Hash operation on a chunk file to obtain a first Hash character string, taking the first character string containing the first Hash character string as the file name of the chunk file, recording the first character string corresponding to each chunk file in a file information list, comparing the file name of the chunk file in the current file information list with the content recorded in a historical file information list one by one, extracting the name of the chunk file modified at this time, and generating a new bundle file according to the chunk file corresponding to the modified chunk file name. Therefore, all new bundle files are generated based on the chunk file with the modified current content, if the content of the chunk file is not modified, the cache is still effective, and the original bundle file can be directly reused, so that the pressure of a server is effectively relieved, and the loading performance of a client is improved.
Description
Technical Field
The invention relates to the field of http webpage generation, in particular to a bundle file generation method and a storage medium.
Background
when the web front-end code is packaged again through the static file packaged by webpack, the unmodified file is also covered (here, the source file is unmodified, but the bundle file after the contentHash is covered), because the last modification time mtime of the file is changed, the problem that the http negotiation cache (the state code 304) fails occurs.
In the prior art, the strategy of http negotiation cache depends on the configuration of the back end, and the front end cannot prejudge the back end strategy. However, the front end has better knowledge of the code, and webpack has the ability to determine whether the static file is valid through the contentHash, so it is more appropriate for the front end to control its code cache from the viewpoint of maintenance and management, and the technology operation and maintenance cost is lower.
Most negotiation cache strategies can be managed by adopting header information of If-None-Match and Etag, for example, a static server built by an express framework of nodejs, the Etag of a static file is generated by splicing mtime and content size, and the mtime can be changed when a code is changed and a bundle file is reconstructed every time, so that negotiation cache is invalid, the pressure of a server is increased, and the loading performance of a client is influenced.
Disclosure of Invention
Therefore, a technical scheme for generating the bundle file needs to be provided, so as to solve the problems that when the server executes the build script, the negotiation cache fails due to the change of the last modification time, the pressure of the server is increased, and the loading performance of the client is affected.
The invention provides a bundle file generating method in a first aspect, which comprises the following steps:
executing the build script and completing the following steps:
s1: receiving all first interface files depended by the first entry file, and packaging all the first interface files depended by the first entry file into chunk files;
s2: carrying out Hash operation on the chunk files in sequence to obtain a first Hash character string;
s3: taking a first character string containing the first hash character string as the file name of the chunk file, and recording the first character string corresponding to each chunk file in a file information list;
s4: comparing the contents recorded in the current file information list and the history file information list one by one, sequentially judging whether the first character strings corresponding to the chunk files are the same in the two file information lists, and if not, generating a new chunk file according to the chunk files in the current file information list;
s5: and adaptively modifying the resource reference address of the html module corresponding to the current entry according to the generated new bundle file name and the directory address where the new bundle file name is located.
Further, after the server executes the build script and completes the steps S1 to S5, the following steps are further included:
after a user triggers a network access request, judging whether a bundle file corresponding to the network access request is stored in a current browser cache or not by the browser, if so, acquiring the corresponding bundle file from the browser cache by the browser; otherwise, the corresponding bundle file is obtained from the server.
Further, "the browser acquires the corresponding bundle file from the browser cache" includes the following steps:
the browser judges whether a bundle file corresponding to the network access request in the current browser cache is expired or not, and if yes, the browser initiates a data refreshing request to the server;
and after receiving a refreshing feedback signal sent by the server, the browser refreshes the data in the browser cache, and then acquires the bundle file corresponding to the network access request from the browser cache.
Further, the server also completes the following steps when executing the build script:
receiving static resources according to configuration, and recording a second character string corresponding to the static resources in the current file information list; the second character string comprises an original file name corresponding to the static resource;
before the step of comparing the contents recorded in the current file information list and the history file information list one by one, the method further comprises the following steps: judging whether an original file name corresponding to the static resource exists in a history file list;
if not, recording the static resource corresponding to the second character string in the current file information list;
if so, performing hash operation on the binary content of the static resource corresponding to the second character string in the current file information list to obtain a second hash character string; reading binary content of static resources with the same file name as the original file name contained in the second character string from a history cache to perform hash operation to obtain a third hash character string; and comparing whether the second hash character string is the same as the third hash character string, and if not, recording the static resource corresponding to the second character string in the current file information list.
Further, the method comprises:
after the server executes the construction script, comparing the file names of the bundle files recorded in the current file information list and the historical file information list, and deleting the redundant files corresponding to the file names recorded in the historical file information list;
the redundant file is a file whose file name is recorded in the history file information list but is not recorded in the current file information list.
Further, the method further comprises:
and after the server executes the construction script, determining a recovery strategy corresponding to the branch identifier of the current branch according to the branch configuration file, and processing all file resources generated by the current branch by adopting the recovery strategy.
Further, the method further comprises:
and judging whether the branch identifier of the current branch contains a recovery identifier, and if so, recovering all file resources generated by the current branch.
Further, before the server executes the build script, the method further comprises: setting a mandatory coverage identifier corresponding to the branch;
if the current branch is provided with the mandatory override flag, skipping the step S4 when the steps S1-S5 are executed, and directly overriding the history file information list by using all the new bundle file names.
Further, the "packaging all the first interface files on which the first entry file depends as chunk files" includes:
and packaging all the first interface files depended by the first entry file into a chunk file according to the packaging configuration information, or packaging all the first interface files of the same type into a chunk file.
The second aspect of the invention also provides a storage medium storing a computer program which, when executed by a processor, performs the method steps according to the first aspect of the invention.
Different from the prior art, the bundle file generation method and the storage medium in the technical scheme comprise the following steps: executing the build script and completing the following steps: s1: receiving all first interface files depended by the first entry file, and packaging all the first interface files depended by the first entry file into chunk files; s2: carrying out Hash operation on the chunk files in sequence to obtain a first Hash character string; s3: taking a first character string containing the first hash character string as the file name of the chunk file, and recording the first character string corresponding to each chunk file in a file information list; s4: comparing the contents recorded in the current file information list and the history file information list one by one, sequentially judging whether the first character strings corresponding to the chunk files are the same in the two file information lists, and if not, generating a new chunk file according to the chunk files in the current file information list; s5: and adaptively modifying the resource reference address of the html module corresponding to the current entry according to the generated new bundle file name and the directory address where the new bundle file name is located.
According to the scheme, the current file information list is maintained and is compared with the content recorded in the historical file information list one by one, the name of the chunk file which is modified at this time is extracted, and a new bundle file is generated according to the chunk file corresponding to the modified chunk file name. Therefore, all new bundle files are generated based on the chunk file with the modified current content, if the content of the chunk file is not modified, the cache is still effective, and the original bundle file can be directly reused, so that the pressure of a server is effectively relieved, and the loading performance of a client is improved.
Drawings
Fig. 1 is a flowchart of a bundle file generation method according to an embodiment of the present invention;
FIG. 2 is a flowchart of a bundle file generation method according to another embodiment of the present invention;
FIG. 3 is a flowchart of an http negotiation cache request process according to an embodiment of the present invention;
FIG. 4 is a flowchart of a bundle file generation method according to another embodiment of the present invention;
FIG. 5 is a flowchart of a bundle file generation method according to another embodiment of the present invention;
FIG. 6 is a flowchart of a bundle file generation method according to another embodiment of the present invention;
FIG. 7 is a flowchart of a bundle file generation method according to another embodiment of the present invention;
fig. 8 is a schematic structural diagram of a bundle file generating apparatus according to an embodiment of the present invention;
description of reference numerals:
10. a storage medium;
20. a processor.
Detailed Description
To explain technical contents, structural features, and objects and effects of the technical solutions in detail, the following detailed description is given with reference to the accompanying drawings in conjunction with the embodiments.
http negotiation caching is a technique that keeps a copy of a resource and can use it directly at the next request. Taking a browser view as an example, when a local cache of a browser fails, the browser (i.e., a Client) sends a request to a Server (i.e., a Server), the Server judges whether the cache fails according to a certain policy, and if the cache fails, the Server returns to 200, and returns new resource data to the browser. If the cache is still effective, the http status code 304Not Modified is returned to inform the browser to directly use the local cache of the browser, new resources do Not need to be downloaded from the server, the pressure of the server is relieved, and the time consumption and the bandwidth occupation of the request are reduced. This flow may be represented by the steps shown in fig. 3.
As shown in fig. 3, step S301 is entered first, and the client initiates a get request. In step S301, the client first acquires a cache resource from the local. And then step S302 is performed to determine whether the local cache is expired, if so, step S303 is performed to acquire the local cache and return the local cache, otherwise, step S305 is performed to forward the request initiated by the client to the server. After step S305, the server may enter step S306 to determine whether the browser cache fails, and if so, the server may enter step S307 to return the http200 and download the resource again. If the server determines that the browser cache does Not fail, step S304 may be performed to return http 304Not Modified, and step S304 may be performed to step S303 to obtain the local cache and return.
As can be seen from fig. 3, when the client triggers the http request and needs to negotiate the cache, the specific policy of determining whether the cache is invalid is implemented by the Server. The method is very unfriendly for a front-end developer, and the http negotiation cache control right is transferred to the front-end developer as much as possible, so that your code construction environment is omitted, and the configuration of cache judgment strategies such as Etag of a server side is not required to be concerned. Although some front-end schemes reduce the influence of single module change on other module caches through contentHash in the webpack construction process, partial caches fail in a scenario where a server is directly deployed, so that the application can adapt to most common deployment scenarios in a plug-in mode of webpack, and is a more perfect scheme.
Fig. 1 is a flowchart of a bundle file generating method according to an embodiment of the present invention. The method comprises the following steps:
executing the build script and completing the following steps:
the process first proceeds to step S1: receiving all first interface files depended by the first entry file, and packaging all the first interface files depended by the first entry file into chunk files;
then, the process proceeds to step S2: carrying out Hash operation on the chunk files in sequence to obtain a first Hash character string;
then, the process proceeds to step S3: taking a first character string containing the first hash character string as the file name of the chunk file, and recording the first character string corresponding to each chunk file in a file information list;
then, the process proceeds to step S4: comparing the contents recorded in the current file information list and the history file information list one by one, sequentially judging whether the first character strings corresponding to the chunk files are the same in the two file information lists, and if not, generating a new chunk file according to the chunk files in the current file information list;
then, the process proceeds to step S5: and adaptively modifying the resource reference address of the html module corresponding to the current entry according to the generated new bundle file name and the directory address where the new bundle file name is located.
In this embodiment, a current file information list is maintained by performing hash operation on the chunk file content and generating a first hash character string, the current file information list is compared with the content recorded in the historical file information list one by one, the name of the chunk file which is modified at this time is extracted, and a new chunk file is generated according to the chunk file corresponding to the modified chunk file name. Therefore, all new bundle files are generated based on the chunk files with modified current contents, if the contents of the chunk files are not modified, the cache is still effective, and the original corresponding bundle files can be directly reused, so that the pressure of a server is effectively relieved, and the loading performance of a client is improved.
In some embodiments, after the server executes the build script and completes steps S1 to S5, the following steps are further included: after a user triggers a network access request, judging whether a bundle file corresponding to the network access request is stored in a current browser cache or not by the browser, if so, acquiring the corresponding bundle file from the browser cache by the browser; otherwise, the corresponding bundle file is obtained from the server. In short, after triggering the network access request, the user preferentially obtains the bundle file from the local browser cache, and if the bundle file corresponding to the network access request does not exist in the local browser cache, the user requests the server for the corresponding bundle file, so that the webpage browsing efficiency is ensured.
The browser cache may store a bundle file corresponding to the current network access request, but the bundle file is expired, and if a new bundle file is requested from the server again, the loading performance of the client is undoubtedly reduced. Therefore, in some embodiments, the step of the browser acquiring the corresponding bundle file from the browser cache includes: the browser judges whether a bundle file corresponding to the network access request in the current browser cache is expired or not, and if yes, the browser initiates a data refreshing request to the server; and after receiving a refreshing feedback signal sent by the server, the browser refreshes the data in the browser cache, and then acquires the bundle file corresponding to the network access request from the browser cache. In short, when it is determined that the browser has the bundle file corresponding to the current network access request but the bundle file is expired, the browser initiates a data refresh request to the server, and resets the lifetime of the bundle file corresponding to the current network access request in the browser cache after receiving the refresh request fed back by the server, so that the browser can still directly acquire the required bundle file from the local cache, thereby effectively improving the loading performance of the browser web page.
In certain embodiments, the method further comprises: after the server executes the construction script, comparing the file names of the bundle files recorded in the current file information list and the historical file information list, and deleting the redundant files corresponding to the file names recorded in the historical file information list; the redundant file is a file whose file name is recorded in the history file information list but is not recorded in the current file information list. By deleting the redundant files, the content recorded in the historical file information list can be ensured to be the latest file name when the script is executed and constructed last time, the timely display and update of a webpage interface are ensured, and the occupation of resource space is reduced.
Fig. 4 is a flowchart of a bundle file generating method according to another embodiment of the present invention.
The method firstly enters S401 a plurality of entry modules, and then enters S402 to analyze the dependency tree. Step S401 and step S402 correspond to receiving all first interface files on which the first entry file depends in step S1 in fig. 1.
And then proceeds to step S403 to generate an assetes list. The assets file list is a current file information list.
After the assetes list is generated, the following steps can be triggered through a preset emit Hooks:
the process first proceeds to step S404 to generate a list of original originSSets by deep copying.
In this embodiment, the OriginAssetes list is a complete set of resources to be output in the packaging process, the assets list is a list of files that are selected through hash comparison and need to be regenerated, and the OriginAssetes list and the assets list have the following correspondence, that is, the OriginAssetes list is an assets file list + (all files in an output directory — redundant files in the output directory).
After step S404, step S405 may be performed by using a Diff function to determine whether to eliminate keys from the assets, if yes, step S406 is performed to delete the key from the assets, and if not, step S408 is performed to keep the record corresponding to the key. The key here is a path of the chunk file name after the hash operation. The function of the Diff function is to compare whether the file names in the two lists are the same, and if the bundle file key corresponding to the key is multiplexed in the same specification, step S406 may proceed to step S407 to use the old file with the same name of the key, that is, to use the bundle file generated by the previous packaging. If the Diff function determines that there are different file names in the assets after the current file information list is generated, a new bundle file is generated based on the chunk file corresponding to the file name while keeping the key, that is, after step S408, the process may proceed to step S409emit to generate all the bundles in the assets.
After step 407 and step 409, step 410 may be proceeded to obtain the final bundle file resource. The final bundle file resource is the bundle file resource required by displaying the current webpage interface.
A done Hook may also be triggered after step S410, and the Hook function is used to clarify redundant files in the originassets list (i.e., the history file information list), which is specifically performed as follows: the method comprises the steps of firstly entering step S411 to recursively read a local output directory, then entering step S412 to compare with originassets, then entering step S413 to recycle a redundant file calculated by diff, and then entering step S414 to finish cleaning.
According to the scheme of the embodiment, the final bundle name can be dynamically generated according to the content change of the source file by configuring the webpack packaging process, and if the source file is not changed, the generated bundle name is not changed; on the contrary, if the content of the source file is changed, the new bundle file name is obtained by performing hash operation based on the content of the source file, so that the generated bundle file name is changed, and the content generated before the source file becomes a redundant file to wait for being recycled. Since all the bundle file names are extracted from the content hash, whether the cache is valid or not can be judged according to the file names, and if the file names are not changed, the cache is still valid.
According to the scheme of the application, the latest attributes list (namely the current file information list to be generated) is maintained, then the bundle modified this time is extracted through the Diff function (namely the file name with the difference is extracted after being compared with the historical file information list), and the new bundle file is generated only aiming at the chunk file corresponding to the file name with the difference, so that the mtime cannot be covered after the new bundle file is generated. When a file, the name is not changed, the content is not changed (the size is not changed) and the mtime is not reset, most Etag strategies can be adapted without customizing the Etag strategies.
webpack is a common packaging and building tool for a web front end, and most common engineering and building problems can be solved by configuring configuration items provided by the webpack and combining with plug-ins of third parties. However, there are still some requirements for personalization or customization, which require writing the plugin and loader injection by itself to realize the corresponding functions. In the whole lifecycle of the webpack construction application, a plurality of Hooks are reserved, and by subscribing to the Hooks corresponding to the lifecycle, which stage of the webpack construction is currently performed can be known. The scheme is based on the customization requirements of the Webpack by the mechanisms of plugin and hooks.
webpack also supports the configuration of multiple entries (entry files), and dynamic import of an entry module through import () or acquire. When webpack compiling is performed, the webpack first generates a dependency tree for items that the multiple entry files depend on, and packages the multiple entry files into corresponding chunk files, pictures and font resources in the dependencies are separately extracted and named by original file names, and the rest of the contents are subjected to contentHash (hash operation) for the chunk, named by modelename.
The plug-in unit set by the application can monitor the lifecycle hook 'emit' reserved by webpack, the emit can be executed before the assets are output to the output directory, and therefore the plug-in unit can be used for executing the task of the application. When executing the reserved lifecycle hooks, the present application will name assets as originAssets as a deep copy and will use it when doing cleanup tasks. And then, a diff function is realized by the self, and the diff function is mainly used for judging which resource is reusable and unchanged, so that which resource needs to be packaged and which resource needs to be removed in the assets can be known. If the resource needs to be removed, the local file with the same name is used as an output module, active coverage is not needed, and the diff function is introduced separately later in the application. All resources are already output to the output directory, and the task can be directly ended at this time, but the task is not completely ended, and the application sometimes needs to recycle the redundant files.
The recovery of the redundant files is that a done hook in an emit hooks is monitored, the done can be executed after the emit is completely finished, namely, the done is executed immediately after the compilation is finished, and the method is most suitable for recovering the redundant files at the stage. The specific method comprises the following steps: and reading a file list of an output directory recursively, comparing the file list with the originAssets list, and if the files in the originAssets list are not eliminated automatically, finishing recovery cleaning, wherein the whole core process is finished.
Redundant files, as the name implies, are redundant or duplicate files. In this embodiment, the file specifically constructed in the old version at the front end on the server is no longer dependent in the new version, and thus becomes a redundant file. Generating redundant files, for example, the application constructs a project version v1.0.0 of the application through webpack, wherein an entry file is main.js, the main.js of the application is respectively imported and depended on a.js and b.js, the webpack generates a bundle resource through analyzing dependence combination, and the content of the bundle resource is subjected to hash operation, so that the hash is named as chunk-00abdce1342.js (namely a hash character string); when the application has a new code change, the version of the application item is not v1.0.1, b.js is changed, and webpack analyzes the code with the changed dependence on main.js, a chunk-celjf123fgd.js is regenerated, which is an upgraded version of chunk-00abdce1342.js, so that the chunk-00abdce1342.js becomes an obsolete file, and the chunk-00abdce1342.js becomes a redundant file and needs to be cleaned. In fig. 4, originassets store the complete set of all bundles in the (v1.0.1) packing construction process, and this application needs to recursively traverse the output directory, diff files that are not in the originassets directory, and these files are redundant files, and if a branch is issued, they are removed.
When the front end is packed and resources are generated through webpack, the generated resources are about 4 types:
html resources (dynamic in many times), such as internal script tags, link tags or contents, are likely to change every time online, and the same html file is likely to be read and returned according to different URL addresses;
secondly, JavaScript resources are used as entry files for webpack processing, and the generated bundle is generally used as a dependent file of html files, such asJs cs and img generated by webpack can be called as static resources in the application, and the access mode of the application is generallyhttps://allwan.agotoz.com/static/css/app.f123fgs1.cssA certain file is designated to be accessed as a path.
Thirdly, still another is a static file which is basically not changed, such as some logo pictures;
and fourthly, the last one is that some page contents are small, the web page is not packaged by the webpack in practical application, the resource exists in a very native html single file form, and the resource can be integrated into a project mainly packaged by the webpack by adopting the scheme of the application.
In the above files, only the second type needs to perform content name hash (perform hash operation based on file content and include a hash character string of an operation result as a file name) during packaging, and the rest only needs to copy the file to an output directory (i.e., retain the original file name). This is because the request of html file resource is generally accessed by inputting url in the input box at the top of the browser, which is a dynamic access, such as the access of the applicationallwan.agotoz.com/ allwan and domain name/allwan/cloud. Html files are returned though the access paths are different, the server finds corresponding files through strategies and configurations and returns the files, and therefore the files cannot rename names through hash operation or do not need to use the hash operation according to background requirements. Only likehttps:// domain name/static/css > app.f123fgs1.cssIt makes sense to have a hash naming of static resources (e.g., type ii) accessed by such paths.
The resource (c) is some big pictures such as logo with standard commands, and the user needs to click to download a pdf resource file and the like without directly copying the hash name to an output directory. The files are directly specified by clicking to download, the common property of the files is that the action characteristics of the files are obvious and basically not changed, and the files cannot be repeatedly changed like codes, such as logo.
The reason why the resource (c) does not need the hash is that, for example, an independent module needs to be made in an actual web interface, the module is only a purely static page, and a packing operation may not need to be made when the module is constructed, and any frame is not needed, so that the module only needs to be copied to an output through webpack.
As shown in fig. 2, the server further performs the following steps when executing the build script:
firstly, step S201 is entered to receive static resources according to configuration, and second character strings corresponding to the static resources are recorded in the current file information list; the second character string comprises an original file name corresponding to the static resource;
before the step of comparing the contents recorded in the current file information list and the history file information list one by one, the method further comprises the following steps: step S202, judging whether an original file name corresponding to the static resource exists in a history file list;
if not, the step S205 is executed to record the static resource corresponding to the second character string in the current file information list;
if yes, step S203 is carried out, and Hash operation is carried out on the binary system content of the static resource corresponding to the second character string in the current file information list to obtain a second Hash character string; reading binary content of static resources with the same file name as the original file name contained in the second character string from a history cache to perform hash operation to obtain a third hash character string; after step S203, step S204 may be performed to compare whether the second hash character string is the same as the third hash character string, and if not, step S205 may be performed to record a static resource corresponding to the second character string in the current file information list.
For the resources of types 1, 3 and 4 as described above, since the file name of such static resources is the original file name, when the file name is updated and changed, an additional method needs to be adopted for separate judgment, so that the static resources can be normally displayed in the web page, and the method steps shown in fig. 2 are designed and solved in the present application.
As shown in fig. 5, when processing static resources whose file names are not subjected to hash operation, the process first proceeds to step S501 to traverse keys of assets, and then proceeds to step S502 to sequentially read one key. Then, step S503 is executed to determine whether the output directory has a file with the same name, where the output directory is a file resource list required for displaying the current web page. If yes, the process goes to step S504 to determine whether the key is in the hash format, otherwise, the process goes to step S509 to retain the key. If the currently determined file key does not exist in the output directory, it indicates that the key needs to be added in the output directory, so that the corresponding file resource can be normally acquired. If the currently judged file key exists in the output directory, judging the format of the current file key.
Specifically, when the determination result in step S504 is yes, step S505 is performed to remove the key from the assets, otherwise step S506 is performed to asynchronously extract the source of the assets to perform contentHash, and the result is named hashname _ current (that is, the binary content of the static resource corresponding to the second character string in the current file information list is subjected to hash operation to obtain a second hash character string, step S506 may be performed to step S507 to asynchronously read the local file content with the same name and perform contentHash, and the result is named hashname _ local (that is, the binary content of the static resource with the same name as the original file name included in the second character string is read from the history cache to perform hash operation to obtain a third hash character string).
After step S507, step S508 may be performed to determine whether hash _ current and hash _ local are equal (i.e., whether the second hash string is the same as the third hash string is compared), if not, step S509 is performed to retain the key (i.e., record the static resource corresponding to the second hash string in the current file information list), and if so, step S505 is performed to remove the key from the assets list (the two are the same, it means that the content of the static resource in the current web page to be displayed does not change, and the static resource used last time can be directly multiplexed). After step S505 or step S509, it may be determined whether traversal is completed in step S510, where the result indicates whether all keys in the assets list are read, if so, traversal is ended, otherwise, step S502 is continuously performed until all keys in the assets list are traversed.
In this embodiment, the working principle of the diff function is as follows: when the diff function is executed, the present application traverses the keys in the assets list, reads the currently traversed keys one by one, and performs the determination of the read keys as in steps S503 to S510 in fig. 5. In this embodiment, the key in the assets list may be a filename path that has been subjected to the content hash (i.e. the aforementioned type 2 resource), or may be a picture font filename path without a hash (i.e. the aforementioned type 1, 3, or 4 resources). Regardless of the type of resource, the method can firstly judge whether the file with the same name exists in the output directory, and if the file with the same name does not exist in the output directory, the file is a new file or is dependent on the file, the file can be directly skipped over, and the emit is waited. If the same-name file exists in the output directory, the method further judges whether the key is in a format of the contentHash, if so, the key is compared with the contentHash file name, namely the file name and the content are proved to be uniquely bound, and the key exists in the output directory, so the key needs to be removed from the assets list, and the file does not need to be repeatedly generated. If the key is not in the content Hash format, the key represents the picture and the font file extracted by the application, and the content of the key needs to be subjected to hash comparison at present. Taking picture resources as an example, if two pictures are the same and the content of the source code of the two pictures is the same after the contentHash is performed, if the two pictures are different, the picture is considered to be changed, and the cache needs to be cleaned, the key is reserved so that the subsequent emit covers the file with the same name, and finally, an assets resource list after Diff is generated.
In the application, the server performs hash operation on the file names of the chunk files in the script construction stage, and compares the file names with the contents recorded in the previous historical file information list one by one to determine whether to generate a new file, so as to achieve the purpose of controlling cache.
By packaging all the first interface files depended by the first entry file into chunk files, the problems of disordered page loading styles, breakdown and the like caused by caching of old resources by a client browser during webpage version upgrading can be effectively solved. For example, when a user inputs an http address such as https:// allwan. agotoz. com/login in a browser, the address dynamically returns an html file, and the html file issues the following address requests through script tags:
https://allwan.agotoz.com/static/css/app.d2601867.cssand requests the corresponding cs style according to the address. If the hash operation is not performed on the name of the css file in the above scheme, the accessed resource path can be summarized to the following address:
https://allwan.agotoz.com/static/css/app.css。
then, suppose that the server wants to make the browser persistently cache the css file for 24 hours by setting the header max-age, if the style of the browser is changed in 24 hours, but the corresponding file name is also written as app. The client still accesses the old app.css resource when accessing the webpage, that is, the webpage style is too old, and even the style is confused. At this time, if the code is changed, the file name is changed to app.f123fgs1.css, that is, a new file distinguished from the original file exists, and at this time, the call to the file in the html file also becomes a new address, that is, the call becomes a new address
https://allwan.agotoz.com/static/css/app.f123fgs1.css. If the access resource address changes, the resource request of the browser is regarded as a new request, namely a new file resource is requested, which is the reason and original intention that the name of the static resource (such as js, css partial small picture and the like) needs to be subjected to hash operation, and the first character containing the operation result is authored as the file name of the static resource.
As described above, when the static resource is sent and changed, if the static file name includes the character string obtained by performing the hash operation on the content, the file name of the static resource is also changed, and the http web page request address is changed, that is, a new request is issued, which is not problematic. However, when the content of some static resources is not changed, the file name is not changed, if the file is packed in a full coverage manner, the last modification time of the file is changed, so that 304 negotiation cache may fail, which is a core problem to be solved by the plug-in, namely, the 304 cache control right is transferred to front end webpack processing, and the webpack is subjected to incremental packing (instead of full coverage) on a server through a certain logic to adapt to the generation rule of Etag (mainly adapted Etag rule is whether the last modification time is changed, the length of the file content is changed, and the file content is changed).
Therefore, by comparing the file names in the file name list (the file names are obtained by performing hash operation based on the file content), the file does not need to be compared in real time, and the real-time content comparison requires that the hash operation is performed on the local file and the two contents of the content at the same time, so that the performance is far poorer than that of directly comparing the file names. For files without the hash operation type, the method for calculating the hash file name by acquiring the file content in real time is adopted in the application to calculate so as to compare whether the static resource changes.
In certain embodiments, the method further comprises: and after the server executes the construction script, determining a recovery strategy corresponding to the branch identifier of the current branch according to the branch configuration file, and processing all file resources generated by the current branch by adopting the recovery strategy. Preferably, the method further comprises: and judging whether the branch identifier of the current branch contains a recovery identifier, and if so, recovering all file resources generated by the current branch.
The following focuses on the configurable policy for recovering redundant files according to branches, as shown in fig. 6, first, configurable file items, such as configuration files or parameters, are reserved, and when a stop hooks triggers, the configurable file items are read, that is, the step S601 is performed to read the configurable file items, the git/HEAD file extracts the branch where the configurable file is located, and the step S602 performs reading of the branch configuration items of the item. Then, the process may proceed to step S603 to determine whether the current branch is a production branch, and if so, the process proceeds to step S604 to recover the redundant file. If the step S603 determines that the current branch belongs to another development branch (i.e., belongs to a non-production branch), the process proceeds to step S605 to determine whether the current branch is configured with a forced recovery flag, and if the step S605 determines that the current branch is configured with the forced recovery flag, the process proceeds to step S604 to recover the redundant file.
In some embodiments, before the server executes the build script, the method further comprises: setting a mandatory coverage identifier corresponding to the branch; if the current branch is provided with the mandatory override flag, skipping the step S4 when the steps S1-S5 are executed, and directly overriding the history file information list by using all the new bundle file names.
Although the scheme of the application establishes a perfect cache control strategy, the packed file is not lost due to the migration of the file directory and the host, so that the packed file cannot work normally. However, the present application still needs to reserve an entry for mandatory coverage of the cache file, which will meet the testing requirements of the user, or serve as an entry for backing emergency.
As shown in fig. 7, after the emit Hooks is triggered, step S701 is first performed to determine whether a mandatory override parameter is specified, and if yes, step S702 is performed to generate a bundle override to output to override all resource files and reset all caches. If the override parameters are not enforced, the steps shown in FIG. 4 are performed.
In some embodiments, said "packaging all said first interface files on which the first entry file depends as chunk files" comprises: and packaging all the first interface files depended by the first entry file into a chunk file according to the packaging configuration information, or packaging all the first interface files of the same type into a chunk file. In short, the way of packaging the first interface files into chunk files may be divided based on entries, that is, all the first interface files of a certain entry are packaged into one chunk file. When the first interface file of a certain entry has multiple types, the first interface file can be further divided on the basis, that is, the interface files of the same type in the same entry are packaged, so that multiple chunk files are obtained.
The second aspect of the invention also provides a storage medium storing a computer program which, when executed by a processor, performs the method steps according to the first aspect of the invention. The storage medium is an electronic component with a data storage function, and includes but is not limited to: RAM, ROM, magnetic disk, magnetic tape, optical disk, flash memory, U disk, removable hard disk, memory card, memory stick, etc. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.
As shown in fig. 8, the third aspect of the present invention further provides a bundle file generating apparatus, where the bundle file generating apparatus includes a processor 20 and a storage medium 10, and the storage medium 10 stores a computer program, and the computer program implements the method steps according to the first aspect of the present invention when executed by the processor. The Processor is an electronic component having a data Processing function, such as a Central Processing Unit (CPU), a Digital Signal Processor (DSP), or a System on Chip (SoC).
The invention provides a bundle file generating method and a storage medium, wherein the method comprises the steps of carrying out Hash operation on a chunk file to obtain a first Hash character string, taking the first character string containing the first Hash character string as the file name of the chunk file, recording the first character string corresponding to each chunk file in a file information list, comparing the file name of the chunk file in the current file information list with the content recorded in a historical file information list one by one, extracting the name of the chunk file modified at this time, and generating a new bundle file according to the chunk file corresponding to the modified chunk file name. Therefore, all new bundle files are generated based on the chunk file with the modified current content, if the content of the chunk file is not modified, the cache is still effective, and the original bundle file can be directly reused, so that the pressure of a server is effectively relieved, and the loading performance of a client is improved. Meanwhile, by the scheme of the application, the cache control right of the web static file can be transferred to the web front end, the file packing speed is higher, and the number of the emit files is effectively reduced.
It should be noted that, although the above embodiments have been described herein, the invention is not limited thereto. Therefore, based on the innovative concepts of the present invention, the technical solutions of the present invention can be directly or indirectly applied to other related technical fields by making changes and modifications to the embodiments described herein, or by using equivalent structures or equivalent processes performed in the content of the present specification and the attached drawings, which are included in the scope of the present invention.
Claims (10)
1. A method for generating a bundle file is characterized by comprising the following steps:
executing the build script and completing the following steps:
s1: receiving all first interface files depended by the first entry file, and packaging all the first interface files depended by the first entry file into chunk files;
s2: carrying out Hash operation on the chunk files in sequence to obtain a first Hash character string;
s3: taking a first character string containing the first hash character string as the file name of the chunk file, and recording the first character string corresponding to each chunk file in a file information list;
s4: comparing the contents recorded in the current file information list and the history file information list one by one, sequentially judging whether the first character strings corresponding to the chunk files are the same in the two file information lists, and if not, generating a new chunk file according to the chunk files in the current file information list;
s5: and adaptively modifying the resource reference address of the html module corresponding to the current entry according to the generated new bundle file name and the directory address where the new bundle file name is located.
2. The bundle file generating method of claim 1, wherein after the server executes the build script and completes steps S1 to S5, further comprising the steps of:
after a user triggers a network access request, judging whether a bundle file corresponding to the network access request is stored in a current browser cache or not by the browser, if so, acquiring the corresponding bundle file from the browser cache by the browser; otherwise, the corresponding bundle file is obtained from the server.
3. The method for generating the bundle file according to claim 2, wherein the step of the browser obtaining the corresponding bundle file from the browser cache comprises the following steps:
the browser judges whether a bundle file corresponding to the network access request in the current browser cache is expired or not, and if yes, the browser initiates a data refreshing request to the server;
and after receiving a refreshing feedback signal sent by the server, the browser refreshes the data in the browser cache, and then acquires the bundle file corresponding to the network access request from the browser cache.
4. The bundle file generation method of claim 1, wherein the server performs the build script by further performing the following steps:
receiving static resources according to configuration, and recording a second character string corresponding to the static resources in the current file information list; the second character string comprises an original file name corresponding to the static resource;
before the step of comparing the contents recorded in the current file information list and the history file information list one by one, the method further comprises the following steps: judging whether an original file name corresponding to the static resource exists in a history file list;
if not, recording the static resource corresponding to the second character string in the current file information list;
if so, performing hash operation on the binary content of the static resource corresponding to the second character string in the current file information list to obtain a second hash character string; reading binary content of static resources with the same file name as the original file name contained in the second character string from a history cache to perform hash operation to obtain a third hash character string; and comparing whether the second hash character string is the same as the third hash character string, and if not, recording the static resource corresponding to the second character string in the current file information list.
5. The method of bundle file generation of claim 1, wherein the method comprises:
after the server executes the construction script, comparing the file names of the bundle files recorded in the current file information list and the historical file information list, and deleting the redundant files corresponding to the file names recorded in the historical file information list;
the redundant file is a file whose file name is recorded in the history file information list but is not recorded in the current file information list.
6. The method of bundle file generation of claim 1, wherein the method further comprises:
and after the server executes the construction script, determining a recovery strategy corresponding to the branch identifier of the current branch according to the branch configuration file, and processing all file resources generated by the current branch by adopting the recovery strategy.
7. The method of bundle file generation of claim 6, wherein the method further comprises:
and judging whether the branch identifier of the current branch contains a recovery identifier, and if so, recovering all file resources generated by the current branch.
8. The method of bundle file generation of claim 1, wherein before the server executes the build script, the method further comprises: setting a mandatory coverage identifier corresponding to the branch;
if the current branch is provided with the mandatory override flag, skipping the step S4 when the steps S1-S5 are executed, and directly overriding the history file information list by using all the new bundle file names.
9. The method for generating a bundle file according to claim 1, wherein the "packaging all the first interface files on which the first entry file depends into chunk files" comprises:
and packaging all the first interface files depended by the first entry file into a chunk file according to the packaging configuration information, or packaging all the first interface files of the same type into a chunk file.
10. A storage medium, characterized in that the storage medium stores a computer program which, when executed by a processor, carries out the method steps of any one of claims 1 to 9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110120393.XA CN112835578A (en) | 2021-01-28 | 2021-01-28 | Bundle file generation method and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110120393.XA CN112835578A (en) | 2021-01-28 | 2021-01-28 | Bundle file generation method and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112835578A true CN112835578A (en) | 2021-05-25 |
Family
ID=75932145
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110120393.XA Pending CN112835578A (en) | 2021-01-28 | 2021-01-28 | Bundle file generation method and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112835578A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113486267A (en) * | 2021-07-27 | 2021-10-08 | 平安国际智慧城市科技股份有限公司 | Analysis method, device and equipment of application entry page and storage medium |
| CN113886777A (en) * | 2021-08-27 | 2022-01-04 | 观脉科技(北京)有限公司 | Configuration method and execution method for Form verification |
| CN114756180A (en) * | 2022-06-15 | 2022-07-15 | 广东睿江云计算股份有限公司 | Method and device for distributing coverage writing data blocks, computer equipment and storage medium |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104281506A (en) * | 2014-07-10 | 2015-01-14 | 中国科学院计算技术研究所 | Data maintenance method and system for file system |
| CN106489145A (en) * | 2015-12-28 | 2017-03-08 | 华为技术有限公司 | The access method of web site, device and Web site system |
| CN106790687A (en) * | 2017-02-17 | 2017-05-31 | 和创（北京）科技股份有限公司 | Webpage display method, web data processing method and server |
| CN106803999A (en) * | 2017-02-14 | 2017-06-06 | 北京时间股份有限公司 | A kind of video cache processing method, device and server |
| US20170249177A1 (en) * | 2016-02-26 | 2017-08-31 | Red Hat, Inc. | Extending user interface of a web console |
| CN108920573A (en) * | 2018-06-22 | 2018-11-30 | 北京奇艺世纪科技有限公司 | A kind of data buffer storage processing method, device and terminal device |
| CN110515647A (en) * | 2019-08-28 | 2019-11-29 | 北京思维造物信息科技股份有限公司 | A kind of static resource management method, device, equipment and storage medium |
| CN110727889A (en) * | 2018-06-28 | 2020-01-24 | 北京京东尚科信息技术有限公司 | Static webpage resource loading method, device, medium and electronic equipment |
| CN110866198A (en) * | 2019-09-27 | 2020-03-06 | 上海硬通网络科技有限公司 | Static resource caching method, system, device, computer equipment and storage medium |
-
2021
- 2021-01-28 CN CN202110120393.XA patent/CN112835578A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104281506A (en) * | 2014-07-10 | 2015-01-14 | 中国科学院计算技术研究所 | Data maintenance method and system for file system |
| CN106489145A (en) * | 2015-12-28 | 2017-03-08 | 华为技术有限公司 | The access method of web site, device and Web site system |
| US20170249177A1 (en) * | 2016-02-26 | 2017-08-31 | Red Hat, Inc. | Extending user interface of a web console |
| CN106803999A (en) * | 2017-02-14 | 2017-06-06 | 北京时间股份有限公司 | A kind of video cache processing method, device and server |
| CN106790687A (en) * | 2017-02-17 | 2017-05-31 | 和创（北京）科技股份有限公司 | Webpage display method, web data processing method and server |
| CN108920573A (en) * | 2018-06-22 | 2018-11-30 | 北京奇艺世纪科技有限公司 | A kind of data buffer storage processing method, device and terminal device |
| CN110727889A (en) * | 2018-06-28 | 2020-01-24 | 北京京东尚科信息技术有限公司 | Static webpage resource loading method, device, medium and electronic equipment |
| CN110515647A (en) * | 2019-08-28 | 2019-11-29 | 北京思维造物信息科技股份有限公司 | A kind of static resource management method, device, equipment and storage medium |
| CN110866198A (en) * | 2019-09-27 | 2020-03-06 | 上海硬通网络科技有限公司 | Static resource caching method, system, device, computer equipment and storage medium |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113486267A (en) * | 2021-07-27 | 2021-10-08 | 平安国际智慧城市科技股份有限公司 | Analysis method, device and equipment of application entry page and storage medium |
| CN113486267B (en) * | 2021-07-27 | 2024-01-23 | 平安国际智慧城市科技股份有限公司 | Method, device, equipment and storage medium for analyzing application entry page |
| CN113886777A (en) * | 2021-08-27 | 2022-01-04 | 观脉科技(北京)有限公司 | Configuration method and execution method for Form verification |
| CN113886777B (en) * | 2021-08-27 | 2022-06-07 | 观脉科技(北京)有限公司 | Configuration method and execution method for Form verification |
| CN114756180A (en) * | 2022-06-15 | 2022-07-15 | 广东睿江云计算股份有限公司 | Method and device for distributing coverage writing data blocks, computer equipment and storage medium |
| CN114756180B (en) * | 2022-06-15 | 2022-12-09 | 广东睿江云计算股份有限公司 | Method and device for distributing coverage writing data blocks, computer equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112835578A (en) | Bundle file generation method and storage medium | |
| WO2021218327A1 (en) | Page processing method and related device | |
| CN111475757B (en) | Page updating method and device | |
| AU2021232817A1 (en) | Methods, systems, apparatus, products, articles and data structures for cross-platform digital content | |
| US20170083544A1 (en) | Image building | |
| Zakas | High performance JavaScript: build faster web application interfaces | |
| US20150286739A1 (en) | Html5-protocol-based webpage presentation method and device | |
| CN107783770B (en) | Page configuration updating method, device, server and medium | |
| KR20080081276A (en) | Disk-based cache | |
| EP2972827B1 (en) | Collaborative editing | |
| US20210174004A1 (en) | Methods and systems for dynamic customization of independent webpage section templates | |
| CN111722873A (en) | Code reconstruction method, device, equipment and medium | |
| CN112417360B (en) | Webpage rendering method and device | |
| JP4282312B2 (en) | Web server, Web server having Java servlet function, and computer program | |
| US8196093B2 (en) | Apparatus and method for componentizing legacy system | |
| CN108920203A (en) | A kind of page loading method and equipment | |
| US9690753B1 (en) | Caching of a site model in a hierarchical modeling system for network sites | |
| US20230006814A1 (en) | Method and apparatus for implementing changes to a file system that is emulated with an object storage system | |
| JP2012088940A (en) | Information processor, information processing method, and program | |
| CN111949267B (en) | UI front end generation method and device | |
| JP6688433B2 (en) | Computer system | |
| JP6011790B2 (en) | File management apparatus and computer program | |
| CN115202673A (en) | Application construction method and device based on cloud server and computer equipment | |
| Gunnam | How I changed over time: a webservice to summarize TimeMaps based on SimHashed HTML content | |
| US20090044195A1 (en) | method for performing tasks based on differences in machine state |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |