Dynamic resource loading method and related device

Abstract

The invention discloses a dynamic resource loading method and a related device, which are used for improving the adaptation flexibility of a Web application in a cross-domain and cross-environment scene. The method is respectively applied to a terminal and a Web end. A terminal generates a resource list by extracting a target resource tag in a Web project, then fuses a preset dynamic path mechanism to generate a dynamic loading task, inserts the dynamic loading task into an HTML file, then replaces hard coding resource paths of a CSS file and a JS file, and sends the Web project to a deployment server, so that the deployment server performs loading. After a user accesses a deployment server and loads a target application, the Web end extracts URL path feature information to determine basic path configuration, then updates a resource path into a dynamic combination path and executes loading.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to methods and related apparatus for dynamic resource loading. Background Technology

[0002] With the scaling up of web applications and the surge in demand for multi-scenario deployments, the static resource loading process faces challenges in cross-domain and cross-environment adaptation. From multi-region deployments to internal and external network isolation, from rapid debugging in development environments to stable operation in production environments, different scenarios often require different resource storage paths or domain names. The accuracy of the static resource loading path directly affects the availability of the application, while requirements such as multi-environment switching and dynamic resource updates place increasingly higher demands on the flexibility and adaptability of resource paths.

[0003] In existing technologies, static resource path management is typically achieved using build-time environment variable injection or multiple environment configuration files. Specifically, multiple environment configurations are pre-defined in the project, each corresponding to resource path rules for a specific domain. During the application build phase, the build tool hard-codes the static resource paths into the build project based on the target environment's configuration. After the build is complete, the static resource paths for each environment are fixed. During deployment, the build project for the corresponding environment is directly uploaded to the target server, ensuring that the resource loading paths match the environment.

[0004] However, using this build-time hard-coded path method means that the paths to static resources cannot be modified after packaging, causing the application to lose its ability to dynamically adjust at runtime. When a domain name needs to be switched, the configuration must be modified and the entire build process must be executed again. This not only increases repetitive operations for development and maintenance but also reduces the application's flexibility in adapting to complex environments. Summary of the Invention

[0005] To address the aforementioned technical problems, this application provides a method and related apparatus for dynamic resource loading.

[0006] The technical solution provided in this application is described below: The first aspect of this application provides a method for dynamic resource loading applied to a terminal, the method comprising: Extract the target resource tags from the HTML files in the Web project, and generate a resource list based on the target resource tags; The resource list and the preset dynamic path mechanism are integrated to generate a dynamic loading task, and the dynamic loading task is inserted into the HTML file. The preset dynamic path mechanism includes a dynamic resource path parsing mechanism and a dynamic resource path creation mechanism. Replace the hard-coded resource paths of CSS and JS files in the Web project with target resource paths, including dynamic resource paths or preset image server resource paths. The replaced web project is sent to the deployment server so that the deployment server can load it.

[0007] Optionally, replacing the hard-coded resource paths of CSS and JS files in the Web project with the target resource paths includes: Scan the CSS and JS files in the web project to obtain the hard-coded resource paths of the CSS and JS files; Based on the preset resource type, the hard-coded resource paths of the CSS file are divided into image resource paths and non-image resource paths; Replace the resource paths of image classes in the CSS file with preset image server resource paths, and replace the resource paths of non-image classes in the CSS file and the hard-coded resource paths in the JS file with dynamic resource paths.

[0008] Optionally, before inserting the dynamically loaded task into the HTML file, the method further includes: The dynamically loaded task is compressed; The step of inserting the dynamically loaded task into the HTML file includes: The compressed dynamically loaded task is inserted under a specified tag in the HTML file, where the specified tag includes the `<task>` tag and the `<task>` tag.

[0009] Optionally, the target resource tags include script tags and link tags; The extraction of target resource tags from HTML files in a web project includes: The HTML files in the Web project are parsed, and the parsed HTML files are identified and analyzed to obtain all resource tags; Extract the target resource tags, including script tags and link tags, from all the resource tags.

[0010] A second aspect of this application provides a method for dynamic resource loading applied to a web application, the method comprising: After a user accesses the deployment server and successfully loads the target application, the URL address of the user accessing the target application is obtained, and path feature information is extracted from the URL address. The basic path configuration is determined based on the path feature information and the preset mapping rules, and the basic path configuration is set as a global variable of the Web project loaded by the deployment server; Update the relative resource paths in the HTML files and the target resource paths in the JS and CSS files of the Web project to either the relative resource paths or a dynamic combination of the target resource paths and the base path configuration, respectively. Dynamic resource loading of the URL address is performed according to the dynamic combination path and preset loading rules.

[0011] Optionally, the preset mapping rule is the mapping relationship between the service type of the path feature information and the basic path configuration; The process of determining the basic path configuration based on the path feature information and preset mapping rules includes: The service type that identifies the path feature information; The corresponding basic path configuration is determined in the mapping relationship based on the service type.

[0012] A third aspect of this application provides a terminal, the terminal comprising: The generation unit is used to extract target resource tags from HTML files in a Web project and generate a resource list based on the target resource tags; The insertion unit integrates the resource list and the preset dynamic path mechanism to generate a dynamic loading task, and inserts the dynamic loading task into the HTML file. The preset dynamic path mechanism includes a dynamic resource path parsing mechanism and a dynamic resource path creation mechanism. The replacement unit is used to replace the hard-coded resource paths of CSS files and JS files in the Web project with target resource paths, wherein the target resource paths include dynamic resource paths or preset image server resource paths. The sending unit is used to send the replaced Web project to the deployment server so that the deployment server can load it.

[0013] Optionally, the replacement unit is specifically used for: Scan the CSS and JS files in the web project to obtain the hard-coded resource paths of the CSS and JS files; Based on the preset resource type, the hard-coded resource paths of the CSS file are divided into image resource paths and non-image resource paths; Replace the resource paths of image classes in the CSS file with preset image server resource paths, and replace the resource paths of non-image classes in the CSS file and the hard-coded resource paths in the JS file with dynamic resource paths.

[0014] Optionally, a compression unit may also be included, specifically for: The dynamically loaded task is compressed; The step of inserting the dynamically loaded task into the HTML file includes: The compressed dynamically loaded task is inserted under a specified tag in the HTML file, where the specified tag includes the `<task>` tag and the `<task>` tag.

[0015] Optionally, the generation unit is specifically used for: The target resource tags include script tags and link tags; The extraction of target resource tags from HTML files in a web project includes: The HTML files in the Web project are parsed, and the parsed HTML files are identified and analyzed to obtain all resource tags; Extract the target resource tags, including script tags and link tags, from all the resource tags.

[0016] A fourth aspect of this application provides a web application, the web application comprising: The extraction unit is used to obtain the URL address of the target application accessed by the user when the user accesses the target application that has been loaded by the deployment server, and extract path feature information from the URL address. The setting unit is used to determine the basic path configuration based on the path feature information and preset mapping rules, and set the basic path configuration as a global variable of the Web project loaded by the deployment server; The update unit is used to update the relative resource paths in the HTML files of the Web project and the target resource paths in the JS and CSS files to either the relative resource paths or a dynamic combination of the target resource paths and the base path configuration, respectively. An execution unit is used to perform dynamic resource loading of the URL address according to the dynamic combination path and preset loading rules.

[0017] Optionally, the setting unit is specifically used for: The preset mapping rule is the mapping relationship between the service type of the path feature information and the basic path configuration; The process of determining the basic path configuration based on the path feature information and preset mapping rules includes: The service type that identifies the path feature information; The corresponding basic path configuration is determined in the mapping relationship based on the service type.

[0018] A fifth aspect of this application provides an apparatus for dynamic resource loading, the apparatus comprising: Processor, memory, input / output units, and bus; The processor is connected to the memory, the input / output unit, and the bus; The memory stores a program, and the processor calls the program to execute the dynamic resource loading method provided in the first or second aspect above.

[0019] The sixth aspect of this application provides a computer-readable storage medium on which a program is stored, which, when executed on a computer, performs the dynamic resource loading method provided in the first or second aspect described above.

[0020] As can be seen from the above technical solutions, the embodiments of this application have the following advantages: This application achieves cross-environment dynamic adaptation of static resource paths through the cooperation between the terminal and the web client. First, the terminal extracts the target resource tags from the HTML files in the web project to generate a resource list. This resource list is then integrated with a preset dynamic path mechanism to generate a dynamic loading task, which is inserted into the HTML file. Simultaneously, the hard-coded resource paths of the CSS and JS files are replaced with the target resource paths. Finally, this task is sent to the deployment server to generate the target application. When a user accesses the target application, the web client obtains the path characteristic information of the user's access URL. Based on this characteristic information and mapping rules, it determines the basic path configuration and sets it as a global variable. This allows for dynamic generation of the basic path according to the user's access scenario. Then, the web client combines the relative resource paths of the HTML files, the target resource paths of the CSS files, and the target resource paths of the JS files with the basic path configuration to form a dynamically combined path. Finally, dynamic resource loading is completed based on this dynamically combined path. This entire solution, through the cooperation between the terminal and the web client, can automatically adjust resource paths at runtime according to the user's access scenario. This avoids the problem of fixed paths requiring repeated builds due to hard-coding during traditional builds, improving the adaptability and deployment efficiency of web applications in cross-domain and cross-environment scenarios, and reducing repetitive operations in development and maintenance. Attached Figure Description

