打包分块方法与流程

1.本发明涉及webpack打包技术领域，尤其涉及一种打包分块方法。


背景技术：

2.前端web(world wide web,全球广域网)工程使用框架和开源库，工程化、组件化、模块化开发的代码，从开发到部署都需要经过webpack工具编译打包后才能被浏览器加载访问。
3.现有的打包分块方法只能按照分块数量、文件大小来分块打包或者人工划分分块打包，在遇到大型项目时，启动较慢，修改文件后刷新时间慢。影响开发效率。
4.上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。


技术实现要素：

5.本发明的主要目的在于提供一种打包分块方法，旨在解决现有技术人工进行分块打包效率低的技术问题。
6.为实现上述目的，本发明提供了一种打包分块方法，所述方法包括以下步骤:
7.获取原始页面文件；
8.基于所述原始页面文件打开所述原始页面文件对应的原始页面目录；
9.基于预设遍历规则对所述原始页面目录中的原始页面文件进行遍历，得到目标页面文件以及所述目标页面文件对应的目标页面目录；
10.基于所述目标页面目录通过预设函数生成页面路由；
11.根据所述页面路由对所述目标页面文件进行打包分块。
12.可选地，所述获取原始页面文件，包括：
13.在接收到用户的打包指令时，根据所述打包指令生成打包目录项；
14.根据所述打包目录项得到打包参数；
15.根据所述打包参数得到待打包的项目名称；
16.根据所述待打包的项目名称确定原始页面文件。
17.可选地，所述基于预设遍历规则对所述原始页面目录中的原始页面文件进行遍历，得到目标页面文件以及所述目标页面文件对应的目标页面目录，包括：
18.获取所述原始页面文件中各文件的扩展名称；
19.将所述各文件的扩展名称与预设扩展名称进行比较；
20.将所述扩展名称与所述预设扩展名称一致的文件作为目标页面文件；
21.根据所述目标页面文件确定对应的目标页面目录。
22.可选地，所述基于所述目标页面目录通过预设函数生成页面路由，包括：
23.基于所述目标页面目录确定对应的目录结构树；
24.根据所述目录结构树与页面访问路径的映射关系，得到对应的页面访问路径；
25.根据所述页面访问路径以及预设加载规则生成对应的懒加载页面路由。
26.可选地，所述基于预设遍历规则对所述原始页面目录中的原始页面文件进行遍历，得到目标页面文件以及所述目标页面文件对应的目标页面目录之前，还包括：
27.检测所述打包目录项中是否存在排除信息；
28.在所述打包目录项中存在排除信息时，获取所述打包目录项中的目录分隔符；
29.根据所述目录分隔符确定对应的系统；
30.根据所述系统生成对应的排除参数。
31.可选地，所述基于预设遍历规则对所述原始页面目录中的原始页面文件进行遍历，得到目标页面文件以及所述目标页面文件对应的目标页面目录，包括：
32.根据所述排除参数确定排除目录；
33.通过所述排除目录对所述原始页面目录进行排除，并根据排除后的原始页面目录确定排除后的原始页面文件；
34.通过预设遍历规则对所述排除后的原始页面目录中的原始页面文件进行遍历，得到目标页面文件以及所述目标页面文件对应的目标页面目录。
35.可选地，所述根据所述页面路由对所述目标页面文件进行打包分块，包括：
36.通过所述页面路由以及所述目标页面目录确定分块规则；
37.根据所述分块规则得到注释名称；
38.通过所述分块规则以及所述注释名称对所述目标页面文件进行打包分块。
39.本发明通过获取原始页面文件；基于原始页面文件打开原始页面文件对应的原始页面目录；基于预设遍历规则对原始页面目录中的原始页面文件进行遍历，得到目标页面文件以及目标页面文件对应的目标页面目录；基于目标页面目录通过预设函数生成页面路由；根据页面路由对目标页面文件进行打包分块，通过打开原始页面文件得到对应的原始页面目录，并通过预设遍历规则对原始页面目录进行遍历，得到目标页面目录以及目标页面文件，通过预设函数对目标页面目录进行处理生成页面路由，并根据页面路由对目标页面文件进行打包分块，打包分块速度快且准确，提高了打包分块的效率。
附图说明
40.图1为本发明打包分块方法第一实施例的流程示意图；
41.图2为本发明打包分块方法第二实施例的流程示意图；
42.图3为本发明打包分块方法第三实施例的流程示意图；
43.图4为本发明打包分块方法第四实施例的流程示意图；
44.图5为本发明打包分块方法第五实施例的流程示意图；
45.图6为本发明打包分块方法第五实施例中打包分块整体流程示意图；
46.本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
47.应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
48.本发明实施例提供了一种打包分块方法，参照图1，图1为本发明打包分块方法第一实施例的流程示意图。
49.本实施例中，所述打包分块方法包括以下步骤：
50.步骤s10：获取原始页面文件。
51.需要说明的是，本实施例的执行主体可为webpack打包分块平台，webpack为web前端工程打包工具，也可为其他可实现相同或相似功能的设备，本实施例对此不作限制。
52.在本实施例中，原始页面文件指的是整个业务功能页面的所有文件，可根据用户需求进行查找，当用户需要打包业务功能页面中的某一项目文件时，可获取项目名称得到对应的业务功能页面的原始页面文件。
53.步骤s20：基于所述原始页面文件打开所述原始页面文件对应的原始页面目录。
54.在具体实施中，原始页面目录为包括了所有原始页面文件内容的索引目录，原始页面文件中包括了业务功能的代码，由于业务功能具有对应的逻辑，则根据原始页面文件生成的原始页面目录也具有相互关联以及逐级展开的结构，可根据某一项目名称查询原始页面目录，得到所有与此项目名称相关的原始页面的代码文件。
55.步骤s30：基于预设遍历规则对所述原始页面目录中的原始页面文件进行遍历，得到目标页面文件以及所述目标页面文件对应的目标页面目录。
56.应理解的是，预设遍历规则为后台管理人员提前设置的查找以及筛选规则，也可根据用户需求进行修改和更新，例如根据文件后缀名称或者文件扩展名称进行查找相关的文件。目标页面文件为根据具体的打包需求对原始页面文件进行查找和筛选得到的页面文件，目标页面目录为包括了目标页面文件具体内容和名称信息的目录结构。
57.步骤s40：基于所述目标页面目录通过预设函数生成页面路由。
58.需要说明的是，预设函数为生成页面路由的函数，由管理人员提前设置，例如generate_projects_routes函数，也可为其他可生成路由的函数，本实施例以generate_projects_routes函数为例进行说明。由于业务代码是根据业务功能，按照目录结构组织的，因此目录结构和页面访问路径以及页面路由有一一对应的关系，则可根据目标页面目录生成对应的页面路由。
59.步骤s50：根据所述页面路由对所述目标页面文件进行打包分块。
60.在具体实施中，打包分块指的是通过页面路由对目标页面文件进行拆分或者合并为若干数量的文件，并将若干数量的文件进行打包存储到路由文件，当用户需要访问时，可直接根据页面路由进行查找，提升用户体验。
61.本实施例通过获取原始页面文件；基于原始页面文件打开原始页面文件对应的原始页面目录；基于预设遍历规则对原始页面目录中的原始页面文件进行遍历，得到目标页面文件以及目标页面文件对应的目标页面目录；基于目标页面目录通过预设函数生成页面路由；根据页面路由对目标页面文件进行打包分块，通过打开原始页面文件得到对应的原始页面目录，并通过预设遍历规则对原始页面目录进行遍历，得到目标页面目录以及目标页面文件，通过预设函数对目标页面目录进行处理生成页面路由，并根据页面路由对目标页面文件进行打包分块，打包分块速度快且准确，提高了打包分块的效率。
62.参考图2，图2为本发明打包分块方法第二实施例的流程示意图。
63.基于上述第一实施例，本实施例打包分块方法所述步骤s10，具体包括：
64.步骤s101：在接收到用户的打包指令时，根据所述打包指令生成打包目录项。
65.应理解的是，打包指令为用户根据具体打包需求点击打包平台中的打包按钮后，
生成的触发指令。当接收到用户发送的打包指令后，根据用户的打包指令生成打包目录项，打包目录项指的是用户需要进行打包的代码的索引信息，可根据打包目录项得知用户需要打包的数目、类型等。
66.步骤s102：根据所述打包目录项得到打包参数。
67.在本实施例中，打包参数为用户需要打包的项目信息，打包参数为需要打包的页面文件的顶层目录名，例如打包目录项为projects/crm目录，则打包参数为“crm”。
68.步骤s103：根据所述打包参数得到待打包的项目名称。
69.在具体实施中，待打包的项目名称为用户需要打包的具体项目，可根据打包参数确定具体的项目名称，例如打包参数为“crm”，则可根据“crm”打包参数打开指定crm项目名称下的所有页面文件。
70.步骤s104：根据所述待打包的项目名称确定原始页面文件。
71.需要说明的是，原始页面文件为根据待打包的项目名称得到的整个项目的所有页面文件。
72.在本实施例中，例如用户的打包指令为“生成src/projects目录下的所有页面路径”，则可根据此指令生成src/projects的打包目录项，并根据src/projects的打包目录项得到crm打包参数，通过此crm打包参数确定需要打包的项目名称为crm项目名称，通过crm项目名称遍历crm目录下的所有页面文件，即为原始页面文件。
73.本实施例通过在接收到用户的打包指令时，根据所述打包指令生成打包目录项；根据所述打包目录项得到打包参数；根据所述打包参数得到待打包的项目名称；根据所述待打包的项目名称确定原始页面文件，根据用户发送的打包指令生成具体的打包目录项，根据打包目录项确定打包参数并根据打包参数得到需要打包的项目名称，对需要打包的项目名称进行遍历，得到对应的原始页面文件，可根据具体的打包参数快速确定需要打包的项目文件，查找快速。
74.参考图3，图3为本发明打包分块方法第三实施例的流程示意图。
75.基于上述第一实施例，本实施例打包分块方法所述步骤s30，具体包括：
76.步骤s301：获取所述原始页面文件中各文件的扩展名称。
77.在本实施例中，扩展名称为表示文件类型的一种方式，也叫文件的后缀名称。例如，文档.txt”的文件名中，文档是主文件名，txt(text，文本)为扩展名，表示这个文件为纯文本文件，原始页面文件中有各种文件，例如.css文件、.js文件、.vue文件等，可根据用户的具体需求通过文件的扩展名称进行查询与筛选。
78.步骤s302：将所述各文件的扩展名称与预设扩展名称进行比较。
79.应理解的是，预设扩展名称为用户根据具体的项目需求提前设置的需要打包的文件的扩展名称，例如.css扩展名称、.js扩展名称、.vue扩展名称等，本实施例中以.vue扩展名称为预设扩展名称为例进行说明。
80.在具体实施中，获取到原始页面文件中各文件的扩展名称后，将个文件的扩展名称与预设扩展名称进行比对。
81.步骤s303：将所述扩展名称与所述预设扩展名称一致的文件作为目标页面文件。
82.需要说明的是，目标页面文件为用户需要进行打包的文件，当原始页面文件中页面文件的扩展名称与预设扩展名称比对一致时，将扩展名称与所述预设扩展名称一致的文
件作为目标页面文件，为对目标页面文件打包进行筛选。
83.在本实施例中，当扩展名称与预设扩展名称不一致时，直接跳过对此文件的遍历，进行下一文件的查找与筛选，在进行遍历时，可直接查找原始页面文件中的各文件的扩展名称，判断各文件的扩展名称是否以“.vue”扩展名称为结尾，当页面文件的扩展名称以“.vue”扩展名称为结尾时，将此页面文件作为目标页面文件。
84.步骤s304：根据所述目标页面文件确定对应的目标页面目录。
85.在具体实施中，当得到了需要打包的页面文件后，可得到页面文件所处位置，并得到页面文件位置对应的目标页面目录。
86.本实施例通过获取所述原始页面文件中各文件的扩展名称；将所述各文件的扩展名称与预设扩展名称进行比较；将所述扩展名称与所述预设扩展名称一致的文件作为目标页面文件；根据所述目标页面文件确定对应的目标页面目录，通过将各文件的扩展名称与用户需要打包的文件的扩展名称进行对比，当扩展名称一致时，将一致的扩展名称对应的页面文件作为目标页面文件，并得到目标页面文件对应的页面目录，通过扩展名称对文件进行筛选，查找需要打包的文件准确快速。
87.参考图4，图4为本发明打包分块方法第四实施例的流程示意图。
88.基于上述第一实施例，本实施例打包分块方法所述步骤s40，具体包括：
89.步骤s401：基于所述目标页面目录确定对应的目录结构树。
90.应理解的是，目录结构树为根据具体的业务功能生成的页面目录结构，目录结构树对应了目标页面文件的具体位置。
91.步骤s402：根据所述目录结构树与页面访问路径的映射关系，得到对应的页面访问路径。
92.需要说明的是，遍历目标页面目录后，可得到目标页面文件的访问路径和对应的目录结构树，目标页面文件中的代码是根据具体的业务功能并按照目录结构树组织生成，目录结构树与文件的页面访问路径有一一对应的映射关系，则可根据目录结构树得到对应的页面访问路径。
93.步骤s403：根据所述页面访问路径以及预设加载规则生成对应的懒加载页面路由。
94.在具体实施中，预设加载规则可由工作人员根据目标页面文件的文件大小以及文件数量进行设置，也可根据用户需求进行设置，例如只加载用户登录页面、只加载用户查询页面等。懒加载页面路由为首页不加载全部页面资源，在用户打开页面的时候才自动加载页面所需的资源。
95.在本实施例中，可根据每一个页面访问路径以及预设加载规则确定需要设置的页面访问路径，将需要设置的页面访问路径生成对应的懒加载页面路由，若用户对加载规则没有设置，同时需要打包的目标页面文件数量不多，则可将所有页面访问路径生成一一对应的页面路由。
96.进一步地，当生成了对应的页面路由后，可根据生成的页面路由对目标页面文件进行打包，则根据所述页面路由对所述目标页面文件进行打包分具体包括：通过所述页面路由以及所述目标页面目录确定分块规则；根据所述分块规则得到注释名称；通过所述分块规则以及所述注释名称对所述目标页面文件进行打包分块。
97.应理解的是，由于页面路由是根据目标页面目录生成的，分块规则为根据目标页面目录对应的分块逻辑设置的分块方法，例如根据页面目录得到对应的目录级数，根据目录级数确定分块的数量。注释名称为对目标页面文件进行打包后的命名数据，可根据分块规则得到对应的注释名称，例如目标页面目录为crm_user，则可按照crm_user下的子目录数目确定分块的数量，并通过crm_user的子目录名称得到注释名称。通过注释名称和分块规则对目标页面文件进行打包分块，代码生成的路由是按目录结构树生成的懒加载路由，自动按目录结构树命名分块名称。
98.本实施例通过基于所述目标页面目录确定对应的目录结构树；根据所述目录结构树与页面访问路径的映射关系，得到对应的页面访问路径；根据所述页面访问路径以及预设加载规则生成对应的懒加载页面路由，通过目录结构树与页面访问路径之间一一对应关系，得到对应的页面访问路径，通过页面访问路径进行路由配置，并根据预设加载规则生成需要加载的懒加载页面路由，调整目录结构方便，路由可以随时生成，缩短路由生成时间。
99.参考图5，图5为本发明打包分块方法第五实施例的流程示意图。
100.基于上述第一实施例和第三实施例，本实施例打包分块方法在所述步骤s30之前，还包括：
101.步骤s31：检测所述打包目录项中是否存在排除信息。
102.需要说明的是，排除信息为用户发送打包指令时，提供的需要排除的页面文件信息，当根据打包指令生成打包目录项后，可查看打包目录项中是否存在用户设置的排除信息。
103.步骤s32：在所述打包目录项中存在排除信息时，获取所述打包目录项中的目录分隔符。
104.应理解的是，目录分隔符为排除原始页面目录中不需要的目录的方法，当用户设置了排除信息时，可在打包目录项中查询到排除信息，则获取打包目录项中的目录分隔符，通过目录分隔符过滤不需要的目录数据。
105.步骤s33：根据所述目录分隔符确定对应的系统。
106.在具体实施中，不同的操作系统对应的目录路径和文件路径不一样，windows系统的目录分隔符体现在代码中是“\\”，例如“d:\\文件夹1\\文件夹2\\文件名.扩展名”，其他操作系统的目录分隔符是“/”,例如“/d/文件夹1/文件夹2/文件名.扩展名”。则可根据目录分隔符确定用户当前使用的系统。
107.步骤s34：根据所述系统生成对应的排除参数。
108.在本实施例中，可根据不同的系统生成对应的排除参数，排除参数为管理员根据用户的需求设置的排除的项目名称。进一步地，当打包目录项中存在排除信息时，基于预设遍历规则对所述原始页面目录中的原始页面文件进行遍历，得到目标页面文件以及所述目标页面文件对应的目标页面目录具体包括：根据所述排除参数确定排除目录；通过所述排除目录对所述原始页面目录进行排除，并根据排除后的原始页面目录确定排除后的原始页面文件；通过预设遍历规则对所述排除后的原始页面目录中的原始页面文件进行遍历，得到目标页面文件以及所述目标页面文件对应的目标页面目录。
109.需要说明的是，排除目录为不需要打包的目录，根据排除的项目名称得到需要排除的目录名称，并根据排除目录对原始页面目录进行目录排除，得到排除后的页面目录和
对应的页面文件，再根据打包参数对排除后的页面目录进行遍历，得到最终需要打包的目标页面目录和对应的目标页面文件。
110.如图6所示，图6为本实施例中打包分块整体流程示意图。通过获取到用户的打包指令后，生成打包目录项，根据打包目录项打开页面文件所在目录，通过设置打包参数对页面文件目录下所有文件和目录进行遍历，当页面文件的扩展名称与预设扩展名称一致且没有检测到排除信息时，确定此页面文件为需要打包的页面文件并且不需要排除，则根据页面文件目录的名称转换为webpack分块注释名称，通过页面路由对页面文件进行打包，将页面路由保存到路由文件，直至此页面文件全部遍历完成。
111.本实施例通过检测所述打包目录项中是否存在排除信息；在所述打包目录项中存在排除信息时，获取所述打包目录项中的目录分隔符；根据所述目录分隔符确定对应的系统；根据所述系统生成对应的排除参数，通过检测打包目录项中是否存在排除信息，当检测到打包目录项中存在排除信息时，配置排除目录，对当前不需要打包的页面目录进行排除，提升了开发启动和修改页面后刷新浏览器的速度。
112.应当理解的是，以上仅为举例说明，对本发明的技术方案并不构成任何限定，在具体应用中，本领域的技术人员可以根据需要进行设置，本发明对此不做限制。
113.需要说明的是，以上所描述的工作流程仅仅是示意性的，并不对本发明的保护范围构成限定，在实际应用中，本领域的技术人员可以根据实际的需要选择其中的部分或者全部来实现本实施例方案的目的，此处不做限制。
114.另外，未在本实施例中详尽描述的技术细节，可参见本发明任意实施例所提供的打包分块方法，此处不再赘述。
115.此外，需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
116.上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
117.以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。