CN112764806A - 一种前端资源模块化管理和资源打包配置方法 - Google Patents

一种前端资源模块化管理和资源打包配置方法 Download PDF

Info

Publication number
CN112764806A
CN112764806A CN202110220127.4A CN202110220127A CN112764806A CN 112764806 A CN112764806 A CN 112764806A CN 202110220127 A CN202110220127 A CN 202110220127A CN 112764806 A CN112764806 A CN 112764806A
Authority
CN
China
Prior art keywords
resource
configuration
file
packaging
packing
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110220127.4A
Other languages
English (en)
Inventor
李洁
舒彬
辛北军
包蕊
张保岩
吕婧
张少杰
高帅
王元元
张洪富
王亮
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Telecom Wanwei Information Technology Co Ltd
Original Assignee
China Telecom Wanwei Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by China Telecom Wanwei Information Technology Co Ltd filed Critical China Telecom Wanwei Information Technology Co Ltd
Priority to CN202110220127.4A priority Critical patent/CN112764806A/zh
Publication of CN112764806A publication Critical patent/CN112764806A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management
    • 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/44505—Configuring for program initiating, e.g. using registry, configuration files
    • G06F9/4451—User profiles; Roaming

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computer Security & Cryptography (AREA)
  • Stored Programmes (AREA)

Abstract

本发明涉及web开发技术领域，具体为一种前端资源模块化管理和资源打包配置方法，核心在于把一个页面引用的所有资源文件合成一个文件，目的是减少http请求的次数，让页面的加载和显示更快。这个合并的功能就是打包。这个打包合成阶段是在开发完成之后进行的，并不影响开发阶段模式，在项目资源打包过程中，会分析各个文件之间的依赖关系，生成一个依赖图并用一个文件保存下来，浏览器运行代码的时候就可以读取这个文件。打包过程中，还可以对资源进行优化处理，比如进行资源解析编译、资源压缩等等操作，而且还能很好的对目前主流框架脚手架支持，最终只需使用最后打包生成的一个对应的文件就可以。

Description

一种前端资源模块化管理和资源打包配置方法
技术领域
本发明涉及web开发技术领域，具体为一种前端资源模块化管理和资源打包配置方法。
背景技术
现有技术的前端页面开发，所有的静态资源css、图片和js都是手动引入HTML页面中，如果一个HTML页面中通过script标签引入了3个js文件，而且要注意引用的顺序，不然页面就会发生错误，浏览器需要发送三次http请求来获取这三个文件，然后依次执行其中的代码，如果其中有一个文件因为网络原因或其他原因而延误了加载时间，那么整个页面的显示也会被延误。当项目引用的js文件增多，有十几个甚至几十个js文件的时候，页面加载肯定就会变得很慢，而且也很难维护。同理，如果一个页面引用多个css文件也存在这样的问题。
发明内容
本发明的目的在于提供一种前端资源模块化管理和资源打包配置方法，解决对多入口文件和多HTML页面的配置打包方法的抽象化，解决根据开发环境和生产环境对所需文件进行功能分离，解决启动本地服务的同时并在本地进行项目打包的功能。
为解决上述技术问题，本使发明一种前端资源模块化管理和资源打包配置方法，包括有如下步骤：
S1. 基于node环境搭建本地前端项目，初始化项目；
S2. 定义一个配置文件，配置文件是一个简单的js模块，主要功能是提供资源打包需要的解析器，将所有的与打包相关的信息放在配置文件中；
S3. 在项目中设定执行脚本，根据设定的脚本执行不同环境的配置文件生成相对应的资源打包产物，便可以直接在浏览器端运行。
进一步的，打包过程会分析各个文件之间的依赖关系，生成一个依赖图并保存，浏览器运行代码时读取保存的文件。
进一步的，遵循不重复的原则保留一个通用配置，通过通用配置，不必在环境特定的配置中重复代码，进行分别配置开发环境或生产环境的配置文件，实现功能职责明确。
进一步的，模块打包入口文件配置在通用配置中，将打包方法封装，全局定义需要进行打包的文件名称，在封装的方法利用正则遍历文件路径名称信息，存储在数组，在打包入口处直接调用封装好的方法即可。
本发明主要核心在于把一个页面引用的所有资源文件合成一个文件，目的是减少http请求的次数，让页面的加载和显示更快。这个合并的功能就是打包。这个打包合成阶段是在开发完成之后进行的，并不影响开发阶段模式，在项目资源打包过程中，会分析各个文件之间的依赖关系，生成一个依赖图并用一个文件保存下来，浏览器运行代码的时候就可以读取这个文件。打包过程中，还可以对资源进行优化处理，比如进行资源解析编译、资源压缩等等操作，而且还能很好的对目前主流框架脚手架支持，最终只需使用最后打包生成的一个对应的文件就可以。
本发明的有益效果是：
1.对项目资源文件的打包方法进行全局定义封装实现方法，在方法内部根据打包文件类型的不同进行不同的属性设置，对外暴露使用接口，通过全局定义的参数数组实现对资源文件的模块化管理，精简配置代码极大的方便了打包入口文件的维护和资源文件的管理；
2.针对开发环境和生产环境进行独立配置，开发环境配置注重浏览器调试工具、快速开发周期中的快速增量编译、在运行过程中提供有效的错误信息；生产环境配置注重易于使用的小体积输出产物、不暴露源码和文件路径、忽略仅在开发时需要的代码。使得配置文件书写思路清晰，按需所配，提高了配置文件的可重用性和拓展性；
3.使服务端运行在内存中的代码同时在本地打包呈现，提高了项目开发效率和对错误问题的追溯。
附图说明
图1为本发明原理图；
图2为本发明工作流程图；
图3为本发明工作框架图。
具体实施方式
如图1-图3所示，本使发明一种前端资源模块化管理和资源打包配置方法，包括有如下步骤：
S1. 基于node环境搭建本地前端项目，初始化项目；
S2. 定义一个配置文件，配置文件是一个简单的js模块，主要功能是提供资源打包需要的解析器，将所有的与打包相关的信息放在配置文件中；
S3. 在项目中设定执行脚本，根据设定的脚本执行不同环境的配置文件生成相对应的资源打包产物，便可以直接在浏览器端运行。
进一步的，打包过程会分析各个文件之间的依赖关系，生成一个依赖图并保存，浏览器运行代码时读取保存的文件。
进一步的，遵循不重复的原则保留一个通用配置，通过通用配置，不必在环境特定的配置中重复代码，进行分别配置开发环境或生产环境的配置文件，实现功能职责明确。
进一步的，模块打包入口文件配置在通用配置中，将打包方法封装，全局定义需要进行打包的文件名称，在封装的方法利用正则遍历文件路径名称信息，存储在数组，在打包入口处直接调用封装好的方法即可。
本发明主要核心在于把一个页面引用的所有资源文件合成一个文件，目的是减少http请求的次数，让页面的加载和显示更快。这个合并的功能就是打包。这个打包合成阶段是在开发完成之后进行的，并不影响开发阶段模式，在项目资源打包过程中，会分析各个文件之间的依赖关系，生成一个依赖图并用一个文件保存下来，浏览器运行代码的时候就可以读取这个文件。打包过程中，还可以对资源进行优化处理，比如进行资源解析编译、资源压缩等等操作，而且还能很好的对目前主流框架脚手架支持，最终只需使用最后打包生成的一个对应的文件就可以。

Claims (4)

1.一种前端资源模块化管理和资源打包配置方法，其特征在于：包括有如下步骤：
S1. 基于node环境搭建本地前端项目，初始化项目；
S2. 定义一个配置文件，配置文件是一个简单的js模块，主要功能是提供资源打包需要的解析器，将所有的与打包相关的信息放在配置文件中；
S3. 在项目中设定执行脚本，根据设定的脚本执行不同环境的配置文件生成相对应的资源打包产物，便可以直接在浏览器端运行。
2.根据权利要求1所述的一种前端资源模块化管理和资源打包配置方法，其特征在于：打包过程会分析各个文件之间的依赖关系，生成一个依赖图并保存，浏览器运行代码时读取保存的文件。
3.根据权利要求1所述的一种前端资源模块化管理和资源打包配置方法，其特征在于：遵循不重复的原则保留一个通用配置，通过通用配置，不必在环境特定的配置中重复代码，进行分别配置开发环境或生产环境的配置文件，实现功能职责明确。
4.根据权利要求3所述的一种前端资源模块化管理和资源打包配置方法，其特征在于：模块打包入口文件配置在通用配置中，将打包方法封装，全局定义需要进行打包的文件名称，在封装的方法利用正则遍历文件路径名称信息，存储在数组，在打包入口处直接调用封装好的方法即可。
CN202110220127.4A 2021-02-27 2021-02-27 一种前端资源模块化管理和资源打包配置方法 Pending CN112764806A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110220127.4A CN112764806A (zh) 2021-02-27 2021-02-27 一种前端资源模块化管理和资源打包配置方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110220127.4A CN112764806A (zh) 2021-02-27 2021-02-27 一种前端资源模块化管理和资源打包配置方法

Publications (1)

Publication Number Publication Date
CN112764806A true CN112764806A (zh) 2021-05-07

Family

ID=75704297

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110220127.4A Pending CN112764806A (zh) 2021-02-27 2021-02-27 一种前端资源模块化管理和资源打包配置方法

Country Status (1)

