高性能WEB开发JS CSS合并 压缩 缓存管理

存在的问题：文件合并压缩主要有两个问题：1。每次发布时，都需要运行自己的bat文件或其他程序，根据自己的配置来合并和压缩文件。2.由于生产环境和开发环境需要加载的文件不同，生产环境需要加载合并和压缩的文件，而开发环境需要加载非合并和压缩的文件，以便于修改和调试。因此，我们经常需要在JSP中判断类似如下的代码：复制代码如下： c 3360 if test=' $ { env=' prod ' } '脚本类型=' text/JavaScript ' src=' http 3360/js/all . js '/脚本/c : if c : if test=' $ { env=' dev ' } '脚本类型=' text/JavaScript ' src=' http 3360/js 'JS/script script type=' text/JavaScript ' src=' http :/JS/3 . JS '/script/c : if缓存问题：在JS满天飞的时代，大家都知道缓存可以带来很大的好处，但确实是个麻烦的问题。相信很多人都经历过以下情况：为了让程序更快，把缓冲了5天的代码添加到服务器上的JS，但是产品更新后的第二天，就接到电话说系统出了问题。详细了解后发现是缓存引起的，删除缓存后用户就OK了。原因很简单，就是你的JS已经修改了，但是用户还在使用缓存中的旧JS。经历过几次这种情况，被领导骂了几次之后。没有办法，只能去掉JS的缓冲区，或者改成8小时。这完全失去了缓存的优势，那么我们需要解决什么问题才能让我们对缓存的使用满意呢？1.如何在修改一个JS后，自动给所有引用JS页面的代码添加一个版本号？2.如何生成版本号，根据什么生成这个版本号。也许有人写了一个JSP标签来解决上面的缓存问题，通过标签读取JS和css文件的修改时间作为版本号，从而解决了上面两个问题。然而，这种方法有以下缺点：1 .每个请求都需要通过标签读取文件的修改时间，速度比较慢。当然，您可以将文件修改时间放在缓存中，这也会增加内存使用。2.它不能用于HTML静态页面。3.如果贵公司采用以下部署发布方式(我公司就是这种情况)，则无效。每个版本都没有直接覆盖之前的WEB目录，运维部门方便发布。要求每个版本直接给他们一个war包，他们会把之前的WEB目录完全删除，然后上传当前的war包，导致程序运行后所有文件的最终修改时间。在自己的项目中分享处理方案：为了解决上面讨论的问题，我编写了以下组件。在组件中，文件大小根据我们自己的实际情况作为文件的版本号。虽然文件修改很小(比如把字符A改成B)，但文件大小可能不会变，所以版本号也不会变。但是概率还是很低的。当然，如果你觉得用文件修改时间作为版本号比较适合，只需要修改一行代码就可以了。我们来看看这个组件的处理流程(原本打算用流程图表示，最后写成了纯文本):1。程序启动(上下文初始化)2。在程序目录中搜索所有merge.txt文件，根据merge.txt文件的配置进行文件合并。merge.txt文件示例如下：# file合并配置文件，多个文件用|(以/)开头)分隔，#空格后的文件名表示合并后的文件名#。合并到所有文件1中。JS | 2 . JS | 3 . JS all . JS # merge CSS/CSS/mian . CSS |/CSS/common . CSS all . CSS 3 .搜索程序目录中的所有JS和CSS文件(包括合并后的文件)，每个文件都会被压缩生成一个对应的新文件。4.在程序目录中搜索所有的JSP和HTML文件，将所有JS和CSS的引用代码改为添加了版本号的压缩引用。示例：示例的文件结构如下：。

看JSP原始代码（程序运行前): 复制代码代码如下：% @页面内容类型=“文本/html”页面编码='UTF-8'%！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD“% boolean IsDev=false；//是否开发环境% html头元http-equiv='内容-类型' Content=' text/html；charset=UTF-8 ' title JSp Page/title % if(IsDev){ % script type=' text/JavaScript ' src=' http :%=request。GetContextPath()%/js/jquery-1。4 .2 .js /脚本脚本类型=' text/JavaScript ' src=' http :%=request。GetContextPath()%/js/1。js /脚本类型=' text/JavaScript ' src='/h1/body/html程序运行后JSP的代码：复制代码代码如下：% @页面内容类型=“文本/html”页面编码='UTF-8'%！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD“% boolean IsDev=false；//是否开发环境% html头元http-equiv='内容-类型' Content=' text/html；charset=UTF-8 ' title JSp Page/title % if(IsDev){ % script type=' text/JavaScript ' src=' http :%=request。GetContextPath()%/js/jquery-1。4 .2-3格明。js？99375/脚本脚本类型=' text/JavaScript ' src=' http :%=request。getcontextpath()%/js/1-3gmin。js？90 '/脚本脚本类型=' text/JavaScript ' src=' http :%=request。getcontextpath()%/js/2-3gmin。js？91 '/脚本链接类型='text/css' rel='样式表href=' %=请求。getcontextpath()%/CSS/1-3gmin。CSS？35' /链接类型='text/css' rel='样式表href=' %=请求。getcontextpath()%/CSS/2-3gmin。CSS？18 '/% } else { % script type=' text/JavaScript ' src=' http :%=request。getcontextpath()%/js/jquery-1。4 .2-3格明。js？99375/脚本脚本类型=' text/JavaScript ' src=' http :%=request。getcontextpath()%/js/all-3 gmin。js？180 '/脚本链接类型='text/css' rel='样式表href=' %=请求。getcontextpath()%/CSS/all-3 gmin。CSS？53 '/% } %/头身氕类='c1 '你好世界！/h1 /body /html加3gmin后缀的文件全部是程序启动时自动生成的。实例下载：猛击此处下载PS:自己的设计的处理方案并没有解决'需要JSP中加判断代码的问题，主要是因为还没有找到什么好的办法去自动删除1.js，2.js，3.js的3个引用，而插入一个新的all.js的引用，如果那位同学对解决这个问题有好的想法，请不吝赐教。如果有同学想使用这个组件，建议在测试环境下运行一次后，把修改后的程序直接上传到正式服务器上，然后去掉这个功能，不然在服务器上每次启动都调用这个功能还是需要花费一些时间和资源的其实一直想使用版本控制中的版本号来控制缓存，这个是最严谨的一个方法，但也因为做起来太复杂，所以一直也没做起来，以后以后有时间可以再研究。