[0021] To more clearly illustrate the technical solutions in the embodiments of this application, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0022] Figure 1 A schematic flowchart of an embodiment of the dynamic resource loading method for a terminal provided in this application; Figure 2This is a schematic flowchart of an embodiment of the process of scanning and dividing hard-coded resource paths in the dynamic resource loading method for terminals provided in this application; Figure 3 A schematic flowchart of another embodiment of the method for dynamic resource loading applied to a terminal provided in this application; Figure 4 A schematic flowchart of an embodiment of the method for loading dynamic resources on the Web provided in this application; Figure 5 A schematic diagram of an embodiment of the system for dynamic resource loading applied to a terminal provided in this application; Figure 6 A schematic diagram of an embodiment of the system for dynamic resource loading applied to the Web, as provided in this application; Figure 7 A schematic diagram of an embodiment of the dynamic resource loading apparatus provided in this application. Detailed Implementation

[0023] It should be noted that the dynamic resource loading method provided in this application can be applied to both terminals and web applications. The following will describe the dynamic resource loading method of this application from the perspectives of both terminals and web applications through specific examples.

[0024] Please see Figure 1 This application first provides an embodiment of a method for dynamic resource loading applied to a terminal, the embodiment including: S101. Extract the target resource tags from the HTML files in the Web project and generate a resource list based on the target resource tags; In this embodiment, all HTML files in the Web project are first scanned to identify and extract target resource tags from the HTML files. These target resource tags are tags used to reference various static resources, such as... The tag is used to reference image resources. <link> The `<style>` tag is used to reference CSS stylesheet resources. <script>标签用于引用JavaScript脚本资源等。在提取出这些目标资源标签时，终端会基于目标资源标签生成一份包含所有需要加载的资源信息的资源清单。

[0025] 通过提取目标资源标签并生成资源清单，能够全面掌握Web项目中所有需要加载的静态资源信息，为后续的动态资源加载提供准确、完整的数据基础，确保动态资源加载能够有针对性地对各类资源进行处理，避免因资源信息缺失而导致加载错误或遗漏。

[0026] S102、将资源清单和预设动态路径机制融合，生成动态加载任务，并将动态加载任务插入HTML文件中，预设动态路径机制包括动态资源路径解析机制和动态资源路径创建机制；在得到资源清单后，将资源清单与预设动态路径机制进行融合。预设动态路径机制包含动态资源路径解析机制和动态资源路径创建机制，其中动态资源路径解析机制用于解析不同环境下资源路径的规则和特征，动态资源路径创建机制则用于根据解析结果和实际场景创建资源路径。

[0027] 在资源清单和预设动态路径机制融合过程中，基于资源清单结合动态资源路径解析机制和动态资源路径创建机制的逻辑，生成动态加载任务，所生成的动态加载任务会明确在不同访问场景下如何对资源进行加载。最后，将生成的动态加载任务插入到HTML文件中，使得HTML文件在被加载时能够触发这些动态加载任务。这样，不仅打破了传统静态路径的固定性，还提升了Web项目在不同环境下的适应性。

[0028] S103、将Web项目中CSS文件和JS文件的硬编码资源路径替换为目标资源路径，目标资源路径包括动态资源路径或预设图片服务器资源路径；本实施例中，先对Web项目中的CSS文件和JS文件进行全面扫描，扫描出以硬编码方式存在的硬编码资源路径。以硬编码方式存在的硬编码资源路径是指在CSS文件和JS文件中直接固定写入的资源引用路径，例如在CSS文件中的"background-image: url (' / static / images / bro.jpg')”以及在JS文件中指定的"var imgPath = ' / assets / pic.png'”等资源引用路径。

[0029] 随后，将这些硬编码资源路径替换为目标资源路径，目标资源路径包括动态资源路径或预设图片服务器资源路径，其中动态资源路径表示能够根据后续运行时的场景动态变化的资源路径，预设图片服务器资源路径则表示指向特定图片服务器的资源路径。

[0030] S104、将替换完成的Web项目发送至部署服务器，以使得部署服务器进行加载。

[0031] 在完成替换后，整个Web项目进行打包，通过网络或其他传输方式将打包好的Web项目发送至部署服务器。部署服务器在接收到Web项目后，对Web项目进行加载处理，并配置相关的运行环境参数，使Web项目能够在部署服务器上处于可访问状态。

[0032] 当用户访问Web项目时，部署服务器会将处理后的HTML文件、CSS文件以及JS 文件发送给用户的浏览器，此时HTML文件中插入的动态加载任务会生效，实现Web端资源的动态加载。

[0033] 该实施例通过终端对Web项目的处理与部署，实现了静态资源路径的跨环境动态适配。首先终端提取Web项目中HTML文件的目标资源标签生成资源清单，将资源清单与预设动态路径机制融合生成动态加载任务并插入HTML文件，同时替换CSS文件和JS文件的硬编码资源路径为目标资源路径，最后发送至部署服务器生成目标应用，以使得用户后续可以成功访问。整个流程形成了完整的资源动态处理链路，确保了资源路径的灵活性与可适配性，为后续与 Web端相互配合提供了坚实的基础，避免了传统构建时硬编码导致的路径固定需重复构建的问题，从根本上提高了Web应用在跨域名、跨环境场景下的适配灵活性和部署效率，减少了开发和运维的重复操作。

[0034] 在上述步骤S103中，在将Web项目中CSS文件和JS文件的硬编码资源路径替换为目标资源路径的过程中，需要对硬编码资源路径进行扫描和划分，请参阅图2，图2为本申请提供的应用于终端的动态资源加载的方法中对硬编码资源路径进行扫描和划分的一个实施例，该实施例包括：S201、对Web项目中CSS文件和JS文件进行扫描，得到CSS文件和JS文件的硬编码资源路径；本实施例中，需要先对Web项目中的所有CSS文件和JS文件进行全面扫描。在扫描过程中，会逐行解析CSS文件和JS文件中的内容，从解析后的CSS文件和JS文件中识别并提取以硬编码方式存在的资源路径，即硬编码资源路径，例如JS文件中的"loadScript (' / lib / jquery.min.js')”，这里的硬编码资源路径为" / lib / jquery.min.js”。

[0035] 通过对CSS文件和JS文件进行扫描并提取硬编码资源路径，能够全面掌握这些文件中静态资源的引用情况，为后续的路径划分和替换提供准确、完整的对象，确保后续处理不会遗漏任何需要动态适配的资源路径，为实现资源路径的动态化改造提供基础。

[0036] S202、根据预设资源类型将CSS文件的硬编码资源路径划分为图片类的资源路径和非图片类的资源路径；本实施例中，在获取CSS文件中的硬编码资源路径后，根据预设资源类型对这些硬编码资源路径进行分类划分，划分为图片类的资源路径和非图片类的资源路径。预设资源类型是基于资源的文件格式或用途来定义，例如图片类资源路径对应的文件格式包括.png、.jpg、.jpeg、.gif、.svg等，而非图片类资源路径则对应.css、.js、.font等格式的资源。

[0037] 具体的，主要通过解析硬编码资源路径的文件名后缀或路径中的特征标识，判断CSS文件中的硬编码资源路径所属的资源类型，例如CSS文件中的其中一个硬编码资源路径为".. / images / header-bg.jpg”，这个硬编码资源路径的文件后缀为.jpg，符合图片类的资源路径的特征，则该硬编码资源路径会被划分为图片类的资源路径；而CSS文件中的另一个硬编码资源路径为".. / styles / theme.css” ，这个硬编码资源路径的文件后缀为.css，属于非图片类的资源路径的特征，则会被划分到非图片类的资源路径中。

[0038] 根据预设资源类型对CSS文件的硬编码资源路径进行分类，实现了对不同类型资源路径的精细化区分，确保替换方式与资源类型相适配，提升了资源路径处理的合理性和针对性。

[0039] S203、将CSS文件中图片类的资源路径替换为预设图片服务器资源路径，并将CSS文件中非图片类的资源路径和JS文件的硬编码资源路径替换为动态资源路径。

[0040] 本实施例中，在将CSS文件中的硬编码资源路径划分完成后，对CSS文件中的图片类的资源路径、非图片类的资源路径以及JS文件中的硬编码资源路径进行针对性替换。

[0041] 具体的，将CSS文件中被划分为图片类的资源路径替换为预设图片服务器资源路径，这个预设图片服务器资源路径是用于存储和分发图片资源的服务器，例如图片类的资源路径为"url('images / icon.png')”，替换为预设图片服务器资源路径则是"url ('http: / / img-server.example.com / icons / icon.png')”；而CSS文件中非图片类的资源路径和JS文件中的所有硬编码资源路径，则替换为动态资源路径，动态资源路径包含可以动态解析的变量，能够在运行时根据实际环境生成具体路径。通过针对性的差异化替换策略，将CSS文件中的图片类的资源路径指向专门的图片服务器，有利于图片资源的集中管理和高效分发，而将非图片类的资源路径和JS文件中的硬编码资源路径替换为动态资源路径，能在用户实际访问时根据环境动态适配，进一步提升了Web项目资源加载的灵活性和效率，减少了跨环境部署时的路径适配问题，降低了运维成本。

