相思资源网 Design By www.200059.com
存在的问题：
合并、压缩文件主要有2方面的问题：
1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩。
2. 因生产环境和开发环境需要加载的文件不一样，生产环境为了需要加载合并、压缩后的文件，而开发环境为了修改、调试方便，需要加载非合并、压缩的文件，所以我们常常需要在JSP中类似与下面的判断代码：
复制代码 代码如下:
<c:if test="${env=='prod'}">
<script type="text/javascript" src="/UploadFiles/2021-04-02/all.js"></c:if>
<c:if test="${env=='dev'}">
<script type="text/javascript" src="/UploadFiles/2021-04-02/1.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/2.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/3.js"></c:if>
缓存问题：在现在JS满天飞的时代，大家都知道缓存能带来的巨大好处，但缓存确实非常麻烦的一个问题，相信很多人曾经历过下面的情况：为了让程序更快，在服务器上为JS加上缓冲5天的代码，但产品更新后第二天就接到电话说系统出错，详细了解后就发现是缓存引起的，让用户删除缓存后就会OK。原因很简单，就是你JS已经修改了，但用户还在使用缓存中的老JS。在经历几次这种情况，被领导数落了几次后。没办法只能把JS的缓冲去掉，或者改成8个小时。可这样就完全失去了缓存的优势了，哪我们到底需要解决哪些问题才能让我们使用缓冲顺心如意了？
1. 如何在修改了某个JS后，自动把所有引用该JS页面的代码中加上1个版本号？
2. 该如何生成版本号，根据什么来产生这个版本号。
可能有人为了解决上面的缓存问题，写了个JSP标签，通过标签读取JS、css文件的修改时间来作为版本号，从而来解决上面2个问题。但这种方法有下面几个缺点：
1. 每次请求都要通过标签读取读取文件的修改时间，速度慢。当然你可以把文件的修改时间放到缓存中，这样也会加到了内存使用量。
2. 在HTML静态页面中用不了
3. 如果你们公司是如下的部署发布方式(我们公司就是这样)，则会失效。每次发布，不是直接覆盖之前的WEB目录，运维的为的发布方便，要求每次发布直接给他们1个war包，他们会把之前WEB目录整个删除，然后上传现在的war包，这样就导致程序运行后，所有文件的最后修改时间都是解压war的时间。
分享自己项目中的处理方案：
为了解决上面讨论过的问题，在下写了1个如下的组件，组件中根据我们自己的实际情况使用了文件大小来做为文件的版本号，虽然在文件修改很小(比如把字符a改成b)，可能文件大小并没有变，导致版本号也不会变。
但这种机率还是非常低的。当然如果你觉的使用文件修改时间作为版本号适合你，只需要修改一行代码就行，下面看下这个组件的处理流程(本来想用流程图表达，最后还是觉的文字来的直白写)：
1. 程序启动(contextInitialized)
2. 搜索程序目录下的所有merge.txt文件，根据merge.txt文件的配置合并文件, merge.txt文件实例如下：
# 文件合并配置文件,多个文件以|隔开，以/开头的表示从根目录开始,
# 空格之后的文件名表示合并之后的文件名
# 把1,2,3合并到all文件中
1.js|2.js|3.js all.js
#合并CSS
/css/mian.css|/css/common.css all.css
3. 搜索程序目录下所有JS，CSS文件(包括合并后的)，每个文件都压缩后生成对应的1个新文件。
4. 搜索程序目录下所有JSP,html文件，把所有JS,css的引用代码改成压缩后并加了版本号的引用。
实例：
实例的文件结构如下图：
看JSP原始代码(程序运行前)：
复制代码 代码如下:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% boolean isDev = false; // 是否开发环境%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<% if(isDev){ %>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/1.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/2.js"><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1.css" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2.css" />
<% }else{ %>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/all.js"><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all.css" />
<% } %>
</head>
<body>
<h1 class="c1">Hello World!</h1>
</body>
</html>
程序运行后JSP的代码：
复制代码 代码如下:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
boolean isDev = false; // 是否开发环境
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<% if(isDev){ %>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2-3gmin.js?99375"><script type="text/javascript" src="/UploadFiles/2021-04-02/1-3gmin.js?90"><script type="text/javascript" src="/UploadFiles/2021-04-02/2-3gmin.js?91"><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1-3gmin.css?35" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2-3gmin.css?18" />
<% }else{ %>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2-3gmin.js?99375"><script type="text/javascript" src="/UploadFiles/2021-04-02/all-3gmin.js?180"><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all-3gmin.css?53" />
<% } %>
</head>
<body>
<h1 class="c1">Hello World!</h1>
</body>
</html>
加3gmin后缀的文件全部是程序启动时自动生成的。
实例下载：猛击此处下载
PS：自己的设计的处理方案并没有解决"需要JSP中加判断代码的问题"，主要是因为还没有找到什么好的办法去自动删除1.js,2.js,3.js的3个引用，而插入1个新的all.js的引用，如果那位同学对解决这个问题有好的想法，请不吝赐教。
如果有同学想使用这个组件，建议在测试环境下运行一次后，把修改后的程序直接上传到正式服务器上，然后去掉这个功能，不然在服务器上每次启动都调用这个功能还是需要花费一些时间和资源的
其实一直想使用SVN中的版本号来控制缓存，这个是最严谨的一个方法，但也因为做起来太复杂，所以一直也没做起来，以后以后有时间可以再研究。
合并、压缩文件主要有2方面的问题：
1. 每次发布的时候需要运行一下自己写的bat文件或者其他程序把文件按照自己的配置合并和压缩。
2. 因生产环境和开发环境需要加载的文件不一样，生产环境为了需要加载合并、压缩后的文件，而开发环境为了修改、调试方便，需要加载非合并、压缩的文件，所以我们常常需要在JSP中类似与下面的判断代码：
复制代码 代码如下:
<c:if test="${env=='prod'}">
<script type="text/javascript" src="/UploadFiles/2021-04-02/all.js"></c:if>
<c:if test="${env=='dev'}">
<script type="text/javascript" src="/UploadFiles/2021-04-02/1.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/2.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/3.js"></c:if>
缓存问题：在现在JS满天飞的时代，大家都知道缓存能带来的巨大好处，但缓存确实非常麻烦的一个问题，相信很多人曾经历过下面的情况：为了让程序更快，在服务器上为JS加上缓冲5天的代码，但产品更新后第二天就接到电话说系统出错，详细了解后就发现是缓存引起的，让用户删除缓存后就会OK。原因很简单，就是你JS已经修改了，但用户还在使用缓存中的老JS。在经历几次这种情况，被领导数落了几次后。没办法只能把JS的缓冲去掉，或者改成8个小时。可这样就完全失去了缓存的优势了，哪我们到底需要解决哪些问题才能让我们使用缓冲顺心如意了？
1. 如何在修改了某个JS后，自动把所有引用该JS页面的代码中加上1个版本号？
2. 该如何生成版本号，根据什么来产生这个版本号。
可能有人为了解决上面的缓存问题，写了个JSP标签，通过标签读取JS、css文件的修改时间来作为版本号，从而来解决上面2个问题。但这种方法有下面几个缺点：
1. 每次请求都要通过标签读取读取文件的修改时间，速度慢。当然你可以把文件的修改时间放到缓存中，这样也会加到了内存使用量。
2. 在HTML静态页面中用不了
3. 如果你们公司是如下的部署发布方式(我们公司就是这样)，则会失效。每次发布，不是直接覆盖之前的WEB目录，运维的为的发布方便，要求每次发布直接给他们1个war包，他们会把之前WEB目录整个删除，然后上传现在的war包，这样就导致程序运行后，所有文件的最后修改时间都是解压war的时间。
分享自己项目中的处理方案：
为了解决上面讨论过的问题，在下写了1个如下的组件，组件中根据我们自己的实际情况使用了文件大小来做为文件的版本号，虽然在文件修改很小(比如把字符a改成b)，可能文件大小并没有变，导致版本号也不会变。
但这种机率还是非常低的。当然如果你觉的使用文件修改时间作为版本号适合你，只需要修改一行代码就行，下面看下这个组件的处理流程(本来想用流程图表达，最后还是觉的文字来的直白写)：
1. 程序启动(contextInitialized)
2. 搜索程序目录下的所有merge.txt文件，根据merge.txt文件的配置合并文件, merge.txt文件实例如下：
# 文件合并配置文件,多个文件以|隔开，以/开头的表示从根目录开始,
# 空格之后的文件名表示合并之后的文件名
# 把1,2,3合并到all文件中
1.js|2.js|3.js all.js
#合并CSS
/css/mian.css|/css/common.css all.css
3. 搜索程序目录下所有JS，CSS文件(包括合并后的)，每个文件都压缩后生成对应的1个新文件。
4. 搜索程序目录下所有JSP,html文件，把所有JS,css的引用代码改成压缩后并加了版本号的引用。
实例：
实例的文件结构如下图：
看JSP原始代码(程序运行前)：
复制代码 代码如下:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% boolean isDev = false; // 是否开发环境%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<% if(isDev){ %>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/1.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/2.js"><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1.css" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2.css" />
<% }else{ %>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/all.js"><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all.css" />
<% } %>
</head>
<body>
<h1 class="c1">Hello World!</h1>
</body>
</html>
程序运行后JSP的代码：
复制代码 代码如下:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
boolean isDev = false; // 是否开发环境
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<% if(isDev){ %>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2-3gmin.js?99375"><script type="text/javascript" src="/UploadFiles/2021-04-02/1-3gmin.js?90"><script type="text/javascript" src="/UploadFiles/2021-04-02/2-3gmin.js?91"><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1-3gmin.css?35" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2-3gmin.css?18" />
<% }else{ %>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2-3gmin.js?99375"><script type="text/javascript" src="/UploadFiles/2021-04-02/all-3gmin.js?180"><link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all-3gmin.css?53" />
<% } %>
</head>
<body>
<h1 class="c1">Hello World!</h1>
</body>
</html>
加3gmin后缀的文件全部是程序启动时自动生成的。
实例下载：猛击此处下载
PS：自己的设计的处理方案并没有解决"需要JSP中加判断代码的问题"，主要是因为还没有找到什么好的办法去自动删除1.js,2.js,3.js的3个引用，而插入1个新的all.js的引用，如果那位同学对解决这个问题有好的想法，请不吝赐教。
如果有同学想使用这个组件，建议在测试环境下运行一次后，把修改后的程序直接上传到正式服务器上，然后去掉这个功能，不然在服务器上每次启动都调用这个功能还是需要花费一些时间和资源的
其实一直想使用SVN中的版本号来控制缓存，这个是最严谨的一个方法，但也因为做起来太复杂，所以一直也没做起来，以后以后有时间可以再研究。
标签：
JS,CSS,合并,压缩
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无高性能WEB开发 JS、CSS的合并、压缩、缓存管理的评论...
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/11/5
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？