活字格7.0 update1新功能解密：六十七、性能提升（CDN）

一眼望天涯

本帖最后由 willning 于 2022-10-31 11:41 编辑

活字格V8.0及更新版本，推荐采用活字格云提供的官方CDN：完全免费，与活字格版本同步更新。
https://help.grapecity.com.cn/pages/viewpage.action?pageId=80213701

================
V7.1或更早版本请见：

性能优化，是所有应用系统不可忽视、不可或缺的必经之路。一个系统的性能好坏决定了这个系统未来的发展趋势。如果一个系统的性能出现了问题，那么会极大的影响使用者的用户体验，导致应用系统对使用者的效率提升大打折扣，甚至导致使用者会放弃使用。

但是，活字格作为大家的“老伙伴”，性能当然也是活字格的开发者们一定会考虑的~

在活字格7.1版本中，为了能让格友们使用活字格搭建性能高、使用体检佳的应用系统，活字格的工程师可是费了不少心思。接下来，就让我为大家揭晓在7.1新版本中，有什么样的性能优化和提升吧~

Number One——支持用户配置所有静态资源的URL（例如CDN）

以往为了提高静态资源的加载速度，提升应用系统的访问速度，老司机们应该都能用到了一个老套路——CDN加速。

老格友们应该都看过胡总的一篇帖子：

看完必恍然大悟的活字格内幕：二十五，性能问题教程二（CDN技术）

但是，有没有发现，此方法有很多不方便的地方，让我慢慢道来~~~

1、更换 index.html 文件不是官方支持的方式，并且很多格友们如果对CDN不是很了解，可能需要他人的帮助才可以完成；
2、当更新了活字格服务管理器版本后，还要重新替换新版的 index.html 文件，是不是很麻烦？
3、想做CDN，只能做活字格必须的js文件，比如Forguncy.js、Spread.js等，自己的静态资源无法做CDN，是不是很头大？

在活字格7.1版本中，官方支持利用配置文件直接配置使用CDN了，还能配置自己的静态资源CDN，让系统起飞！！！

省去了之前的很多麻烦，接下来就让我来说明下如何起飞吧~~~~

1、进入活字格服务管理器的路径下 C:\Program Files (x86)\ForguncyServer\Website\Resources；
2、打开cdnConfig.js这个文件；
image.png911779785.png

3、这个是一个JS文件，我们只需要修改文件的内容，文件内容如下：
image.png870358581.png

4、接下来我们有两种选择：

直接更新C:\Program Files (x86)\ForguncyServer\Website\Resources目录下的这个cdnConfig.js文件；
进入到C:\Users\Public\Documents\ForguncyServer\对应应用名下\Resources路径中，将此cdnConfig.js复制到该路径下。

上面两种方法的区别在于：方法一会影响所有已发布的应用，也就是说所有应用的文件都会根据此配置到对应的CDN服务器上请求静态资源，当升级活字格服务管理器版本后，需要重新配置该文件；

方法二只会影响当前的应用，但是当升级活字格服务管理器版本后，不需要再次配置该文件。

这里我们选用方法二进行配置，将cdnConfig.js文件复制到C:\Users\Public\Documents\ForguncyServer\对应应用名下\Resources路径中，重启服务。

5、CDN活字格必须的文件，需要进入到安装活字格服务管理器路径下：C:\Program Files (x86)\ForguncyServer\Website\Resources\Bundle下，如图：
image.png345176390.png

将以下需要做CDN的文件放置到CDN云服务上，我这里使用的是七牛云：
image.png171243590.png

点击对应文件的详情：
image.png397020873.png

拿到对应文件的文件链接。

再回到cdnConfig.js文件中，将CDN云服务对应的文件链接在js文件做对应：
image.png261246337.png

Forguncy.cdnConfig = {
"Bundle/forguncy.js": "http://qxwui7lrz.hn-bkt.clouddn.com/forguncy.js",
"Bundle/forguncyCalc.js": "http://qxwui7lrz.hn-bkt.clouddn.com/forguncyCalc.js",
// 对象名称为Bundle/ + CDN文件名 + 文件后缀，对象值为对应的文件CDN链接
}

复制代码

6、保存cdnConfig.js文件，重启对应的应用，当我们再次访问该应用时，在F12控制台就可以看到对应的文件已经从CDN服务器拿取了，如图：
image.png428925170.png

以上是对活字格文件的CDN配置，那么肯定就有小伙伴要问了，自己的静态资源如何配置CDN呢？？？

这里用背景图片举例，当我在设计器上传一张自定义的背景图片后：
image.png450889586.png

发布该工程，此背景图片会在C:\Users\Public\Documents\ForguncyServer\对应的应用名下\GeneratedResources\Images\GenerateImages\ImageCellType中。
image.png809782714.png

那么我们只需截取应用名后的路径，即GeneratedResources\Images\GenerateImages\ImageCellType\图片名.jpg。

然后将对应的图片，同样的，放入到CDN服务器中，拿到对应的文件链接；

最后在cdnConfig.js文件中进行如下配置：
image.png667905273.png

7、最后，一样的，重启应用，运行。
image.png589353026.png

个人静态资源也就配置好啦~！！！

Number Two——动态加载JavaScript

这里为了测试性能的变化，我们这里使用活字格本身自带的客户关系管理系统：

image.png228737792.png

这里我选择的是7.0.5.0和7.1版本进行对比测试，测试结果截图如下：

性能提升.png

可以看到有以下几点变化：

1、DOM加载速度： 1.47s ----> 138ms
2、整体页面加载速度： 2.13s ----> 1.46s
3、请求数： 175 requests ----> 135 requests
4、资源大小：6.1MB ---> 4.9MB
5、相应必须的JS文件，如Spread.js、Forguncy.js等文件大小都有减小。

在应用系统中，零点几秒的提升对于用户来说可能不会有太大的感觉，但是当工程复杂度逐渐升高，使用人数增加，那么这零点几秒的影响就会显现出来了。

除此之外，活字格会根据页面上使用的组件动态加载所必须的 js 文件，相比之前“胡子眉毛一把抓”，性能也是蹭蹭的飙升呀~~！！！

如图，我这里对比一下页面放置图表和不放置图表的效果：

没有放置图表：

image.png950904846.png