[0042] 请参阅图3，本申请还提供了一种应用于终端的动态资源加载的方法的另一个实施例，该实施例包括：S301、对Web项目中HTML文件进行解析，并对已解析的HTML文件进行识别分析，得到全部资源标签；本实施例中，首先对Web项目中的所有HTML文件进行解析，在解析完成后，对已解析的HTML文件进行识别分析，遍历已解析的HTML文件的结构化内容，识别出所有用于引用资源的标签，即全部资源标签。这些全部资源标签涵盖了HTML文件中所有涉及外部资源引用的标签，例如用于引用图片的标签、引用样式表的<link>标签、引用脚本的<script>标签等。对HTML文件进行解析并识别分析得到全部资源标签，能够全面覆盖 HTML 中所有的资源引用点，为后续精准提取目标资源标签提供了完整的基础数据。

[0043] 具体的，通过解析HTML文件中的结构化数据，依据HTML语法规则和属性特征识别出所有具有资源引用功能的标签，确保不遗漏任何资源引用，例如HTML文件中包含<imgsrc="banner.jpg">、<link rel="stylesheet" href="main.css">、<script src="app.js">< / script> After parsing and identification analysis, these tags all fall within the scope of all resource tags.

[0044] S302. Extract the target resource tags, including script tags and link tags, from all resource tags; In this embodiment, after obtaining all resource tags, the target resource tags are filtered and extracted from all resource tags. The target resource tags include script tags and link tags, wherein the script tags are... <script>标签，主要用于引用脚本资源；链接标签则是指<link>标签，主要用于引用样式表资源。

[0045] 在提取的过程中，主要通过脚本标签和链接标签的名称或关键属性来进行提取，例如全部资源标签中包括、<script>、<link rel="stylesheet">以及<link rel="icon">的标签，通过这些标签的名称或关键属性，便能识别和提取出脚本标签和链接标签作为目标资源标签，即这些标签中的<script>标签和<link rel="stylesheet">标签。这样，实现了对关键资源引用标签的精准聚焦，进一步提升了动态资源加载的针对性和有效性。

[0046] S303、基于目标资源标签生成资源清单；S304、将资源清单和预设动态路径机制融合，生成动态加载任务，预设动态路径机制包括动态资源路径解析机制和动态资源路径创建机制；在本实施例中，步骤S303至步骤S304与前述实施例步骤S101至步骤S102类似，此处不再赘述。

[0047] S305、对动态加载任务进行压缩，并将压缩好的动态加载任务插入HTML文件的指定标签下，指定标签包括<head>标签和<body>标签；本实施例中，对已生成的动态加载任务进行压缩处理，压缩方式包括去除任务代码中的空格、换行符、注释等无关字符，合并重复的逻辑语句或采用代码压缩算法减小动态加载任务的体积。

[0048] 压缩完成后，会根据动态加载任务的功能和资源加载优先级，将动态加载任务插入HTML文件的指定标签下，其中指定标签包括<head>标签和<body>标签。

[0049] 对动态加载任务进行压缩不仅可以减少网络传输数据量，还能提升任务加载速度。压缩完成的同时，将压缩后的动态加载任务插入<head>标签和<body>标签下，确保了动态加载任务在合适时机执行，既避免了关键资源加载延迟，又防止了非必要任务对页面初始加载的干扰，从而优化了Web页面的加载性能和用户体验。

[0050] S306、将Web项目中CSS文件和JS文件的硬编码资源路径替换为目标资源路径，目标资源路径包括动态资源路径或预设图片服务器资源路径；S307、将替换完成的Web项目发送至部署服务器，以使得部署服务器进行加载。

[0051] 在本实施例中，步骤S306至步骤S307与前述实施例步骤S103至步骤S104类似，此处不再赘述。

[0052] 请参阅图4，本申请还提供了一种应用于Web端的动态资源加载的方法的一个实施例，该实施例包括：S401、当用户访问部署服务器并成功加载目标应用后，获取用户访问目标应用的URL地址，并从URL地址中提取出路径特征信息；本实施例中，当用户通过浏览器访问部署服务器并成功加载目标应用后，Web端会捕获用户访问目标应用时的URL地址。由于URL地址包含了用户访问的具体位置和环境信息，因此在获取到URL地址时，Web端会对获取到的URL地址进行解析，从中提取出路径特征信息。

[0053] 进一步的，路径特征信息包括URL地址中的域名、子路径、端口号等能够反映访问环境或服务类型的部分，例如用户访问的URL地址为"http: / / test.example.com:8080 / shopping / cart”，Web端会从中提取出域名"test.example.com”、端口号"8080”、子路径" / shopping / cart”等作为路径特征信息。

[0054] 获取用户访问的URL地址并提取路径特征信息，能够准确捕捉用户的访问场景，为后续基于不同场景确定基础路径配置提供基础，确保动态资源加载能够贴合用户的实际访问环境。

[0055] S402、基于路径特征信息和预设映射规则确定基础路径配置，并将基础路径配置设置为部署服务器所加载的Web项目的全局变量；本实施例中，Web端在获取到路径特征信息后，会将路径特征信息与预设映射规则进行匹配，根据匹配结果确定当前访问场景下的基础路径配置。确定基础路径配置的同时，Web端会将这个基础路径配置设置为部署服务器所加载的Web项目的全局变量，使得Web项目中的各个文件都能够访问到这个基础路径配置，例如路径特征信息显示用户访问的是测试环境的域名"test.example.com”，根据预设映射规则所确定的基础路径配置为"http: / / test-resource.example.com / static / ”，那么这个"http: / / test-resource.example.com / static / ”路径便会被Web端设置为部署服务器所加载的Web项目的全局变量。在一个可选的实施例中，预设映射规则为路径特征信息的服务类型与基础路径配置的映射关系，在基于路径特征信息和预设映射规则确定基础路径配置的过程中，需要先识别路径特征信息的服务类型，再基于服务类型在映射关系中确定所对应的基础路径配置。

[0056] 具体的，预设映射规则是预先设定好的路径特征信息的服务类型与基础路径配置之间的对应关系，例如不同的域名对应不同的基础路径，不同的子路径对应不同的资源存储目录等。在基于路径特征信息和预设映射规则确定基础路径配置时，首先会对提取到的路径特征信息进行分析，识别出路径特征信息中所反映的服务类型，其中服务类型主要从URL地址的子路径中识别，例如路径特征信息中的" / shopping / ”表示购物服务，" / payment / ”表示支付服务。

[0057] 识别出服务类型后，便可以在预先设定好的路径特征信息的服务类型与基础路径配置之间的对应关系中查找该服务类型所对应的基础路径配置，例如预设映射关系中购物服务对应基础路径配置"http: / / shop-resource.example.com / static / ”，支付服务对应"http: / / pay-resource.example.com / static / ”。这样，能够针对不同服务类型提供专属的基础路径配置，满足了不同服务对资源加载的特定需求，进一步提升了动态资源加载的灵活性，确保了各类服务高效加载。

[0058] S403、将Web项目的HTML文件中的相对资源路径与JS文件和CSS文件中的目标资源路径，分别更新为相对资源路径或目标资源路径与基础路径配置两者组合的动态组合路径；本实施例中，在得到基础路径配置后，首先对Web项目中HTML文件的相对资源路径以及JS文件和CSS文件中的目标资源路径进行处理。具体的，需要先将HTML 文件中的相对资源路径与基础路径配置组合，生成动态组合路径，例如相对资源路径为"images / logo.png”，基础路径配置为"http: / / test-resource.example.com / static / ”，那么将相对资源路径与基础路径配置组合后的动态组合路径为"http: / / test-resource.example.com / static / images / logo.png”。随后，将JS文件和CSS文件中的目标资源路径与基础路径配置组合作为动态组合路径，例如JS文件中的目标资源路径为"{{basePath}}data / config.json”，基础路径配置为"http: / / test-resource.example.com / static / ”，则组合后的动态组合路径为"http: / / test-resource.example.com / static / data / config.json”。

[0059] 分别将相对资源路径或目标资源路径与基础路径配置组合成动态组合路径，实现了资源路径的动态生成，使得不同环境下的资源都能被正确引用，避免了因环境变化导致的路径错误，确保了Web项目在不同访问场景下资源的正常加载。

[0060] S404、根据动态组合路径和预设加载规则执行URL地址的动态资源加载。

[0061] 本实施例中，在生成动态组合路径后，根据动态组合路径和预设加载规则执行URL地址的动态资源加载，预设加载规则包括资源的加载顺序优先级和加载方式。这样，进一步确保了资源加载的有序性和高效性，既保证了核心资源的优先加载，又优化了非核心资源的加载方式，提升了Web页面的加载速度和用户体验。

[0062] 该实施例在用户访问目标应用时，Web端获取用户访问URL地址的路径特征信息，基于特征信息和映射规则确定基础路径配置并设为全局变量，这样能够根据用户访问场景动态生成基础路径。然后，Web端将HTML文件的相对资源路径、CSS文件的目标资源路径和JS文件的目标资源路径与基础路径配置组合为动态组合路径，最终根据动态组合路径完成动态资源加载。整个方案通过终端和Web端的相互配合，能够在运行时根据用户的访问场景自动调整资源路径，避免了传统构建时硬编码导致的路径固定需重复构建问题，提高了Web应用在跨域名、跨环境场景下的适配灵活性和部署效率，减少了开发和运维的重复操作。

[0063] 下面对本申请提供的一种终端进行详细说明，请参阅图5，图5为本申请提供的终端一个实施例，该终端包括：生成单元501，用于提取Web项目中HTML文件的目标资源标签，并基于目标资源标签生成资源清单；插入单元502，将资源清单和预设动态路径机制融合，生成动态加载任务，并将动态加载任务插入HTML文件中，预设动态路径机制包括动态资源路径解析机制和动态资源路径创建机制；替换单元503，用于将Web项目中CSS文件和JS文件的硬编码资源路径替换为目标资源路径，目标资源路径包括动态资源路径或预设图片服务器资源路径；发送单元504，用于将替换完成的Web项目发送至部署服务器，以使得部署服务器进行加载。

[0064] 可选的，替换单元503具体用于：对Web项目中CSS文件和JS文件进行扫描，得到CSS文件和JS文件的硬编码资源路径；根据预设资源类型将CSS文件的硬编码资源路径划分为图片类的资源路径和非图片类的资源路径；将CSS文件中图片类的资源路径替换为预设图片服务器资源路径，并将CSS文件中非图片类的资源路径和JS文件的硬编码资源路径替换为动态资源路径。

[0065] 可选的，还包括压缩单元505，具体用于：对动态加载任务进行压缩；将动态加载任务插入HTML文件中，包括：将压缩好的动态加载任务插入HTML文件的指定标签下，指定标签包括<head>标签和<body>标签。

[0066] 可选的，生成单元501具体用于：目标资源标签包括脚本标签和链接标签；提取Web项目中HTML文件的目标资源标签，包括：对Web项目中HTML文件进行解析，并对已解析的HTML文件进行识别分析，得到全部资源标签；从全部资源标签中提取包括脚本标签和链接标签的目标资源标签。

[0067] 具体实现方式参考图1-图3实施例，此次不做赘述。

[0068] 下面对本申请提供的一种Web端进行详细说明，请参阅图6，图6为本申请提供的Web端一个实施例，该Web端包括：提取单元601，用于当用户访问部署服务器完成加载得到的目标应用时，获取用户访问目标应用的URL地址，并从URL地址中提取出路径特征信息；设置单元602，用于基于路径特征信息和预设映射规则确定基础路径配置，并将基础路径配置设置为部署服务器所加载的Web项目的全局变量；更新单元603，用于将Web项目的HTML文件中的相对资源路径与JS文件和CSS文件中的目标资源路径，分别更新为相对资源路径或目标资源路径与基础路径配置两者组合的动态组合路径；执行单元604，用于根据动态组合路径和预设加载规则执行URL地址的动态资源加载。

[0069] 可选的，设置单元602具体用于：预设映射规则为路径特征信息的服务类型与基础路径配置的映射关系；基于路径特征信息和预设映射规则确定基础路径配置，包括：识别路径特征信息的服务类型；基于服务类型在映射关系中确定所对应的基础路径配置。

[0070] 具体实现方式参考图4实施例，此次不做赘述。

[0071] 本申请还提供了一种动态资源加载的装置，请参阅图7，图7为本申请提供的动态资源加载的装置的一个实施例，该装置包括：处理器701、存储器702、输入输出单元703、总线704；处理器701与存储器702、输入输出单元703以及总线704相连；存储器702保存有程序，处理器701调用程序以执行如上任一动态资源加载的方法。

[0072] 本申请还涉及一种计算机可读存储介质，计算机可读存储介质上保存有程序，其特征在于，当程序在计算机上运行时，使得计算机执行如上任一动态资源加载的方法。

[0073] 所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

[0074] 在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

[0075] 所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

[0076] 另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

[0077] 所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备（可以是个人计算机，服务器，或者网络设备等）执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器（ROM，read-onlymemory）、随机存取存储器（RAM，random access memory）、磁碟或者光盘等各种可以存储程序代码的介质。< / script>

