在线表格编辑器去掉多余功能瘦身

收藏

   在线表格编辑器作为SpreadJS的扩展内容，被在线填报，BI设计，在线Excel，协同编辑等越来越多的业务场景所需要。其强大的定制能力和扩展能力收到了越来越多的客户青睐。在不同的行业和应用中，对于在线表格编辑器的需求也各不相同，所以并不是所有的功能都会被用在业务上，虽然通过页面的配置可以隐藏这些功能的入口。但是从性能的优化考虑，如果底层的代码逻辑也能删除，那么性能也会进一步的优化，更加高效。    本示例将以去除在线表格编辑器中的PDF,形状,图表功能为例子进行讲解，提供一个优化思路供大家参考和举一反三。
   思路如下，首先我们将在线表格编辑器中关于形状，PDF，图表功能的引用去除。
   第一步，先将入口隐藏
   pdf：
   filemenu文件夹下的filemenu.html
   删除exportpdf相关
   image.png77947691.png

   chart，shape：
   ribbon目录下的ribbon.html
   image.png809903564.png

删除完后我们看一下效果，导出已经没有了导出PDF,并且插入中也没有了图表和形状
image.png763648376.png

   第二步，去除PDF,形状,图表有关SpreadJS的引用，先关的关键字为PDF，Chart，Shape。做法如下：
   1.找到index目录下的index.html中，将包含上述关键字的相关的css,js引用先去除,如下图红框所示部分
   css：
   image.png27976378.png

js(spreadjs):
image.png586331786.png

js(在线表格编辑器)：
image.png464454955.png

之后我们看一下效果，删除后在线表格编辑器将无法启动，控制台中会报很多错误，而这些错误也是接下来需要删除的线索。
image.png834073486.png

2.根据控制台的报错，去删除对应的逻辑，报错的原因就是因为那里引用了chart，shape的相关内容。我们删掉时会发现有下图类似的声明，这也是删除的线索
image.png981600646.png

类似这样包含PDF，Chart，Shape关键字的声明，我们都需要去删掉，并且还要根据声明的变量名称去对应js中去查找，删除掉相关的引用部分。类似下图所示，你会发现关于一个功能的相关代码都会写在一起，删除时候整个删掉就行了，非常便利。删除完后还有一些遗留的内容，但其实已经不影响使用了，如果想要删的干净，就在对应的js中在以chart，shape等这样的关键字搜索一遍，将先关遗留的内容再删干净。
image.png444061583.png

删除掉之后我们再看一下，发现现在在线表格编辑器可以顺利运行起来了，测试之后大约能减少在线表格编辑器5M左右的加载大小，和1秒多的加载时间。

		自动登录	找回密码
密码			立即注册

在线表格编辑器去掉多余功能瘦身

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