请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Erik.Xue 讲师达人认证 悬赏达人认证 活字格认证 Wyn认证
超级版主   /  发表于:2021-8-31 16:31  /   查看:6087  /  回复:3
本帖最后由 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新版本中,有什么样的性能优化和提升吧~
1.gif

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

以往为了提高静态资源的加载速度,提升应用系统的访问速度,老司机们应该都能用到了一个老套路——CDN加速。
20171026031405_yOuRHf.jpg
老格友们应该都看过胡总的一篇帖子:

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

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

sdbl.jpg

在活字格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
  1. Forguncy.cdnConfig = {
  2.     "Bundle/forguncy.js": "http://qxwui7lrz.hn-bkt.clouddn.com/forguncy.js",
  3.     "Bundle/forguncyCalc.js": "http://qxwui7lrz.hn-bkt.clouddn.com/forguncyCalc.js",
  4. // 对象名称为Bundle/ + CDN文件名 + 文件后缀,对象值为对应的文件CDN链接
  5. }
复制代码

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

放置一个柱形图图表后:
image.png10845946.png


发现没有?多了一个js文件,这个forguncyChart.js就是负责加载图表的基础js文件。

而活字格现在可以根据每个页面上放置的单元格类型,动态的加载所需要的js文件,是不是很智能!!!



3 个回复

倒序浏览
Chelsey.Wang讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2022-10-27 15:54:53
来自 4#
8.1免费CDN文件 cdnConfig.js (1.04 KB, 下载次数: 68)
回复 使用道具 举报
Chelsey.Wang讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2022-6-28 14:22:49
推荐
8.0 免费CDN文件 cdnConfig.js (1.24 KB, 下载次数: 101)
回复 使用道具 举报
Freya.Li
中级会员   /  发表于:2021-12-15 08:54:05
推荐
不过如果您不介意下面几点,葡萄城将为大家赠送福利了,您可以使用我们的免费CDN
1.如果您不介意使用我们的CDN服务器;
2.如果你不想花钱;
3.如果你的服务器可以访问外网;

我们对其中的一些js、css文件已经完成了cdn的配置,直接下载文件即可:
cdnConfig.js (1.11 KB, 下载次数: 200)
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部