Claims

1. A method for dynamically loading resources, applied to a terminal, characterized in that, include: Extract the target resource tags from the HTML files in the Web project, and generate a resource list based on the target resource tags; The resource list and the preset dynamic path mechanism are integrated to generate a dynamic loading task, and the dynamic loading task is inserted into the HTML file. The preset dynamic path mechanism includes a dynamic resource path parsing mechanism and a dynamic resource path creation mechanism. Replace the hard-coded resource paths of CSS and JS files in the Web project with target resource paths, including dynamic resource paths or preset image server resource paths. The replaced web project is sent to the deployment server so that the deployment server can load it.

2. The method according to claim 1, characterized in that, The step of replacing the hard-coded resource paths of CSS and JS files in the Web project with the target resource paths includes: Scan the CSS and JS files in the web project to obtain the hard-coded resource paths of the CSS and JS files; Based on the preset resource type, the hard-coded resource paths of the CSS file are divided into image resource paths and non-image resource paths; Replace the resource paths of image classes in the CSS file with preset image server resource paths, and replace the resource paths of non-image classes in the CSS file and the hard-coded resource paths in the JS file with dynamic resource paths.

3. The method according to claim 1, characterized in that, Before inserting the dynamically loaded task into the HTML file, the method further includes: The dynamically loaded task is compressed; The step of inserting the dynamically loaded task into the HTML file includes: The compressed dynamically loaded task is inserted under a specified tag in the HTML file, where the specified tag includes the `<task>` tag and the `<task>` tag.

4. The method according to any one of claims 1 to 3, characterized in that, The target resource tags include script tags and link tags; The extraction of target resource tags from HTML files in a web project includes: The HTML files in the Web project are parsed, and the parsed HTML files are identified and analyzed to obtain all resource tags; Extract the target resource tags, including script tags and link tags, from all the resource tags.

5. A method for dynamically loading resources, applied to a web application, characterized in that, include: After a user accesses the deployment server and successfully loads the target application, the URL address of the user accessing the target application is obtained, and path feature information is extracted from the URL address. The basic path configuration is determined based on the path feature information and the preset mapping rules, and the basic path configuration is set as a global variable of the Web project loaded by the deployment server; Update the relative resource paths in the HTML files and the target resource paths in the JS and CSS files of the Web project to either the relative resource paths or a dynamic combination of the target resource paths and the base path configuration, respectively. Dynamic resource loading of the URL address is performed according to the dynamic combination path and preset loading rules.

6. The method according to claim 5, characterized in that, The preset mapping rule is the mapping relationship between the service type of the path feature information and the basic path configuration; The process of determining the basic path configuration based on the path feature information and preset mapping rules includes: The service type that identifies the path feature information; The corresponding basic path configuration is determined in the mapping relationship based on the service type.

7. A terminal, characterized in that, include: The generation unit is used to extract target resource tags from HTML files in a Web project and generate a resource list based on the target resource tags; The insertion unit integrates the resource list and the preset dynamic path mechanism to generate a dynamic loading task, and inserts the dynamic loading task into the HTML file. The preset dynamic path mechanism includes a dynamic resource path parsing mechanism and a dynamic resource path creation mechanism. The replacement unit is used to replace the hard-coded resource paths of CSS files and JS files in the Web project with target resource paths, wherein the target resource paths include dynamic resource paths or preset image server resource paths. The sending unit is used to send the replaced Web project to the deployment server so that the deployment server can load it.

8. A web application, characterized in that, include: The extraction unit is used to obtain the URL address of the target application accessed by the user when the user accesses the target application that has been loaded by the deployment server, and extract path feature information from the URL address. The setting unit is used to determine the basic path configuration based on the path feature information and preset mapping rules, and set the basic path configuration as a global variable of the Web project loaded by the deployment server; The update unit is used to update the relative resource paths in the HTML files of the Web project and the target resource paths in the JS and CSS files to either the relative resource paths or a dynamic combination of the target resource paths and the base path configuration, respectively. An execution unit is used to perform dynamic resource loading of the URL address according to the dynamic combination path and preset loading rules.

9. A device for dynamic resource loading, characterized in that, include: Processor, memory, input / output units, and bus; The processor is connected to the memory, the input / output unit, and the bus; The memory stores a program, which the processor invokes to perform the method as described in any one of claims 1 to 4 or 5 to 6.

10. A computer-readable storage medium having a program stored thereon, the program performing the method as claimed in any one of claims 1 to 4 or 5 to 6 when executed on a computer.

Images