Resource management method and device, resource loading method and device and computer storage medium

By uploading the image resources of the ReactNative project to a remote server and establishing a mapping relationship, the problem of RN package size expansion was solved, achieving efficient resource management and flexible loading.

CN121957657APending Publication Date: 2026-05-01HANGZHOU HUACHENG SOFTWARE TECH CO LTD
View PDF 0 Cites 0 Cited by

Patent Information

Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
HANGZHOU HUACHENG SOFTWARE TECH CO LTD
Filing Date
2025-12-02
Publication Date
2026-05-01

AI Technical Summary

Technical Problem

In React Native hybrid development, image resource management leads to an increase in the size of the RN package. Existing technical solutions store images locally in the package, which also causes the package size to expand.

Method used

Upload image resources to a remote server, establish image resource mapping relationships, build application code packages, and decouple image resources from application code through a centralized configuration file to generate an application package that does not contain image resources.

Benefits of technology

It effectively reduces application package size, lowers maintenance costs, improves development efficiency, and enables flexible management and loading of image resources.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN121957657A_ABST
    Figure CN121957657A_ABST
Patent Text Reader

Abstract

The invention provides a resource management method, a resource loading method, a resource processing device and a computer storage medium. The resource management method comprises the following steps: determining a picture resource of a management project, and uploading the picture resource to a remote server; creating a centralized configuration file in the management project, and defining a picture resource mapping relation; wherein the picture resource mapping relationship comprises a corresponding relationship between a picture resource logic name and a resource path; and constructing an application code package of the management project according to the picture resource mapping relationship. By means of the resource management method, the picture resources are uploaded to the remote server to be stored, the application code package only contains the service codes and does not need to contain the picture resources, and the size of a native application package is effectively reduced.
Need to check novelty before this filing date? Find Prior Art

Description

Resource management methods, resource loading methods, devices, and computer storage media Technical Field

[0001] This application relates to the field of mobile application development technology, and in particular to a resource management method, a resource loading method, a resource processing device, and a computer storage medium. Background Technology

[0002] React Native (RN) is an open-source cross-platform mobile application development framework from Facebook. In React Native hybrid development, image resource management presents significant conflicts between development and production environments. Current solutions involve storing images locally and packaging them into the RN package during the build process, but this increases the size of the RN package. Summary of the Invention

[0003] To address the aforementioned technical problems, this application proposes a resource management method, a resource loading method, a resource processing device, and a computer storage medium.

[0004] To address the aforementioned technical problems, this application proposes a resource management method, which includes: identifying image resources for a management project and uploading the image resources to a remote server; creating a centralized configuration file in the management project to define image resource mapping relationships; wherein the image resource mapping relationship includes a correspondence between logical names and resource paths of image resources; and constructing an application code package for the management project based on the image resource mapping relationship.

[0005] The image resource mapping relationship includes a local mapping relationship and a remote mapping relationship; the local mapping relationship includes the correspondence between the logical name of the image resource and the local resource path; the remote mapping relationship includes the correspondence between the logical name of the image resource and the remote server address path.

[0006] Wherein, the key of the remote mapping relationship is the logical name of the image resource, and the value is the remote server address path; wherein, the remote server address is constructed based on the host address of the remote server and the logical name of the image resource.

[0007] The resource management method further includes, after constructing the application code package of the management project based on the image resource mapping relationship, generating a native application package based on the application code package and deploying the native application package to the production environment.

[0008] The step of uploading the image resources to the remote server includes: determining the resource module of each image resource according to the module corresponding to each image resource in the management project; uploading the image resources to the remote server according to the name of the resource module, so that the remote server can complete the overwriting of files with the same path within the module according to the name of the resource module.

[0009] To address the aforementioned technical problems, this application also proposes a resource loading method, which includes: determining the loading mode of the current application; determining an image resource mapping relationship based on the loading mode; finding the resource path of the image resource based on the image resource mapping relationship; and downloading and displaying the image resource according to the resource path.

[0010] The step of determining the loading mode of the current application includes: determining the loading mode of the current application based on global environment variables; wherein the loading mode includes development mode and non-development mode.

[0011] The step of determining the image resource mapping relationship according to the loading mode includes: determining the local mapping relationship according to the development mode; the step of finding the resource path of the image resource according to the image resource mapping relationship includes: finding the local resource path of the module to be loaded from the local resource library according to the local mapping relationship.

[0012] To address the aforementioned technical problems, this application also proposes a resource processing apparatus, which includes a memory and a processor coupled to the memory; wherein the memory is used to store program data, and the processor is used to execute the program data to implement the resource management method described above.

[0013] To address the aforementioned technical problems, this application also proposes a computer storage medium for storing program data, which, when executed by a computer, is used to implement the aforementioned resource management method.

