[发明专利]一种Web项目工程化及性能优化方法

说明书

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

技术领域

本发明涉及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文件链接进入页面；