CN108241902A - 一种Web项目工程化及性能优化方法 - Google Patents

一种Web项目工程化及性能优化方法 Download PDF

Info

Publication number
CN108241902A
CN108241902A CN201611222014.3A CN201611222014A CN108241902A CN 108241902 A CN108241902 A CN 108241902A CN 201611222014 A CN201611222014 A CN 201611222014A CN 108241902 A CN108241902 A CN 108241902A
Authority
CN
China
Prior art keywords
page
file
project
script
label
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
CN201611222014.3A
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.)
Nanjing Basic Information Technology Ltd By Share Ltd
Original Assignee
Nanjing Basic Information Technology Ltd By Share 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 Nanjing Basic Information Technology Ltd By Share Ltd filed Critical Nanjing Basic Information Technology Ltd By Share Ltd
Priority to CN201611222014.3A priority Critical patent/CN108241902A/zh
Publication of CN108241902A publication Critical patent/CN108241902A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q10/00—Administration; Management
    • G06Q10/04—Forecasting or optimisation specially adapted for administrative or management purposes, e.g. linear programming or "cutting stock problem"
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q10/00—Administration; Management
    • G06Q10/10—Office automation; Time management
    • G06Q10/103—Workflow collaboration or project management

Landscapes

  • Business, Economics & Management (AREA)
  • Engineering & Computer Science (AREA)
  • Human Resources & Organizations (AREA)
  • Strategic Management (AREA)
  • Economics (AREA)
  • Entrepreneurship & Innovation (AREA)
  • General Business, Economics & Management (AREA)
  • Marketing (AREA)
  • Operations Research (AREA)
  • Quality & Reliability (AREA)
  • Tourism & Hospitality (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Development Economics (AREA)
  • Game Theory and Decision Science (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明公开一种Web项目工程化及性能优化方法，包括：针对单页面应用(SPA)提出的工程化优化方法，以优化单次WebView页面请求资源为目标。建立项目，编写项目中页面WebView路由文件，并根据组件化需求和页面规划将项目文件切分为组件和页面模板文件；进一步的，编译器通过读取路由设置，获取客户端请求，预先将组件和页面模板中需要的JS和CSS代码进行处理和整合，实现预编译过程；进一步的，替换文件中原有的<src>标签和<script>标签，实现根据页面加载需求，优化连接数和加载数据的目的。

Description

一种Web项目工程化及性能优化方法
技术领域
本发明涉及Web前端优化方法，尤其涉及一种Web项目工程化及性能优化方法。
背景技术
现在的Web项目随着需求的增加，更加的向着复杂化、大型化、可定制化发展，尤其是单页面应用(SPA：Single Page Application)的出现，Web项目的复杂性更是成倍增长。
但是现有的项目组织和优化方式还比较原始，一般的Web项目并没有对项目文件进行整合和优化的工作，仅有的优化方法只是一些压缩、规整等处理，在比较简单的项目中性能尚好，但是在现代大型项目中，由于不同的团队合作开发，加上组件化的要求，项目中文件和引用非常复杂，大型项目，尤其是组件多的项目由于引用文件和依赖过多，导致页面加载时并发请求很多，在服务器并发受限的情况下甚至可能出现加载不完全而造成功能或者样式缺失的情况。
现有的SPA Web项目优化方法，由于SPA项目本身可以看做一个大页面，展示不同的内容只是页面之中不同的内容请求。现有SPA Web项目两种优化方法，第一种是将整个项目作为一个整体进行优化，将项目中全部的样式和脚本分别整合进入尽量少的文件中，优点就是加载请求少，缺点就是如果项目复杂性高的话，单个文件体积就会过于庞大，会造成加载缓慢，而且浏览器的css和js代码解析器都是顺序执行，过大的文件可能会产生解析缓慢甚至空白，功能样式暂时缺失的问题。第二种方法就是拆分模块化，但是过于细碎的脚本和样式文件会造成大量的零碎请求，在一些云服务商的服务器上，同时请求的连接数是受限的，对于样式元素的零碎请求会占用数据的请求链接，同样会造成页面的卡顿和响应变慢。
还有一种优化方法是使用可配置的加载器，在加载页面时先加载加载器，加载器根据页面组件的配置需求对脚本和样式进行请求和加载，即现在的按需加载方法。按需加载方法很好的解决了冗余代码的问题，但是采用这种方法的情况下，客户端在加载页面资源的时候就必须依赖一个专用的加载器并需要加载页面配置，才能完成对资源的请求。另外，如果需要优化http请求数量，服务器端就需要部署请求文件合并的支持。这一点除了一些特定的服务商，一般的服务器环境是比较难以做到的。
另外还有一些传统的面向单html文件的按需加载优化方法，由于优化的维度和思路不同，这些优化方法并不完全适用于单页面应用(SPA)项目中，只能做一些粗略的优化，并不能真正起到重新整合资源的作用。
发明内容
为解决上述问题，本发明针对单页面应用(SPA)提出工程化优化方法，以优化单次WebView页面请求资源为目标，使用已有的编译工具，优化其文件组织方式及部署策略，在现有软硬件环境下实现优化Web性能。
本发明主要包括以下步骤：
步骤一：建立项目，编写项目中页面WebView路由文件。
步骤二：根据组件化需求和页面规划将项目文件切分为组件和页面模板文件。
所述页面模板文件包含页面的js和css代码。
步骤三：编译器通过读取路由设置，获取客户端请求，预先将组件和页面模板中需要的js和css代码进行处理和整合，实现预编译过程。
所述js代码校验压缩后，整合成所述规划页面专用js文件链接进入页面；
所述css代码经过校验压缩后写入所述规划页面的<style>标签内。
进一步的，替换文件中原有的<src>标签和<script>标签，根据页面加载需求，实现优化连接数和加载数据的目的。
进一步的，结合其他Grunt插件对项目中的图片再次进行合并和压缩。
所述编译器并不仅仅通过模板上的引入标签来读取和处理相关脚本，进一步的可以根据模板对应的路由来对脚本和样式进行优化，根据页面加载需求，智能的提供整合过的脚本和样式，从而达到优化加载连接数和减少加载数据量的目的。
所述预编译过程，可实现该预编译环境下的页面资源按需加载功能，服务端不需要对所需资源再次进行处理编译，因此对服务器端的部署部署没有功能上的硬性要求。
步骤四：发布部署项目，服务器将预编译完成的所述js和css代码提供给浏览器，客户端即可访问应用。
本发明所公开的方法，同现有技术相比，本发明有如下有益效果：
(1)本发明可以实现样式的分布化管理和按需加载，避免了组件和页面的样式定义重复带来的冲突问题。
(2)本发明在现有的服务器和网络条件下，对于单次请求的文件体积，http连接数量限制取得了相对的比较平衡的结果。
(3)本发明基于现有技术改进而来的，现有Web工程化工具都可以执行，部署实施和重构相对方便快捷，源语言模板编写方式符合现有方法的习惯，脚本和样式的分离整合均由编译器自动完成，编译发布时也可以自动化完成。
附图说明
图1为本发明实施步骤图。
图2为预编译器对资源进行管理的示意图。
具体实施方式
下面结合附图对本发明的技术方法进行详细说明。
图1为本发明实施步骤图。
步骤一：建立项目，编写项目中页面WebView路由文件。
根据项目需求，定义项目WebView的路由表(router map)，具体的方式和代码可以根据项目实际使用的框架实现方式而定，可选的框架有AngularJS、React或其他MVVM/MVC框架，这些框架均有官方支持的路由配置系统，编译器可以对这些框架的路由提供解析支持。
本发明基于现有技术改进而来的，现有的Web工程化工具都可以执行，部署实施和重构相对方便快捷。
本实施例以AngularJS举例说明本发明的实施步骤。
步骤二：根据组件化需求和页面规划将项目文件切分为组件和页面模板文件。
所述页面模板文件包含页面的js和css代码。
根据所述路由表编写页面或组件的模板文件，将页面js代码和css代码分别写在模板文件指定的标签中或直接在页面中引入，也可由外部文件引入。
在AngularJS环境下，使用AngularJS的Angular UI Router来定义单页应用路由表配置，此路由表定义每一个路由路径对应的模板文件路径和相关的配置选项。
步骤三：编译器通过读取路由设置，获取客户端请求，预先将组件和页面模板中需要的js和css代码进行处理和整合，实现预编译过程。
所述js代码校验压缩后，整合成所述规划页面专用js文件链接进入页面；
所述css代码经过校验压缩后写入所述规划页面的<style>标签内。
进一步的，替换文件中原有的<src>标签和<script>标签，实现根据页面加载需求优化连接数和加载数据的目的。
进一步的，结合其他Grunt插件对项目中的图片再次进行合并和压缩。
所述编译器核心以NodeJS插件的形式提供。在AngularJS环境下，根据路由表配置创建和编写模板文件，模板相关的样式和脚本文件可以在文件中的<src>标签和<script>标签中引入，在模板上引入的方式就和传统的web项目一样。
进一步的，所述编译器可以根据模板对应的路由来对脚本和样式进行优化，根据页面加载需求智能的提供整合过的脚本和样式，从而达到优化加载连接数和减少加载数据量的目的。
当所述一个模板文件被两条路由采用，所述编译器就会为这两条路由分别生成相应的脚本和样式资源，自动将模板相关的引入文件进行合并，压缩处理，并替换原有引入标签为统一处理之后的样式和脚本，实现根据页面加载需求优化连接数和加载数据的目的。
所述预编译过程，可实现该预编译环境下的页面资源按需加载功能，服务端不需要对所需资源再次进行处理编译，因此对服务器端的部署部署没有功能上的硬性要求。
所述按需加载脚本是根据页面需求预编译完成的，脚本、样式资源的整合，校验和处理在发布时就已经完成，并不需要客户端单独加载加载器脚本和配置，也不需要服务器端根据http请求实时处理生成需要的资源。
图2为预编译器对资源进行管理的示意图，如图2所示，有以下结构的项目，所述项目中设置了3个路由视图：路由视图1、路由视图2和路由视图3，分别对应的模板文件为页面1.html、页面2.html和页面3.html。
所述项目的所有功能都已经模块化并将代码分离处理，分别有模块1、模块2、模块3和模块4，每一个模块均有对应的css和js，名称分别为模块名+.css和模块名+.js。另外，有一些独立于模块之外的公共功能和界面使用的js，独立成为一个公共脚本文件(公共脚本.js)。
图2中标明了每一个模板文件和模块资源的关系，由于模块和模板文件是两个独立的系统，所以同一个模块可能在多个模板都有引用，故相应的资源也会存在在页面模板交叉引用的状况。
所述编译器通过读取路由表设置获知每一条路由规则对应的页面模板需要引用的资源，通过预编译过程对这些资源进行合并，校验和压缩，再将整合过的资源替换进入页面模板。这样，当所述代码部署到服务器上之后，每一条路由规则都已经有了经过整合优化处理过后的对应资源。
由于所述预编译过程已经完全分析过每一条路由对应的资源，所以实现了针对路由规则的按需加载。
进一步的，因为相关资源(css，js)的合并，压缩等处理已经在编译的时候完成，所以并不需要部署服务器具有编译功能，因此用户访问url所请求的相关资源都已经在部署服务器上预先准备好。
步骤四：发布部署项目，服务器将预编译完成的所述js和css代码提供给浏览器，客户端即可访问应用。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所做的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (2)

1.一种Web项目工程化及性能优化方法，其特征在于，包括以下步骤：
步骤一：建立项目，编写项目中页面WebView路由文件；
步骤二：根据组件化需求和页面规划将项目文件切分为组件和页面模板文件；
所述页面模板文件包含页面的js和css代码；
步骤三：编译器通过读取路由设置，获取客户端请求，预先将组件和页面模板中需要的js和css代码进行处理和整合，实现预编译过程；
所述js代码校验压缩后，整合成所述规划页面专用js文件链接进入页面；
所述css代码经过校验压缩后写入所述规划页面的<style>标签内；
进一步的，替换文件中原有的<src>标签和<script>标签，根据页面加载需求，实现优化连接数和加载数据的目的；
步骤四：发布部署项目，服务器将预编译完成的所述js和css代码提供给浏览器，客户端即可访问应用。
2.根据权利要求1所述的方法，其特征在于：
进一步的，所述编译器根据模板对应的路由对脚本和样式进行优化，根据页面加载需求智能的提供整合过的脚本和样式，从而达到优化加载连接数和减少加载数据量的目的。
CN201611222014.3A 2016-12-23 2016-12-23 一种Web项目工程化及性能优化方法 Pending CN108241902A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201611222014.3A CN108241902A (zh) 2016-12-23 2016-12-23 一种Web项目工程化及性能优化方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201611222014.3A CN108241902A (zh) 2016-12-23 2016-12-23 一种Web项目工程化及性能优化方法

Publications (1)

Publication Number Publication Date
CN108241902A true CN108241902A (zh) 2018-07-03

Family

ID=62702382

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201611222014.3A Pending CN108241902A (zh) 2016-12-23 2016-12-23 一种Web项目工程化及性能优化方法

Country Status (1)

Country Link
CN (1) CN108241902A (zh)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109683890A (zh) * 2018-11-16 2019-04-26 东软集团股份有限公司 层叠样式表模块化的方法、装置、存储介质及设备
CN109739604A (zh) * 2018-12-28 2019-05-10 北京城市网邻信息技术有限公司 页面渲染方法、装置、服务器及存储介质
CN110457022A (zh) * 2019-07-19 2019-11-15 上海易点时空网络有限公司 基于nodejs的非侵入式项目执行方法及系统、存储介质
CN110704101A (zh) * 2019-09-06 2020-01-17 平安普惠企业管理有限公司 代码文件构建方法、装置、设备及计算机可读存储介质
CN111079062A (zh) * 2019-12-27 2020-04-28 北京达佳互联信息技术有限公司 页面创建方法、装置、电子设备和存储介质
CN112099965A (zh) * 2020-08-07 2020-12-18 咪咕文化科技有限公司 原生应用调用js的方法、装置、电子设备及存储介质
CN113873013A (zh) * 2018-12-25 2021-12-31 创新先进技术有限公司 一种离线包重组方法及系统

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104991860A (zh) * 2015-06-24 2015-10-21 深圳欧德蒙科技有限公司 Web前端自动化开发方法与系统
CN105224314A (zh) * 2015-09-09 2016-01-06 北京思特奇信息技术股份有限公司 一种实现前端代码自动优化的方法及系统

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104991860A (zh) * 2015-06-24 2015-10-21 深圳欧德蒙科技有限公司 Web前端自动化开发方法与系统
CN105224314A (zh) * 2015-09-09 2016-01-06 北京思特奇信息技术股份有限公司 一种实现前端代码自动优化的方法及系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
王成等: "Web前端性能优化方案与实践", 《计算机应用与软件》 *

Cited By (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109683890A (zh) * 2018-11-16 2019-04-26 东软集团股份有限公司 层叠样式表模块化的方法、装置、存储介质及设备
CN109683890B (zh) * 2018-11-16 2022-02-08 东软集团股份有限公司 层叠样式表模块化的方法、装置、存储介质及设备
CN113873013A (zh) * 2018-12-25 2021-12-31 创新先进技术有限公司 一种离线包重组方法及系统
CN113873013B (zh) * 2018-12-25 2023-06-16 创新先进技术有限公司 一种离线包重组方法及系统
CN109739604A (zh) * 2018-12-28 2019-05-10 北京城市网邻信息技术有限公司 页面渲染方法、装置、服务器及存储介质
CN109739604B (zh) * 2018-12-28 2022-04-15 北京城市网邻信息技术有限公司 页面渲染方法、装置、服务器及存储介质
CN110457022A (zh) * 2019-07-19 2019-11-15 上海易点时空网络有限公司 基于nodejs的非侵入式项目执行方法及系统、存储介质
CN110457022B (zh) * 2019-07-19 2023-04-18 上海易点时空网络有限公司 基于nodejs的非侵入式项目执行方法及系统、存储介质
CN110704101A (zh) * 2019-09-06 2020-01-17 平安普惠企业管理有限公司 代码文件构建方法、装置、设备及计算机可读存储介质
CN111079062A (zh) * 2019-12-27 2020-04-28 北京达佳互联信息技术有限公司 页面创建方法、装置、电子设备和存储介质
CN112099965A (zh) * 2020-08-07 2020-12-18 咪咕文化科技有限公司 原生应用调用js的方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN108241902A (zh) 一种Web项目工程化及性能优化方法
CN105373615B (zh) 一种页面定制化的方法和装置
US7836119B2 (en) Distributed execution model for cross-organizational declarative web applications
US8930824B2 (en) Facilitating propagation of user interface patterns or themes
US20140310591A1 (en) Presentation layer software development kit for creation of dynamic webpages
CN104573131B (zh) 生成商品详情页面数据的方法和终端装置
CN102360290A (zh) 表单生成装置和表单生成方法
US8370859B2 (en) Creating web services from an existing web site
CN108073435B (zh) 一种多信息集成显示方法及系统
US8839192B2 (en) System and method for presentation of cross organizational applications
CN112286513A (zh) 基于组件元数据的可视化设计方法和装置
CN105138448A (zh) 一种在前端测试页面的方法和装置
CN104793961A (zh) 使用原生Web代码的快速JavaWeb开发方法及系统
CN101185303A (zh) 创建用于绑定应用程序与关联后端服务器之间的消息的映射文档的系统及方法
CN106354748A (zh) 一种网页生成方法和装置
CN102968307A (zh) 一种基于java的web开发中间件
CN104424265A (zh) 数字资源管理方法及系统
CN104951311B (zh) 一种页面制作方法及装置
CN103646023A (zh) 一种基于web的增加页面/控件的方法
CN100511140C (zh) 构件化软件系统实现脚本语言调用多输出参数接口的方法
CN102622376A (zh) 用于合并层叠样式表文件的方法和设备
CN106502757A (zh) 一种插件管理方法及装置
CN102253986A (zh) 提高多终端网页显示效果的方法和装置
CN109614084A (zh) web程序及其快速开发框架、开发方法与相关设备
Bonifati et al. Building multi-device, content-centric applications using WebML and the W3I3 Tool Suite

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
CB02 Change of applicant information
CB02 Change of applicant information

Address after: 210014 three floor, building five, five, Bai Xia hi tech park, No. 5, Yong Zhi Road, Qinhuai District, Nanjing, Jiangsu.

Applicant after: Nanjing Yicheng Information Technology Co., Ltd.

Address before: 210014 three floor, building five, five, Bai Xia hi tech park, No. 5, Yong Zhi Road, Qinhuai District, Nanjing, Jiangsu.

Applicant before: Nanjing basic information technology Limited by Share Ltd

WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20180703