CN111796878A - 一种应用于单页应用的资源拆分、加载方法和装置 - Google Patents
一种应用于单页应用的资源拆分、加载方法和装置 Download PDFInfo
- Publication number
- CN111796878A CN111796878A CN202010506319.7A CN202010506319A CN111796878A CN 111796878 A CN111796878 A CN 111796878A CN 202010506319 A CN202010506319 A CN 202010506319A CN 111796878 A CN111796878 A CN 111796878A
- Authority
- CN
- China
- Prior art keywords
- application
- splitting
- file
- subfile
- page
- 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.)
- Granted
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 146
- 238000000034 method Methods 0.000 claims abstract description 40
- 238000009877 rendering Methods 0.000 claims description 11
- 238000004590 computer program Methods 0.000 claims description 10
- 238000012163 sequencing technique Methods 0.000 claims description 5
- 230000011218 segmentation Effects 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 11
- 238000004891 communication Methods 0.000 description 7
- 230000008569 process Effects 0.000 description 7
- 238000012545 processing Methods 0.000 description 5
- 238000011161 development Methods 0.000 description 4
- 230000018109 developmental process Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 238000007726 management method Methods 0.000 description 3
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 238000005457 optimization Methods 0.000 description 3
- 238000012360 testing method Methods 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 230000006835 compression Effects 0.000 description 2
- 238000007906 compression Methods 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 238000005192 partition Methods 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000008447 perception Effects 0.000 description 1
- 238000012827 research and development Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了一种应用于单页应用的资源拆分、加载方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：调用拆分插件，解析单页应用的应用编译文件，得到应用文件；按照拆分配置量对应用文件中的资源进行拆分，将拆分后的资源分别存储至不同应用子文件中，得到多个应用子文件；建立应用文件和应用子文件之间的拆分关系，将拆分关系存储至单页应用的拆分记录中，以将应用子文件和拆分记录上传至网页应用服务器中。该实施方式通过Splitter将编译后的大文件拆分为多个小文件，再通过Loader并发下载拆分后的小文件进行合并，提升了大文件的整体加载速度，解决了SAP应用单个文件过大导致首次加载缓慢的问题。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种应用于单页应用的资源拆分、加载方法和装置。
背景技术
单页应用(single-page application，简称SPA)是一种网络应用程序或网站的模型，通过动态重写当前页面与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验的情况，使得应用程序更像是一个桌面应用程序。
目前SPA首次加载时需下载应用的所有资源，但有些资源文件较大，导致加载缓慢出现瓶颈问题。现有虽可以通过按需加载、文件压缩和源码裁剪等方式进行优化，但是这些方式仍存在一定问题：
1、按需加载，通过懒加载解决了SPA首次加载所有文件的问题，但仍不能解决必要框架模块文件过大导致加载缓慢的问题；
2、文件压缩，将大文件用算法压缩为相对较小的文件达到提升速度的目的，但仍不能解决压缩后仍然很大的文件加载缓慢问题；
3、源码裁剪，可以解决文件过大导致加载缓慢的问题，但源码裁剪成本以及后续的维护成本较高，且如果没有源码则几乎不能实施。
发明内容
有鉴于此，本发明实施例提供一种应用于单页应用的资源拆分、加载方法和装置，至少能够解决现有技术中资源过大导致SPA首次加载缓慢的问题。
为实现上述目的，根据本发明实施例的一个方面，提供了一种应用于单页应用的资源拆分方法，包括：
调用拆分插件，解析单页应用的应用编译文件，得到应用文件；
按照拆分配置量对所述应用文件中的资源进行拆分，将拆分后的资源分别存储至不同应用子文件中，得到多个应用子文件；
建立所述应用文件和所述应用子文件之间的拆分关系，将所述拆分关系存储至所述单页应用的拆分记录中，以将所述应用子文件和所述拆分记录上传至网页应用服务器中。
可选的，所述按照拆分配置量对所述应用文件中的资源进行拆分，包括：读取拆分配置信息，得到拆分开关状态和所述拆分配置量，若所述拆分开关状态为开启状态，则按照所述拆分配置量对所述应用文件中的资源进行拆分。
可选的，所述按照拆分配置量对所述应用文件中的资源进行拆分，还包括：若所述应用文件中资源的配置量大于分割阈值，则按照所述拆分配置量对所述应用文件中的资源进行拆分。
可选的，在所述得到多个应用子文件之后，还包括：
基于所述应用文件的名称、拆分标志和各应用子文件的编号，生成各应用子文件的名称；
所述建立所述应用文件和所述应用子文件之间的拆分关系，包括：
建立所述应用文件的名称和各应用子文件的名称之间的拆分关系。
可选的，所述应用子文件存储于所述应用文件中，将对所述应用子文件的资源加载路径设置为对所述应用文件的资源加载路径，以将所述资源加载路径上传至所述网页应用服务器中。
为实现上述目的，根据本发明实施例的一个方面，提供了一种应用于单页应用的资源加载方法，包括：
浏览器响应于对单页应用的访问操作，确定对所述单页应用中应用文件的资源加载路径；
利用加载插件，从网页应用服务器中加载与所述资源加载路径对应的应用文件或应用子文件；其中，应用子文件存储于应用文件中，存储有应用文件拆分后的资源，且资源加载路径与应用文件相同；
基于加载的应用文件或应用子文件合并后的应用文件，渲染得到所述单页应用。
可选的，所述确定对所述单页应用中应用文件的资源加载路径，包括：若本次为第一次访问，则基于所述单页应用的标识，从所述网页应用服务器中加载所述单页应用的框架信息和与所述框架信息对应的加载插件；其中，所述框架信息包括所述资源加载路径。
可选的，所述利用加载插件，从网页应用服务器中加载与所述资源加载路径对应的应用文件或应用子文件，包括：
根据所述单页应用的标识，从所述网页应用服务器中加载对所述单页应用中应用文件的拆分记录，进而判断所述拆分记录中是否存在与所述资源加载路径对应的应用文件；
若存在，则确定应用文件已被拆分为应用子文件，加载存储于应用文件中的应用子文件，否则加载应用文件。
可选的，所述判断所述拆分记录中是否存在与所述资源加载路径对应的应用文件，包括：
确定与所述资源加载路径对应的应用文件的名称，判断所述拆分记录中是否存在所述名称。
可选的，包括：按照各应用子文件的名称，对应用子文件中的资源进行排序合并，得到应用文件。
为实现上述目的，根据本发明实施例的另一方面，提供了一种应用于单页应用的资源拆分装置，包括：
解析模块，用于调用拆分插件，解析单页应用的应用编译文件，得到应用文件；
拆分模块，用于按照拆分配置量对所述应用文件中的资源进行拆分，将拆分后的资源分别存储至不同应用子文件中，得到多个应用子文件；
上传模块，用于建立所述应用文件和所述应用子文件之间的拆分关系，将所述拆分关系存储至所述单页应用的拆分记录中，以将所述应用子文件和所述拆分记录上传至网页应用服务器中。
可选的，所述拆分模块，用于：读取拆分配置信息，得到拆分开关状态和所述拆分配置量，若所述拆分开关状态为开启状态，则按照所述拆分配置量对所述应用文件中的资源进行拆分。
可选的，所述拆分模块，还用于：若所述应用文件中资源的配置量大于分割阈值，则按照所述拆分配置量对所述应用文件中的资源进行拆分。
可选的，还包括命名模块，用于：基于所述应用文件的名称、拆分标志和各应用子文件的编号，生成各应用子文件的名称；
所述上传模块，用于：建立所述应用文件的名称和各应用子文件的名称之间的拆分关系。
可选的，所述应用子文件存储于所述应用文件中，将对所述应用子文件的资源加载路径设置为对所述应用文件的资源加载路径，以将所述资源加载路径上传至所述网页应用服务器中。
为实现上述目的，根据本发明实施例的一个方面，提供了一种应用于单页应用的资源加载装置，包括：
确定模块，用于浏览器端响应于对单页应用的访问操作，确定对所述单页应用中应用文件的资源加载路径；
加载模块，用于利用加载插件，从网页应用服务器中加载与所述资源加载路径对应的应用文件或应用子文件；其中，应用子文件存储于应用文件中，存储有应用文件拆分后的资源，且资源加载路径与应用文件相同；
渲染模块，用于基于加载的应用文件或应用子文件合并后的应用文件，渲染得到所述单页应用。
可选的，所述确定模块，用于：若本次为第一次访问，则基于所述单页应用的标识，从所述网页应用服务器中加载所述单页应用的框架信息和与所述框架信息对应的加载插件；其中，所述框架信息包括所述资源加载路径。
可选的，所述加载模块，用于：
根据所述单页应用的标识，从所述网页应用服务器中加载对所述单页应用中应用文件的拆分记录，进而判断所述拆分记录中是否存在与所述资源加载路径对应的应用文件；
若存在，则确定应用文件已被拆分为应用子文件，加载存储于应用文件中的应用子文件，否则加载应用文件。
可选的，所述加载模块，用于：确定与所述资源加载路径对应的应用文件的名称，判断所述拆分记录中是否存在所述名称。
可选的，所述渲染模块，用于：按照各应用子文件的名称，对应用子文件中的资源进行排序合并，得到应用文件。
为实现上述目的，根据本发明实施例的再一方面，提供了一种应用于单页应用的资源拆分、加载电子设备。
本发明实施例的电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述任一所述的应用于单页应用的资源拆分、加载方法。
为实现上述目的，根据本发明实施例的再一方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现上述任一所述的应用于单页应用的资源拆分、加载方法。
根据本发明所述提供的方案，上述发明中的一个实施例具有如下优点或有益效果：提供拆分插件(Splitter)和加载插件(Loader)，Splitter插件提供SPA应用大文件拆分的功能，Loader提供拆分后大文件的下载合并功能。通过Splitter将编译后的大文件拆分为多个小文件，再通过Loader并发下载拆分后的小文件然后进行合并，提升了大文件的整体加载速度，解决了SAP应用单个文件过大导致首次加载缓慢的问题。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是根据本发明实施例的一种应用于单页应用的资源拆分方法的主要流程示意图；
图2是根据本发明实施例的一种应用于单页应用的资源加载方法的流程示意图；
图3是根据本发明实施例的一种具体地应用于单页应用的资源管理方法的流程示意图；
图4是根据本发明实施例的一种应用于单页应用的资源拆分装置的主要模块示意图；
图5是根据本发明实施例的一种应用于单页应用的资源加载装置的主要模块示意图；
图6是本发明实施例可以应用于其中的示例性系统架构图；
图7是适于用来实现本发明实施例的移动设备或服务器的计算机系统的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
需要说明的是，在SPA中所有必要代码(HTML、JavaScript和CSS)都通过单个页面的加载而检索，或根据需要(通常为响应用户操作)动态装载适当的资源并添加到页面。尽管可以用位置散列或HTML5历史API(Application Program Interface，应用程序接口)来提供应用程序中单独逻辑页面的感知和导航能力，但页面在加载完成后与用户所有交互过程中的任何时间点，都不会对整个页面进行全局的刷新或重新载入，也不会将控制转移到其他页面。
单页应用SPA在首次加载资源完毕后，后续请求大部分是针对数据的处理请求，较少涉及资源变更。若发生资源变更，也可以使用本发明根据业务实际情况配置。本发明主要解决SPA首次加载资源的瓶颈问题。
参见图1，示出的是本发明实施例提供的一种应用于单页应用的资源拆分方法的主要流程图，包括如下步骤：
S101：调用拆分插件，解析单页应用的应用编译文件，得到应用文件；
S102：按照拆分配置量对所述应用文件中的资源进行拆分，将拆分后的资源分别存储至不同应用子文件中，得到多个应用子文件；
S103：建立所述应用文件和所述应用子文件之间的拆分关系，将所述拆分关系存储至所述单页应用的拆分记录中，以将所述应用子文件和所述拆分记录上传至Web应用服务器中。
上述实施方式中，对于步骤S101～S102，本发明提供有拆分插件(Splitter)，提供拆分SPA应用文件的功能。该插件是编译插件，不需要安装在SPA中，SPA开发完成后已经完成应用文件的拆分。
Splitter插件在SPA研发完成后调用，Splitter运行时的内部工作流程如下：
1)调用Splitter解析SPA应用编译文件，得到SPA应用文件。
2)读取拆分配置(拆分开关状态、文件拆分配置量)，根据拆分开关状态判断是否开启文件拆分这一操作，若开启则进入下一步骤，否则结束流程。
在SPA开发过程中可能针对不同运行环境(线上、灰度、预发等)设置不同参数，通过设置“拆分开关”可以根据环境的不同进行相应配置，实现不同环境自动切换配置。
3)遍历SPA应用文件，根据拆分配置量对其中的资源进行拆分，以将其拆分为多个小文件，即应用子文件。
作为优化，为减少拆分工作量，可以在拆分之前排除无需拆分的应用文件。如，设置分割阈值，若应用文件中资源的配置量大于该分割阈值，则确定需要对其进行拆分，否则不需要，最终仅将SPA应用中超过分割阈值的大文件进行拆分。
作为另一优化，为区分拆分文件和未拆分文件，可以在拆分后的文件名称中添加split标志。例如，拆分后第一个应用子文件的名称为“test.js.split1”，第二个名称为“test.js.split2”。除了数字1、2之外，也可以按照一定步长进行编号，例如1、3、5；也可以使用其他符号，例如a、b、c。
对于步骤S103，对于后续文件/资源的加载，需要从应用文件中加载，若该应用文件已被拆分为多个应用子文件，则需从应用子文件中加载。以此需要建立两者之间的拆分关系，如名称之间的拆分关系，例如{“test.js”:[“split1”,“split2”]}。
一个单页应用中可能包含有多个应用文件，因此可能存在多条拆分关系，可以将其统一存储于一个拆分记录中，例如Excel表中，便于后续资源加载时拆分关系的查询。
另外，拆分后的应用子文件仍存储于原应用文件的目录下，只不过此时原应用文件中的资源被拆分至应用子文件中，因此对原应用文件中资源的加载路径即为对应用子文件中资源的加载路径，以避免文件转移所带来的操作不当、加载错误的问题。
上述拆分关系、未被拆分的应用文件、已被拆分后的应用子文件，最终都会上传至Web应用服务器中，便于后续用户从该Web应用服务器中下载所需信息，完成SPA加载操作。除此之外，SPA的框架信息(包括资源加载路径)同样也会上传至Web应用服务器中。
上述实施例所提供的方法，SPA应用研发完成后，调用Splitter对应用编译文件进行大文件拆分处理，并将处理后的SPA应用程序发布到Web应用服务器，以便后续从Web应用服务器中下载拆分后的应用子文件，以此提高文件下载速度。
参见图2，示出了根据本发明实施例的一种应用于单页应用的资源加载方法流程示意图，包括如下步骤：
S201：浏览器端响应于对单页应用的访问操作，确定对所述单页应用中应用文件的资源加载路径；
S202：利用加载插件，从Web应用服务器中加载与所述资源加载路径对应的应用文件或应用子文件；其中，应用子文件存储于应用文件中，存储有应用文件拆分后的资源，且资源加载路径与应用文件相同；
S203：基于加载的应用文件或应用子文件合并后的应用文件，渲染得到所述单页应用。
上述实施方式中，对于步骤S201～S202，本发明还提供有加载插件(Loader)，该插件是运行时插件，需要安装在SPA应用中，在SPA运行时执行资源(如应用子文件)的下载和整合。SPA应用最终通过浏览器展示以供用户访问，因此本实施方式主要是在浏览器端完成。
SPA应用在研发过程中使用Loader提供的API编写资源访问代码；其中，API是Loader插件提供的一种资源访问方法，在SPA应用研发过程中引用资源需要使用Loader提供的方法替换原来的资源访问方法。
Loader运行时的内部工作流程如下：
1)用户通过浏览器点击访问SPA，浏览器响应于该点击访问操作，判断是否为第一次访问。
SPA显示的页面只有一页，且通常在研发过程中已设置完毕其框架信息，因此若浏览器内存在该SPA的框架信息，则判断不是首次访问，直接执行对数据的处理请求；否则需基于SPA的标识，首先从Web应用服务器中下载其框架信息；其中，框架信息包括对应用文件的资源加载路径。
2)Loader根据资源加载路径，从Web应用服务器中加载相应的应用文件，在应用文件已被拆分的情况下，加载存储于其目录下的应用子文件。
①基于SPA的标识，从Web应用服务器中加载对该SPA中应用文件的拆分记录；其中，该拆分记录可能会随着SPA文件变化更新，但不会删除；
②判断与资源加载路径对应的应用文件是否存在于该拆分记录中，若不存在，则表示请求资源未被拆分，直接请求原应用文件中的资源，否则，并发请求拆分后的资源，即加载拆分后的应用子文件。
对于步骤S203，若应用文件未被拆分，其在Web应用服务器中的资源加载路径与请求的资源加载路径一致，是可以直接下载的；反之，Web应用服务器中资源路径由于拆分已经发生改变，需要请求拆分后的资源加载路径合并后才是最终请求的资源。
另外，对于应用子文件的合并，也可以是按照其文件名排序合并其资源，完成后生成应用文件，实现资源加载操作。
需要说明的是，该文件合并是在浏览器端完成的。浏览器端可以多路并行从Web应用服务器下载资源达到最大化，利用带宽加速资源的加载过程，若在服务器端合并成大文件再下载仍会存在加载瓶颈的问题。
上述实施例所提供的方法，使用Loader插件加载拆分后的资源并合并，实现带宽的高效利用，加快大文件的加载速度，从而提升了应用的整体加载速度。
参见图3，示出了根据本发明实施例的一具体地应用于单页应用的资源管理方法流程示意图，包括如下步骤：
S301：调用拆分插件，解析单页应用的应用编译文件，得到应用文件；
S302：按照拆分配置量对所述应用文件中的资源进行拆分，将拆分后的资源分别存储至不同应用子文件中，得到多个应用子文件；
S303：建立所述应用文件和所述应用子文件之间的拆分关系，将所述拆分关系存储至所述单页应用的拆分记录中，以将所述应用子文件和所述拆分记录上传至网页应用服务器中；
S304：浏览器端响应于对单页应用的访问操作，确定对所述单页应用中应用文件的资源加载路径；
S305：利用加载插件，从网页应用服务器中加载与所述资源加载路径对应的应用文件或应用子文件；其中，应用子文件存储于应用文件中，存储有应用文件拆分后的资源，且资源加载路径与应用文件相同；
S306：基于加载的应用文件或应用子文件合并后的应用文件，渲染得到所述单页应用。
上述实施例所提供的方法，在SPA应用开发阶段引入Splitter和Loader依赖，通过Splitter插件将SPA应用编译后的大文件拆分为多个小文件，再通过Loader并发下载拆分后的小文件进行合并，提升了大文件的整体加载速度，解决了SAP应用单个文件过大导致首次加载缓慢的问题。
参见图4，示出了本发明实施例提供的一种应用于单页应用的资源拆分装置400的主要模块示意图，包括：
解析模块401，用于调用拆分插件，解析单页应用的应用编译文件，得到应用文件；
拆分模块402，用于按照拆分配置量对所述应用文件中的资源进行拆分，将拆分后的资源分别存储至不同应用子文件中，得到多个应用子文件；
上传模块403，用于建立所述应用文件和所述应用子文件之间的拆分关系，将所述拆分关系存储至所述单页应用的拆分记录中，以将所述应用子文件和所述拆分记录上传至网页应用服务器中。
本发明实施装置中，所述拆分模块402，用于：读取拆分配置信息，得到拆分开关状态和所述拆分配置量，若所述拆分开关状态为开启状态，则按照所述拆分配置量对所述应用文件中的资源进行拆分。
本发明实施装置中，所述拆分模块402，还用于：若所述应用文件中资源的配置量大于分割阈值，则按照所述拆分配置量对所述应用文件中的资源进行拆分。
本发明实施装置中，还包括命名模块404(图中未标出)，用于：基于所述应用文件的名称、拆分标志和各应用子文件的编号，生成各应用子文件的名称；
所述上传模块403，用于：建立所述应用文件的名称和各应用子文件的名称之间的拆分关系。
本发明实施装置中，所述应用子文件存储于所述应用文件中，将对所述应用子文件的资源加载路径设置为对所述应用文件的资源加载路径，以将所述资源加载路径上传至所述网页应用服务器中。
参见图5，示出了本发明实施例提供的一种应用于单页应用的资源加载装置500的主要模块示意图，包括：
确定模块501，用于浏览器端响应于对单页应用的访问操作，确定对所述单页应用中应用文件的资源加载路径；
加载模块502，用于利用加载插件，从网页应用服务器中加载与所述资源加载路径对应的应用文件或应用子文件；其中，应用子文件存储于应用文件中，存储有应用文件拆分后的资源，且资源加载路径与应用文件相同；
渲染模块503，用于基于加载的应用文件或应用子文件合并后的应用文件，渲染得到所述单页应用。
本发明实施装置中，所述确定模块501，用于：若本次为第一次访问，则基于所述单页应用的标识，从所述网页应用服务器中加载所述单页应用的框架信息和与所述框架信息对应的加载插件；其中，所述框架信息包括所述资源加载路径。
本发明实施装置中，所述加载模块502，用于：
根据所述单页应用的标识，从所述网页应用服务器中加载对所述单页应用中应用文件的拆分记录，进而判断所述拆分记录中是否存在与所述资源加载路径对应的应用文件；
若存在，则确定应用文件已被拆分为应用子文件，加载存储于应用文件中的应用子文件，否则加载应用文件。
本发明实施装置中，所述加载模块502，用于：确定与所述资源加载路径对应的应用文件的名称，判断所述拆分记录中是否存在所述名称。
本发明实施装置中，所述渲染模块503，用于：按照各应用子文件的名称，对应用子文件中的资源进行排序合并，得到应用文件。
另外，在本发明实施例中所述装置的具体实施内容，在上面所述方法中已经详细说明了，故在此重复内容不再说明。
图6示出了可以应用本发明实施例的示例性系统架构600。
如图6所示，系统架构600可以包括终端设备601、602、603，网络604和服务器605(仅仅是示例)。网络604用以在终端设备601、602、603和服务器605之间提供通信链路的介质。网络604可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备601、602、603通过网络604与服务器605交互，以接收或发送消息等。终端设备601、602、603上可以安装有各种通讯客户端应用。
终端设备601、602、603可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器605可以是提供各种服务的服务器，例如对用户利用终端设备601、602、603所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。
需要说明的是，本发明实施例所提供的方法一般由服务器605执行，相应地，装置一般设置于服务器605中。
应该理解，图6中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
下面参考图7，其示出了适于用来实现本发明实施例的终端设备的计算机系统700的结构示意图。图7示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图7所示，计算机系统700包括中央处理单元(CPU)701，其可以根据存储在只读存储器(ROM)702中的程序或者从存储部分708加载到随机访问存储器(RAM)703中的程序而执行各种适当的动作和处理。在RAM 703中，还存储有系统700操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。
以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。
特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(CPU)701执行时，执行本发明的系统中限定的上述功能。
需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括解析模块、拆分模块、上传模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，拆分模块还可以被描述为“拆分大文件模块”。
作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：
调用拆分插件，解析单页应用的应用编译文件，得到应用文件；
按照拆分配置量对所述应用文件中的资源进行拆分，将拆分后的资源分别存储至不同应用子文件中，得到多个应用子文件；
建立所述应用文件和所述应用子文件之间的拆分关系，将所述拆分关系存储至所述单页应用的拆分记录中，以将所述应用子文件和所述拆分记录上传至网页应用服务器中。
根据本发明实施例的技术方案，提供拆分插件(Splitter)和加载插件(Loader)，Splitter插件提供SPA应用大文件拆分的功能，Loader提供拆分后大文件的下载合并功能。通过Splitter将编译后的大文件拆分为多个小文件，再通过Loader并发下载拆分后的小文件然后进行合并，提升了大文件的整体加载速度，解决了SAP应用单个文件过大导致首次加载缓慢的问题。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。
Claims (14)
1.一种应用于单页应用的资源拆分方法，其特征在于，包括：
调用拆分插件，解析单页应用的应用编译文件，得到应用文件；
按照拆分配置量对所述应用文件中的资源进行拆分，将拆分后的资源分别存储至不同应用子文件中，得到多个应用子文件；
建立所述应用文件和所述应用子文件之间的拆分关系，将所述拆分关系存储至所述单页应用的拆分记录中，以将所述应用子文件和所述拆分记录上传至网页应用服务器中。
2.根据权利要求1所述的方法，其特征在于，所述按照拆分配置量对所述应用文件中的资源进行拆分，包括：
读取拆分配置信息，得到拆分开关状态和所述拆分配置量，若所述拆分开关状态为开启状态，则按照所述拆分配置量对所述应用文件中的资源进行拆分。
3.根据权利要求1所述的方法，其特征在于，所述按照拆分配置量对所述应用文件中的资源进行拆分，还包括：
若所述应用文件中资源的配置量大于分割阈值，则按照所述拆分配置量对所述应用文件中的资源进行拆分。
4.根据权利要求1所述的方法，其特征在于，在所述得到多个应用子文件之后，还包括：
基于所述应用文件的名称、拆分标志和各应用子文件的编号，生成各应用子文件的名称；
所述建立所述应用文件和所述应用子文件之间的拆分关系，包括：
建立所述应用文件的名称和各应用子文件的名称之间的拆分关系。
5.根据权利要求1所述的方法，其特征在于，所述应用子文件存储于所述应用文件中，将对所述应用子文件的资源加载路径设置为对所述应用文件的资源加载路径，以将所述资源加载路径上传至所述网页应用服务器中。
6.一种应用于单页应用的资源加载方法，包括如权利要求1-5中任一项所述的资源拆分方法，其特征在于，包括：
浏览器端响应于对单页应用的访问操作，确定对所述单页应用中应用文件的资源加载路径；
利用加载插件，从网页应用服务器中加载与所述资源加载路径对应的应用文件或应用子文件；其中，应用子文件存储于应用文件中，存储有应用文件拆分后的资源，且资源加载路径与应用文件相同；
基于加载的应用文件或应用子文件合并后的应用文件，渲染得到所述单页应用。
7.根据权利要求6所述的方法，其特征在于，所述确定对所述单页应用中应用文件的资源加载路径，包括：
若本次为第一次访问，则基于所述单页应用的标识，从所述网页应用服务器中加载所述单页应用的框架信息和与所述框架信息对应的加载插件；其中，所述框架信息包括所述资源加载路径。
8.根据权利要求6所述的方法，其特征在于，所述利用加载插件，从网页应用服务器中加载与所述资源加载路径对应的应用文件或应用子文件，包括：
根据所述单页应用的标识，从所述网页应用服务器中加载对所述单页应用中应用文件的拆分记录，进而判断所述拆分记录中是否存在与所述资源加载路径对应的应用文件；
若存在，则确定应用文件已被拆分为应用子文件，加载存储于应用文件中的应用子文件，否则加载应用文件。
9.根据权利要求8所述的方法，其特征在于，所述判断所述拆分记录中是否存在与所述资源加载路径对应的应用文件，包括：
确定与所述资源加载路径对应的应用文件的名称，判断所述拆分记录中是否存在所述名称。
10.根据权利要求6所述的方法，其特征在于，包括：
按照各应用子文件的名称，对应用子文件中的资源进行排序合并，得到应用文件。
11.一种应用于单页应用的资源拆分装置，其特征在于，包括：
解析模块，用于调用拆分插件，解析单页应用的应用编译文件，得到应用文件；
拆分模块，用于按照拆分配置量对所述应用文件中的资源进行拆分，将拆分后的资源分别存储至不同应用子文件中，得到多个应用子文件；
上传模块，用于建立所述应用文件和所述应用子文件之间的拆分关系，将所述拆分关系存储至所述单页应用的拆分记录中，以将所述应用子文件和所述拆分记录上传至网页应用服务器中。
12.一种应用于单页应用的资源加载装置，包括如权利要求11所述的资源加载装置，其特征在于，包括：
确定模块，用于浏览器端响应于对单页应用的访问操作，确定对所述单页应用中应用文件的资源加载路径；
加载模块，用于利用加载插件，从网页应用服务器中加载与所述资源加载路径对应的应用文件或应用子文件；其中，应用子文件存储于应用文件中，存储有应用文件拆分后的资源，且资源加载路径与应用文件相同；
渲染模块，用于基于加载的应用文件或应用子文件合并后的应用文件，渲染得到所述单页应用。
13.一种电子设备，其特征在于，包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序，
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-10中任一所述的方法。
14.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-10中任一所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010506319.7A CN111796878B (zh) | 2020-06-05 | 2020-06-05 | 一种应用于单页应用的资源拆分、加载方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010506319.7A CN111796878B (zh) | 2020-06-05 | 2020-06-05 | 一种应用于单页应用的资源拆分、加载方法和装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111796878A true CN111796878A (zh) | 2020-10-20 |
| CN111796878B CN111796878B (zh) | 2024-04-12 |
Family
ID=72802903
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010506319.7A Active CN111796878B (zh) | 2020-06-05 | 2020-06-05 | 一种应用于单页应用的资源拆分、加载方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111796878B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112965707A (zh) * | 2021-03-24 | 2021-06-15 | 深圳市活力天汇科技股份有限公司 | Web多应用单页生成方法、系统、计算机设备及介质 |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103077061A (zh) * | 2013-01-16 | 2013-05-01 | 珠海市君天电子科技有限公司 | 一种应用软件在安卓设备的安装方法和系统 |
| CN105867903A (zh) * | 2015-12-29 | 2016-08-17 | 乐视致新电子科技（天津）有限公司 | 代码库拆分的方法及装置 |
| CN107908737A (zh) * | 2017-11-15 | 2018-04-13 | 中国银行股份有限公司 | 文件拆分控制方法和装置 |
| CN109697130A (zh) * | 2017-10-23 | 2019-04-30 | 北京金山云网络技术有限公司 | web系统的前后端分离方法、装置、设备及存储介质 |
| CN109783744A (zh) * | 2018-12-05 | 2019-05-21 | 北京奇艺世纪科技有限公司 | 页面启动方法、装置、终端及计算机可读存储介质 |
| CN109840116A (zh) * | 2017-11-27 | 2019-06-04 | 北京京东尚科信息技术有限公司 | 一种加载资源文件的方法和装置 |
| CN109871499A (zh) * | 2019-01-16 | 2019-06-11 | 中国平安财产保险股份有限公司 | 页面加载方法及客户端 |
| US20190303500A1 (en) * | 2018-03-27 | 2019-10-03 | Capital One Services, Llc | Systems and methods for single page application server side renderer |
| CN110688175A (zh) * | 2019-10-09 | 2020-01-14 | 网易（杭州）网络有限公司 | 文件加载的方法、装置、终端设备和存储介质 |
| CN111124420A (zh) * | 2019-12-19 | 2020-05-08 | 北京百度网讯科技有限公司 | 编译方法、装置、电子设备及可读存储介质 |
| CN111143729A (zh) * | 2019-12-11 | 2020-05-12 | 中国平安财产保险股份有限公司 | 基于单页面应用的优化方法、装置、设备及存储介质 |
-
2020
- 2020-06-05 CN CN202010506319.7A patent/CN111796878B/zh active Active
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103077061A (zh) * | 2013-01-16 | 2013-05-01 | 珠海市君天电子科技有限公司 | 一种应用软件在安卓设备的安装方法和系统 |
| CN105867903A (zh) * | 2015-12-29 | 2016-08-17 | 乐视致新电子科技（天津）有限公司 | 代码库拆分的方法及装置 |
| CN109697130A (zh) * | 2017-10-23 | 2019-04-30 | 北京金山云网络技术有限公司 | web系统的前后端分离方法、装置、设备及存储介质 |
| CN107908737A (zh) * | 2017-11-15 | 2018-04-13 | 中国银行股份有限公司 | 文件拆分控制方法和装置 |
| CN109840116A (zh) * | 2017-11-27 | 2019-06-04 | 北京京东尚科信息技术有限公司 | 一种加载资源文件的方法和装置 |
| US20190303500A1 (en) * | 2018-03-27 | 2019-10-03 | Capital One Services, Llc | Systems and methods for single page application server side renderer |
| CN109783744A (zh) * | 2018-12-05 | 2019-05-21 | 北京奇艺世纪科技有限公司 | 页面启动方法、装置、终端及计算机可读存储介质 |
| CN109871499A (zh) * | 2019-01-16 | 2019-06-11 | 中国平安财产保险股份有限公司 | 页面加载方法及客户端 |
| CN110688175A (zh) * | 2019-10-09 | 2020-01-14 | 网易（杭州）网络有限公司 | 文件加载的方法、装置、终端设备和存储介质 |
| CN111143729A (zh) * | 2019-12-11 | 2020-05-12 | 中国平安财产保险股份有限公司 | 基于单页面应用的优化方法、装置、设备及存储介质 |
| CN111124420A (zh) * | 2019-12-19 | 2020-05-08 | 北京百度网讯科技有限公司 | 编译方法、装置、电子设备及可读存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| 闫兴亚;潘治颖;黄姝琦;: "首屏数据并行式预加载方案的研究与应用", 计算机与数字工程, no. 05, 20 May 2019 (2019-05-20) * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112965707A (zh) * | 2021-03-24 | 2021-06-15 | 深圳市活力天汇科技股份有限公司 | Web多应用单页生成方法、系统、计算机设备及介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111796878B (zh) | 2024-04-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110795649A (zh) | 目标页面展示方法、装置、系统及电子设备 | |
| WO2023174013A1 (zh) | 显存分配方法、装置、介质及电子设备 | |
| CN111274512A (zh) | 一种页面加载方法、装置及介质 | |
| CN113010405A (zh) | 一种应用程序的测试方法和装置 | |
| CN111881392A (zh) | 展示页面的方法和装置 | |
| CN115982491A (zh) | 页面更新方法及装置、电子设备和计算机可读存储介质 | |
| CN113452733A (zh) | 文件下载方法和装置 | |
| CN112214250A (zh) | 一种应用程序组件的加载方法和装置 | |
| CN113760438A (zh) | 网页应用的页面显示方法及装置 | |
| CN111796878B (zh) | 一种应用于单页应用的资源拆分、加载方法和装置 | |
| CN112486783B (zh) | 一种进度条的显示方法和装置 | |
| CN110647327B (zh) | 基于卡片的用户界面动态控制的方法和装置 | |
| CN113569173A (zh) | 页面加载方法及装置、存储介质、电子设备 | |
| CN112235132A (zh) | 动态配置服务的方法、装置、介质以及服务器 | |
| CN111414154A (zh) | 前端开发的方法、装置、电子设备和存储介质 | |
| CN111338928A (zh) | 基于chrome浏览器测试的方法及装置 | |
| CN115934076A (zh) | 跨平台客户端的微服务提供装置、方法和电子设备 | |
| CN113779122B (zh) | 导出数据的方法和装置 | |
| CN110851194A (zh) | 一种用于获取实现新接口的代码的方法和装置 | |
| US20210117129A1 (en) | Method and Apparatus for Writing Data | |
| CN112579447A (zh) | 一种浏览器测试方法和装置 | |
| CN113312053A (zh) | 一种数据处理的方法和装置 | |
| CN110858240A (zh) | 一种前端模块加载方法和装置 | |
| CN112559001A (zh) | 更新应用的方法和装置 | |
| CN112612531A (zh) | 应用程序启动方法、装置、电子设备及存储介质 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |