Web project engineering and performance optimization method

An optimization method and technology of project engineering, applied in office automation, instruments, data processing applications, etc., can solve the problems of lack of functional style, page stuck response, and high complexity, and achieve the effect of convenient and quick deployment, implementation and reconstruction.

Inactive Publication Date: 2018-07-03
NANJING UNARY INFORMATION TECH
View PDF2 Cites 8 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

There are two optimization methods for existing SPA Web projects. The first one is to optimize the entire project as a whole, and integrate all styles and scripts in the project into as few files as possible. The advantage is that there are fewer loading requests, and the disadvantage is that if the project If the complexity is high, the volume of a single file will be too large, which will cause slow loading, and the browser's css and js code parsers are executed sequentially, and files that are too large may be slow to parse or even blank, and the functional style is temporarily missing question
The second method is to split and modularize, but overly fr

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Web project engineering and performance optimization method
  • Web project engineering and performance optimization method

Examples

Experimental program
Comparison scheme
Effect test

Embodiment Construction

[0026]下面结合附图对本发明的技术方法进行详细说明。

[0027]图1为本发明实施步骤图。

[0028]步骤一：建立项目，编写项目中页面WebView路由文件。

[0029]根据项目需求，定义项目WebView的路由表(router map)，具体的方式和代码可以根据项目实际使用的框架实现方式而定，可选的框架有AngularJS、React或其他MVVM / MVC框架，这些框架均有官方支持的路由配置系统，编译器可以对这些框架的路由提供解析支持。

[0030]本发明基于现有技术改进而来的，现有的Web工程化工具都可以执行，部署实施和重构相对方便快捷。

[0031]本实施例以AngularJS举例说明本发明的实施步骤。

[0032]步骤二：根据组件化需求和页面规划将项目文件切分为组件和页面模板文件。

[0033]所述页面模板文件包含页面的js和css代码。

[0034]根据所述路由表编写页面或组件的模板文件，将页面js代码和css代码分别写在模板文件指定的标签中或直接在页面中引入，也可由外部文件引入。

[0035]在AngularJS环境下，使用AngularJS的Angular UI Router来定义单页应用路由表配置，此路由表定义每一个路由路径对应的模板文件路径和相关的配置选项。

[0036]步骤三：编译器通过读取路由设置，获取客户端请求，预先将组件和页面模板中需要的js和css代码进行处理和整合，实现预编译过程。

[0037]所述js代码校验压缩后，整合成所述规划页面专用js文件链接进入页面；

[0038]所述css代码经过校验压缩后写入所述规划页面的标签内。

[0039]进一步的，替换文件中原有的标签和标签，实现根据页面加载需求优化连接数和加载数据的目的。

[0040]进一步的，结合其他Grunt插件对项目中的图片再次进行合并和压缩。

[0041]所述编译器核心以NodeJS插件的形式提供。在AngularJS环境下，根据路由表配置创建和编写模板文件，模板相关的样式和脚本文件可以在文件中的标签和标签中引入，在模板上引入的方式就和传统的web项目一样。

[0042]进一步的，所述编译器可以根据模板对应的路由来对脚本和样式进行优化，根据页面加载需求智能的提供整合过的脚本和样式，从而达到优化加载连接数和减少加载数据量的目的。

[0043]当所述一个模板文件被两条路由采用，所述编译器就会为这两...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

No PUM Login to view more

Abstract

The invention discloses a web project engineering and performance optimization method. According to the engineering optimization method proposed for a single page application (SPA), optimizing single-WebView page request resources is adopted as an objective; a project is created; a page WebView routing file in the project is written; a file project is divided into a component template file and a page template file according to componentization requirements and page planning; a compiler obtains a client request by reading routing settings, and processes and integrates JS and CSS codes needed inthe component template and the page template in advance, so as to realize a pre-compilation process; and original (src) tags and (script) tags in the file are substituted, and connection numbers anddata loading can be optimized.

Description

technical field [0001] The invention relates to a Web front-end optimization method, in particular to a Web project engineering and performance optimization method. Background technique [0002] With the increase of demand, the current web projects are becoming more complex, large-scale, and customizable. Especially with the emergence of single page applications (SPA: Single Page Application), the complexity of web projects has doubled. [0003] However, the existing project organization and optimization methods are still relatively primitive. The general Web project does not integrate and optimize project files. The only optimization methods are some processing such as compression and regularization, and the performance is still good in relatively simple projects. , but in modern large-scale projects, due to the development of different teams and the requirements of componentization, the files and references in the project are very complicated. Large-scale projects, especia...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Application Information

Patent Timeline
no application Login to view more
IPC IPC(8): G06Q10/04G06Q10/10
CPCG06Q10/04G06Q10/103
Inventor 张鼐张有成许萍萍
Owner NANJING UNARY INFORMATION TECH
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap