怎样优化一个十年老项目？EXT

说实话一直没有接触过ext.js这个框架，进来的时候也说得是写react，一看到这个框架整个人都懵了。

没办法学呗，但是当我down下代码后，发现并没有使用sencha打包工具，是直接将整个文件放在服务器，通过nginx访问地址。关键这还是个收费框架，当前使用版本是收费版本，本想使用sencha来重构试下，却怎么都找不到当前版本的源码。。。。

本来也想用react或者vue重构，不对，应该说重写一遍，搞了几天放弃了，文档，业务逻辑一团乱，也没法梳理，只好重新想办法优化当前代码了。

第一次启动项目的时候我震惊了，登陆系统后，首页加载花了几分钟，http请求1000多个，我吐了。后来问了下才知道master分支代码不是最新，是弃用版本？？？拉了最新的版本后，加载时间快了很多，但还是在20~30s左右。此时http请求还有几百个。这两个版本之间是之前的前端人员做了菜单的按需加载，老版本是只要进入就会加载所有页面，组件。

那就开始优化吧，路漫漫其修远兮，吾将上下而求索。

1. 启用gzip压缩
   原来没有gzip压缩，其中ext-debug-js文件甚至有10M大小，其他很多js文件也有几百K，启用之后文件小了很多。

2. 页面，组件按需加载
   没有按需加载之前的页面加载，你吃完饭回来再看可能还没出来。之前只是实现了菜单的按需加载，但是每个页面里面还有很多的组件和子页面，只要一点击菜单进入页面就会统统全部加载，那酸爽，调试起来简直美滋滋。除了页面一起加载外，连同子页面的数据请求都在最外层页面一起发起，每次开页面都是几百个http请求。这个优化只能慢慢进行，不过确实能让加载时间大幅优化，本来应该将图片抽出做成精灵图来减少http请求，但是项目中使用图片总共就几张，就暂时不做。

3. 跨域方式修改
   项目原来使用ajax跨域请求后端数据，每次请求就会出发两条，第一条options请求来允许跨域，在发送第二条实际请求。而且每次更换环境，就需要修改config配置文件很麻烦，当然目前使用的jenkins发布项目，进行过配置就不用手动修改文件，但是每次两个请求总归是不好看，所以改为nginx代理的方式来进行跨域，前端就直接使用自己的域，无需每次更改环境地址。window.location.origin

4. js,css文件处理
   压缩文件，使用cdn方式加载，一些css文件进行合并，减少文件数量

优化之路漫长，优化之后确实打开速度有所加快，但是还是达不到秒级。其中一些组件耦合太过严重，还需要考虑异步加载造成的数据无法获取，有想过能否是用webpack来进行打包，但是webpack使用不够熟练。还要吐槽一句：ext框架的相关内容太特么难找了啊，文档也是没有案列，难受。。。。。。