ExtJs 加载优化

ExtJS 是个功能丰富、强大的 javascript 库，适合做一些富客户端界面。但是其庞大的体积会导致网页加载时间长，给人很慢的感觉。

为了找到网页加载慢的真正原因，首先你应该用 YSlow 这样的工具仔细分析一下，看看到底是哪些方面导致的。ExtJS可能只是其中的一个原因，也许还有别的地方影响了加载速度。下面只谈谈如何解决 ExtJs 加载慢的问题。

就像任何软件一样，功能越多就会体积越大，这个在所难免。

对于ExtJs，最简单的傻瓜式使用方法就是在页面中引入这三个文件：

ext-all.css（138K）、ext-base.js（32K）、ext-all.js（635K），

还有 ext-core.js（85K），另外js文件还有对应的debug版：ext-base-debug.js（78K）、ext-all-debug.js（1.13M）

这仅仅是ExtJS，你的页面中肯定还有很多其它东西，加在一起可就不小了。按照一般的网速，下载这些东西就要等半天了。

1.不要使用debug的js文件（体积缩小1/2）

debug版的js和非debug版的js完全一样，只是没有压缩而已，但体积大了一倍，ext-all-debug.js达到1.13M！

所以，不要使用debug的，除非你需要做相关调试。就算要调试，那也只是在开发的时候，别忘了换回去。

2.自定义裁减 extjs（体积又缩小到原来的几分之一）

extjs 功能众多，但大多数人只用到其中的少数功能。傻瓜式的方式只是在开发时简单，正是环境应该用多少使多少，定制一份自己用到的部分，这样可以小很多。extjs也是模块化实现的，在其网站上可以自定义一份：http://www.sencha.com/products/js/build/

3.启用gzip压缩（体积进一步缩小到原来的几分之一）

这个很重要。一般web服务器都支持gzip压缩，gzip压缩对于文本类型的文件都有很好的压缩效果。比如 635K 的 ext-all.js 经过gzip压缩后只有 168K，85.8K的ext-core.js压缩后是28.6K，太棒了！

apache、nginx等服务器均支持gzip压缩，建议配置一下对所有超过2k的 js、css 文件启用gzip压缩。除了web服务器，像tomcat、jetty这样的应用服务器也都支持gzip压缩。具体查看配置文档就知道了，很简单的。

提示：建议使用 静态gzip压缩 或者叫 预压缩静态内容，因为server在运行时进行压缩要消耗一定的cpu资源，而对于js这些静态内容而言完全可以预先压缩好，如果有以 .gz 结尾的同名文件，server直接返回压缩好的内容即可，这样减轻一些服务器的负担。

Nginx和jetty都支持静态压缩，分别见这里 http://wiki.nginx.org/NginxHttpGzipStaticModule 和 http://wiki.eclipse.org/Jetty/Feature/GZIP_Compression 。

常见的后台组合是动内容和静态内容分离，然后让Web服务器处理所有的静态资源，应用服务器专心处理动态内容。

中小型应用也可以只用tomcat这样的应用服务器（简单一些），如果JavaEE的servlet容器不支持静态压缩，可以编写一个filter来实现同样的压缩或缓存效果。

话说多了，这方面都属于性能优化了。

最后，别忘了利用客户端浏览器上的缓存，下载一次就可以了，以后全部使用本地缓存。主要适用于用户会多次访问的情况。

网上还有人说使用JSA这样的 javascript 脚本压缩、混淆工具还可以进一步缩小体积，实际上非debug的js已经是经过一定压缩的了，继续做语言层面的压缩效果不明显。并且如果已经使用gzip压缩了，就没必要做这个了。