Country Link
CN (1) CN112764806A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113254890A (zh) * 2021-06-01 2021-08-13 中电万维信息技术有限责任公司 基于虚拟机多样性的android软件防护装置及其使用方法
CN113378091A (zh) * 2021-06-08 2021-09-10 北京百度网讯科技有限公司 一种可视化项目生成方法、装置、电子设备及存储介质
CN115982491A (zh) * 2023-03-20 2023-04-18 建信金融科技有限责任公司 页面更新方法及装置、电子设备和计算机可读存储介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101739425A (zh) * 2008-11-04 2010-06-16 北大方正集团有限公司 一种网络页面整合的方法
US20110066957A1 (en) * 2009-09-17 2011-03-17 Border Stylo, LLC Systems and Methods for Anchoring Content Objects to Structured Documents
CN103327033A (zh) * 2013-07-16 2013-09-25 星云融创（北京）信息技术有限公司 一种提高网络资源访问速度的方法及装置
WO2015196442A1 (zh) * 2014-06-27 2015-12-30 华为技术有限公司 一种网页优化的设备及方法
CN107545058A (zh) * 2017-08-29 2018-01-05 北京北信源软件股份有限公司 一种页面加载方法、服务器及浏览器
CN108287704A (zh) * 2017-01-10 2018-07-17 北大方正集团有限公司 web前端开发项目搭建的方法及系统
CN109634654A (zh) * 2018-12-04 2019-04-16 北京马上慧科技术有限公司 一种页面封装方法、装置、系统、计算机设备和存储介质
CN112306503A (zh) * 2020-10-30 2021-02-02 中国平安财产保险股份有限公司 前端资源打包方法、装置、计算机设备及存储介质

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101739425A (zh) * 2008-11-04 2010-06-16 北大方正集团有限公司 一种网络页面整合的方法
US20110066957A1 (en) * 2009-09-17 2011-03-17 Border Stylo, LLC Systems and Methods for Anchoring Content Objects to Structured Documents
CN103327033A (zh) * 2013-07-16 2013-09-25 星云融创（北京）信息技术有限公司 一种提高网络资源访问速度的方法及装置
WO2015196442A1 (zh) * 2014-06-27 2015-12-30 华为技术有限公司 一种网页优化的设备及方法
CN108287704A (zh) * 2017-01-10 2018-07-17 北大方正集团有限公司 web前端开发项目搭建的方法及系统
CN107545058A (zh) * 2017-08-29 2018-01-05 北京北信源软件股份有限公司 一种页面加载方法、服务器及浏览器
CN109634654A (zh) * 2018-12-04 2019-04-16 北京马上慧科技术有限公司 一种页面封装方法、装置、系统、计算机设备和存储介质
CN112306503A (zh) * 2020-10-30 2021-02-02 中国平安财产保险股份有限公司 前端资源打包方法、装置、计算机设备及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
MEAHU: "入门Webpack，看这篇就够了", 《HTTPS://BLOG.CSDN.NET/U014181418/ARTICLE/DETAILS/52709985》 *
王艺燕 等: "基于HTML+CSS+JS的网页版2048的实现", 《电子世界》 *

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113254890A (zh) * 2021-06-01 2021-08-13 中电万维信息技术有限责任公司 基于虚拟机多样性的android软件防护装置及其使用方法
CN113378091A (zh) * 2021-06-08 2021-09-10 北京百度网讯科技有限公司 一种可视化项目生成方法、装置、电子设备及存储介质
CN113378091B (zh) * 2021-06-08 2024-05-14 北京百度网讯科技有限公司 一种可视化项目生成方法、装置、电子设备及存储介质
CN115982491A (zh) * 2023-03-20 2023-04-18 建信金融科技有限责任公司 页面更新方法及装置、电子设备和计算机可读存储介质

Similar Documents

Publication Publication Date Title
CN112764806A (zh) 一种前端资源模块化管理和资源打包配置方法
CN109189684B (zh) 基于Python的接口自动化测试方法
CN111124576B (zh) 一种多平台小程序及h5页面适配的方法及系统
CN113031932B (zh) 项目开发方法、装置、电子设备及存储介质
CN110780853A (zh) 前端框架及开发方法、存储介质、电子设备
CN108170435A (zh) 一种源代码转换方法、装置及设备
CN109840083A (zh) 网页组件模板构建方法、装置、计算机设备和存储介质
CN102289774A (zh) 金融交易处理系统中的图形化报文处理与测试系统及方法
CN104991810B (zh) 自动添加apk到安卓系统中的方法及处理系统
EP0520708A2 (en) Method and apparatus for converting high level form abstract syntaxes into an intermediate form
CN116974620A (zh) 应用程序的生成方法、运行方法以及相应的装置
CN104317580B (zh) 虚拟试验应用集成开发系统
CN116431155A (zh) 前端应用构建方法、介质、装置和计算设备
CN117519877A (zh) 快应用卡片的渲染方法、装置、存储介质及电子设备
CN112230918A (zh) 一种使用iframe内嵌网页的web端开发方法
CN112148263A (zh) 前端标准框架及其生成方法、装置、设备及存储介质
CN115629802A (zh) 程序移植处理方法及装置
CN109086148A (zh) 一种跨平台调用Web Service服务的方法
CN114706582A (zh) 程序运行时的图标处理方法及装置、电子设备、存储介质
CN114489861A (zh) 目标组件转化方法、装置、电子设备及可读存储介质
CN113986210A (zh) 一种支持脚本自定义的脚本引擎执行方法及系统
CN113608748A (zh) C语言转换Java语言的数据处理方法、装置及设备
CN113094040B (zh) 一种小程序编译方法和装置
CN117555587A (zh) 基于AngularJS框架的项目重构方法、装置、设备及介质
JP2019179383A (ja) Ａｐｉ処理方法、端末、ａｐｉ処理プログラム

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
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20210507