[0014] Compared with existing technologies, the beneficial effects of this application are as follows: the resource processing device determines the image resources of the management project and uploads the image resources to a remote server; a centralized configuration file is created in the management project to define the image resource mapping relationship; wherein, the image resource mapping relationship includes the correspondence between the logical name of the image resource and the resource path; and the application code package of the management project is constructed according to the image resource mapping relationship. Through the above resource management method, the constructed application code package only contains basic code and the image resource mapping relationship, without the need to store image resources, which can effectively reduce the size of the application package. Attached Figure Description

[0015] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments 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. Specifically: Figure 1 is a flowchart illustrating an embodiment of the resource management method provided by this application; Figure 2 is a flowchart illustrating a resource processing and publishing scheme provided by this application; Figure 3 is a flowchart illustrating a scheme for establishing an image mapping configuration file provided by this application; Figure 4 is a flowchart illustrating an embodiment of the resource loading method provided by this application; Figure 5 is a flowchart illustrating an image resource parsing scheme provided by this application; Figure 6 is a structural schematic diagram illustrating an embodiment of the resource processing device provided by this application; Figure 7 is a structural schematic diagram illustrating an embodiment of the computer storage medium provided by this application. Detailed Implementation

[0016] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of the embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of this application.

[0017] The terms “first,” “second,” “third,” “fourth,” etc. (if present) in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a particular order or sequence. It should be understood that such data can be interchanged where appropriate so that embodiments of the application described herein can be implemented, for example, in orders other than those illustrated or described herein. Furthermore, the terms “comprising” and “having,” and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0018] To avoid the expansion of application package size caused by local packaging of image resources, this application provides a resource management method. Please refer to Figures 1 and 2 for details. Figure 1 is a flowchart of an embodiment of the resource management method provided by this application, and Figure 2 is a flowchart of the resource processing and publishing scheme provided by this application.

[0019] The resource management method of this application is applied to a resource processing device, wherein the resource processing device can be a server, a terminal device, or a system in which the server and the terminal device cooperate with each other. Accordingly, the various parts of the resource processing device, such as each unit, subunit, module, and submodule, can be all set in the server, all set in the terminal device, or set in both the server and the terminal device respectively.

[0020] Furthermore, the aforementioned server can be either hardware or software. When the server is hardware, it can be implemented as a distributed server cluster consisting of multiple servers, or as a single server. When the server is software, it can be implemented as multiple software programs or software modules, such as software or software modules used to provide distributed server functionality, or as a single software program or software module; no specific limitations are made here.

[0021] It should be noted that the resource processing device in this application can be a development platform.

[0022] As shown in Figure 1, the specific steps are as follows: Step S11: Determine the image resources of the managed project and upload the image resources to the remote server.

[0023] In this embodiment, the resource processing device establishes a build pipeline as shown in Figure 2, automatically executing the build process through preprocessing scripts for automated build pipelines in non-development environments (testing / production). Its core objective is to extract image resources from the application package and host them on a CDN, thereby reducing the application package size.

[0024] Specifically, the resource processing unit scans the project's source directory, identifies all image files referenced in the business logic, thus determining the project's image resources, and copies the image resources to be published to a temporary directory. Then, the resource processing unit uses file transfer tools, including but not limited to SCP (Secure Copy) and AWS CLI (AWS Command Line Interface), to upload all image resources in the temporary directory to a pre-determined remote CDN (Content Delivery Network) server.

[0025] Specifically, when uploading all image resources, the resource processing device can divide all image resources according to the application module corresponding to each image resource. This ensures that each image resource can be uploaded to the directory corresponding to each application module on the remote CDN server, facilitating resource management, including but not limited to: adding, deleting, updating, and adjusting resources. These directories are usually named after the project name or module name.

[0026] Furthermore, as shown in Figure 2, the resource processing device can also overwrite files with the same path within this module. That is, if a file with the same name already exists in the CDN target directory, it will be overwritten directly. This can effectively simplify the process, eliminate the need to manually clean up old files, and ensure that the resources on the CDN are always consistent with the version in the code repository.

[0027] This application embodiment automates the process of uploading images to CDN by integrating a resource processing pipeline into CI / CD.

[0028] Step S12: Create a centralized configuration file in the management project to define the image resource mapping relationship; wherein, the image resource mapping relationship includes the correspondence between the logical name of the image resource and the resource path.

[0029] In this embodiment of the application, the resource processing device decouples image resources and application packages by establishing an image mapping configuration file. By establishing a mapping relationship for image resources, it can achieve a slimming effect by deploying and publishing an application code package that only contains the mapping relationship and does not contain the image resources themselves.

[0030] Please refer to Figure 3 for details. Figure 3 is a flowchart illustrating the scheme for establishing an image mapping configuration file provided in this application.

[0031] As shown in Figure 3, the resource processing device creates a centralized configuration file (such as imageMap.js) that defines two mapping relationships: LocalMap: an object where the key is the logical name of the image and the value is the local resource path of that image (referenced using the require() syntax). This mapping is used during the development phase.

[0032] RemoteMap: An object where the key matches the local mapping and the value is the concatenated complete URL (UniformResourceLocator). This URL consists of the configured remote resource server host address and the logical name (or filename) of the image.

[0033] This application embodiment makes image management clear at a glance through centralized mapping configuration. Adding new images or modifying CDN addresses can be done in one place, resulting in low maintenance costs and easy expansion.

[0034] Step S13: Construct the application code package for the management project based on the image resource mapping relationship.

[0035] In this embodiment of the application, as shown in FIG2, the resource processing device generates an application package according to the image resource mapping relationship established in step S12, and executes the standard RN build command through the preprocessing script to generate a jsbundle package that does not contain static binding of image resources, namely the application code package and the native application package.

[0036] The jsbundle package is the "soul" of a React Native application, containing all JavaScript code and business logic; while the native application package is the "body," a complete application container that can be installed on a mobile device, containing the "soul." The jsbundle package is a plain text file containing all JavaScript / TypeScript source code after conversion, merging, and compression, as well as React components, business logic, and the JS code of dependent third-party libraries. The native application package is an installable application file.

[0037] In this embodiment, neither the jsbundle package nor the native application package contains the project's business image resources, because these images have been uploaded to the CDN, which effectively reduces the size of the installation package.

[0038] Specifically, since the code (or build script) has already pointed the image reference path to the CDN address based on environment variables in the previous steps, this packaging process does not statically bundle the image's binary data into the final jsbundle file.

[0039] Finally, the resource processing unit deploys the "slimmed-down" jsbundle package and native application package generated in the above stages to the production environment.

[0040] Deployment methods include, but are not limited to: Hot update: only the jsbundle is updated (via platforms such as CodePush), and users do not need to reinstall the app.

[0041] App Store Release: Submit the native app package (APK / IPA) containing the new jsbundle to the Apple App Store or Google Play Store. Users will need to download or update the entire app.

[0042] The resource management method of this application places all local images on the remote end. During the build phase, all local images are packaged and uploaded to the CDN corresponding module directory, while the jsbundle package only contains business code, truly achieving "slimming down" of RN package size.

[0043] Based on the resource management method of the above embodiments, this application also provides a resource loading method applied to a user terminal or mobile terminal. Please refer to Figures 4 and 5 for details. Figure 4 is a flowchart of an embodiment of the resource loading method provided by this application, and Figure 5 is a flowchart of the image resource parsing scheme provided by this application.

[0044] As shown in Figure 4, the specific steps are as follows: Step S21: Determine the loading mode of the current application.

[0045] In this embodiment of the application, as shown in Figure 5, the resource processing device determines whether the current application's loading mode is development mode or non-development mode. Non-development mode includes, but is not limited to, test mode and production mode.

[0046] Specifically, this application provides a solution for users to determine the current application loading mode by using the global environment variable (__DEV__) provided by the ReactNative framework to determine whether the current application is in development mode.

[0047] Here, `__DEV__` is a global boolean variable provided by the React Native framework. When the application is running in development mode (e.g., debugging via the Metro build service), `__DEV__` is set to `true`; in production mode (the released application), it is set to `false`. Therefore, the resource handling unit only needs to determine the value of `__DEV__` to determine the current application's loading mode.

[0048] This application embodiment utilizes the inherent __DEV__ variable in React Native to achieve fully automatic switching of image resource loading strategies. Developers do not need to worry about environmental differences, which greatly reduces manual operation costs and the probability of errors.

[0049] Step S22: Determine the image resource mapping relationship according to the loading mode.

[0050] In this embodiment, if in development mode (__DEV__==true), the resource processing device looks up the corresponding local resource reference from the local mapping relationship and returns it. If not in development mode (__DEV__==false), the resource processing device looks up the corresponding complete URL from the remote mapping relationship and returns an object of the form {uri: url} (a format recognizable by RN's Image component).

[0051] The aforementioned local resources come from a temporary server, which is different from the development platform's storage space and remote CDN server. The business code obtains images through a unified interface, decoupling it from the specific image source.

[0052] This application embodiment allows for hot updates and debugging of local images without starting a CDN service during the development phase, ensuring the best development experience.

[0053] Step S23: Find the resource path of the image resource according to the image resource mapping relationship.

[0054] Step S24: Download and display the image resources according to the resource path.

[0055] In this embodiment, the resource processing device locates the resource path of the image resource through steps S22 and S23, including but not limited to local resource references and remote image URIs as shown in Figure 5. Then, the resource processing device downloads and displays the image resource based on this resource path, completing the resource loading task.

[0056] Those skilled in the art will understand that, in the above-described method of the specific implementation, the order in which each step is written does not imply a strict execution order and does not constitute any limitation on the implementation process. The specific execution order of each step should be determined by its function and possible internal logic.

[0057] To implement the above-mentioned resource management method and / or resource loading method, this application also proposes a resource processing device. Please refer to FIG6 for details. FIG6 is a schematic diagram of the structure of an embodiment of the resource processing device provided in this application.

[0058] The resource processing device 400 in this embodiment includes a processor 41, a memory 42, an input / output device 43, and a bus 44.

[0059] The processor 41, memory 42, and input / output device 43 are respectively connected to the bus 44. The memory 42 stores program data, and the processor 41 is used to execute the program data to implement the resource management method and / or resource loading method described in the above embodiments.

[0060] In this embodiment, processor 41 can also be referred to as CPU (Central Processing Unit). Processor 41 may be an integrated circuit chip with signal processing capabilities. Processor 41 can also be a general-purpose processor, digital signal processor (DSP), application-specific integrated circuit (ASIC), field-programmable gate array (FPGA), or other programmable logic device, discrete gate or transistor logic device, or discrete hardware component. The general-purpose processor can be a microprocessor, or processor 41 can be any conventional processor.

[0061] This application also provides a computer storage medium. Please continue to refer to FIG7. FIG7 is a schematic diagram of the structure of an embodiment of the computer storage medium provided in this application. The computer storage medium 600 stores a computer program 61. When the computer program 61 is executed by the processor, it is used to implement the resource management method and / or resource loading method of the above embodiment.

[0062] When the embodiments of this application are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) or processor to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0063] The above description is merely an embodiment of this application and does not limit the patent scope of this application. Any equivalent structural or procedural transformations made using the content of this application's specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the patent protection scope of this application.

Claims

1. A resource management method, characterized in that, The resource management method includes: identifying image resources for a management project and uploading the image resources to a remote server; creating a centralized configuration file for the management project to define image resource mapping relationships; wherein the image resource mapping relationship includes the correspondence between the logical name of the image resource and the resource path; and constructing the application code package of the management project based on the image resource mapping relationship.

2. The resource management method according to claim 1, characterized in that, The image resource mapping relationship includes local mapping relationship and remote mapping relationship; wherein, the local mapping relationship includes the correspondence between the logical name of the image resource and the local resource path; the remote mapping relationship includes the correspondence between the logical name of the image resource and the remote server address path.

3. The resource management method according to claim 2, characterized in that, The key of the remote mapping relationship is the logical name of the image resource, and the value is the remote server address path; wherein, the remote server address is constructed based on the host address of the remote server and the logical name of the image resource.

4. The resource management method according to claim 1, characterized in that, After constructing the application code package of the management project based on the image resource mapping relationship, the resource management method further includes: generating a native application package based on the application code package; and deploying the native application package to the production environment.

5. The resource management method according to claim 1, characterized in that, Uploading the image resources to the remote server includes: determining the resource module of each image resource according to the module corresponding to each image resource in the management project; uploading the image resources to the remote server according to the name of the resource module, so that the remote server can overwrite files with the same path within the module according to the name of the resource module.

6. A resource loading method, characterized in that, The resource loading method includes: determining the loading mode of the current application; determining the image resource mapping relationship according to the loading mode; finding the resource path of the image resource according to the image resource mapping relationship; and downloading and displaying the image resource according to the resource path.

7. The resource loading method according to claim 6, characterized in that, Determining the loading mode of the current application includes: determining the loading mode of the current application based on global environment variables; wherein the loading mode includes development mode and non-development mode.

8. The resource loading method according to claim 7, characterized in that, The step of determining the image resource mapping relationship according to the loading mode includes: determining the local mapping relationship according to the development mode; the step of finding the resource path of the image resource according to the image resource mapping relationship includes: finding the local resource path of the module to be loaded from the local resource library according to the local mapping relationship.

9. A resource processing device, characterized in that, The resource processing apparatus includes a memory and a processor coupled to the memory; wherein the memory is used to store program data, and the processor is used to execute the program data to implement the resource management method as described in any one of claims 1 to 5, and / or the resource loading method as described in any one of claims 6 to 8.

10. A computer storage medium, characterized in that, The computer storage medium is used to store program data, which, when executed by the computer, is used to implement the resource management method as described in any one of claims 1 to 5, and / or the resource loading method as described in any one of claims 6 to 8.