前端js和css的压缩合并之wro4j_html/css_WEB-ITnose
me:注：
找了一圈，在java社区和node社区，就没有找到中意的解决方案，总是带有各种各样的毛病。
看来ror社区还是拥有最强悍的设计和构架能力的，也许得益于ruby的精神。
最牛牛的人有时候只要一两个就够了。
下面的文还是不错的，可惜wro4j的愚笨复杂设计啊。
from: 使用wro4j和maven在编译期间压缩js和css文件
最近在对一个web系统做性能优化.
而对用到的静态资源文件的压缩整合则是前端性能优化中很重要的一环.
好处不仅在于能够减小请求的文件体积,而且能够减少浏览器的http请求数.
因为是基于java的web系统,并且使用的是nginx+tomcat做为服务器.
最后考虑用wro4j和maven plugin在编译期间压缩静态资源.
优化前:
基本上所有的jsp都引用了这一大坨静态文件:
<link rel="stylesheet" type="text/css" href="${ctxPath}/css/skin.css"/> <link rel="stylesheet" type="text/css" href="${ctxPath}/css/jquery-ui-1.8.23.custom.css"/> <link rel="stylesheet" type="text/css" href="${ctxPath}/css/validationEngine.jquery.css"/> <script type="text/javascript">var GV = {ctxPath: '${ctxPath}',imgPath: '${ctxPath}/css'};</script> <script type="text/javascript" src="${ctxPath}/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="${ctxPath}/js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="${ctxPath}/js/jquery.validationEngine.js"></script> <script type="text/javascript" src="${ctxPath}/js/jquery.validationEngine-zh_CN.js"></script> <script type="text/javascript" src="${ctxPath}/js/jquery.fixedtableheader.min.js"></script> <script type="text/javascript" src="${ctxPath}/js/roll.js"></script> <script type="text/javascript" src="${ctxPath}/js/jquery.pagination.js"></script> <script type="text/javascript" src="${ctxPath}/js/jquery.rooFixed.js"></script> <script type="text/javascript" src="${ctxPath}/js/jquery.ui.datepicker-zh-CN.js"></script> <script type="text/javascript" src="${ctxPath}/js/json2.js"></script> <script type="text/javascript" src="${ctxPath}/js/common.js"></script>
引用的文件很多,并且文件体积没有压缩,导致页面请求的时间非常长.
另外还有一个问题,就是为了能够充分利用浏览器的缓存,静态资源的文件名称最好能够做到版本化控制.
这样前端web服务器就可以放心大胆的开启缓存功能而不用担心缓存过期问题,因为如果一旦静态资源文件有修改的话,
会重新生成一个文件名称.
下面我根据自己项目的经验,来介绍下如何较好的解决这两个问题.
分两步进行.
第一步:引入wro4j,在编译时期将上述分散的多个文件整合成少数几个文件,并且将文件最小化.
第二步:在生成的静态资源文件的文件名称上加入时间信息
这是两步优化之后的引用情况:
${platform:cssFile("/wro/basic") } <script type="text/javascript">var GV = {ctxPath: '${ctxPath}',imgPath: '${ctxPath}/css'};</script> ${platform:jsFile("/wro/basic") } ${platform:jsFile("/wro/custom") }
只引用了1个css文件,2个js文件.http请求从10几个减少到3个,并且整体文件体积缩小了近一半.
下面介绍优化流程.
第一步：合并并且最小化文件.
1.添加wro4j的maven依赖
<wro4j.version>1.6.2</wro4j.version> ... <dependency> <groupId>ro.isdc.wro4j</groupId> <artifactId>wro4j-core</artifactId> <version>${wro4j.version}</version> <exclusions> <exclusion> <!-- 因为项目中的其他jar包已经引入了不同版本的slf4j,所以这里避免jar重叠所以不引入 --> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> </exclusion> </exclusions> </dependency> 2.添加wro4j maven plugin
<plugin> <groupId>ro.isdc.wro4j</groupId> <artifactId>wro4j-maven-plugin</artifactId> <version>${wro4j.version}</version> <executions> <execution> <phase>compile</phase> <goals> <goal>run</goal> </goals> </execution> </executions> <configuration> <targetGroups>basic,custom</targetGroups> <!-- 这个配置是告诉wro4j在打包静态资源的时候是否需要最小化文件,开发的时候可以设成false,方便调试 --> <minimize>true</minimize> <destinationFolder>${basedir}/src/main/webapp/wro/</destinationFolder> <contextFolder>${basedir}/src/main/webapp/</contextFolder> <!-- 这个配置是第二步优化需要用到的,暂时忽略 --> <wroManagerFactory>com.rootrip.platform.common.web.wro.CustomWroManagerFactory</wroManagerFactory> </configuration> </plugin>
如果开发环境是eclipse的话,可以下载m2e-wro4j这个插件.
下载地址:http://download.jboss.org/jbosstools/updates/m2e-wro4j/
这个插件的主要功能是能够帮助我们在开发环境下修改对应的静态文件,或者pom.xml文件的时候能够自动生成打包好的js和css文件.
对开发来说就会方便很多.只要修改源文件就能看见修改后的结果.
3.在WEB-INF目录下添加wro.xml文件,这个文件的作用就是告诉wro4j需要以怎样的策略打包jss和css文件.
<?xml version="1.0" encoding="UTF-8"?> <groups xmlns="http://www.isdc.ro/wro" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.isdc.ro/wro wro.xsd"> <group name="basic"> <css>/css/basic.css</css> <css>/css/skin.css</css> <css>/css/jquery-ui-1.8.23.custom.css</css> <css>/css/validationEngine.jquery.css</css> <js>/js/jquery-1.7.2.min.js</js> <js>/js/jquery-ui-1.8.23.custom.min.js</js> <js>/js/jquery.validationEngine.js</js> <js>/js/jquery.fixedtableheader.min.js</js> <js>/js/roll.js</js> <js>/js/jquery.pagination.js</js> <js>/js/jquery.rooFixed.js</js> <js>/js/jquery.ui.datepicker-zh-CN.js</js> <js>/js/json2.js</js> </group> <group name="custom"> <js>/js/jquery.validationEngine-zh_CN.js</js> <js>/js/common.js</js> </group> </groups>
官方文档：http://code.google.com/p/wro4j/wiki/WroFileFormat
其实这个配置文件很好理解,如果不愿看官方文档的朋友我在这简单介绍下.
上面这样配置的目的就是告诉wro4j要将
这四个文件整合到一起,生成一个叫basic.css的文件到指定目录(wro4j-maven-plugin里配置的),将
这几个文件整合到一起,生成一个叫basic.js的文件到指定目录.
最后将
这两个文件整合到一起,,生成一个叫custom.js的文件到指定目录.
第一步搞定,这时候如果你的开发环境是eclipse并且安装了插件的话,应该就能在你工程的%your webapp%/wor/目录下看见生成好的
basic.css,basic.js和custom.js这三个文件了.
然后你再将你的静态资源引用路径改成
<link rel="stylesheet" type="text/css" href="${ctxPath}/wro/basic.css"/> <script type="text/javascript" src="${ctxPath}/wro/basic.js"></script> <script type="text/javascript" src="${ctxPath}/wro/custom.js"></script>
就ok了.每次修改被引用到的css或js文件的时候,这些文件都将重新生成.
如果开发环境是eclipse但是没有安装m2e-wro4j插件的话,pom.xml可能需要额外配置.
请参考: https://community.jboss.org/en/tools/blog/2012/01/17/css-and-js-minification-using-eclipse-maven-and-wro4j
第二步：给生成的文件名称中加入时间信息并通过el自定义函数引用脚本文件.
1. 创建DailyNamingStrategy类
public class DailyNamingStrategy extends TimestampNamingStrategy { protected final Logger log = LoggerFactory.getLogger(DailyNamingStrategy.class); @Override protected long getTimestamp() { String dateStr = DateUtil.formatDate(new Date(), "yyyyMMddHH"); return Long.valueOf(dateStr); } } 2.创建CustomWroManagerFactory类
//这个类就是在wro4j-maven-plugin里配置的wroManagerFactory参数 public class CustomWroManagerFactory extends DefaultStandaloneContextAwareManagerFactory { public CustomWroManagerFactory() { setNamingStrategy(new DailyNamingStrategy()); } }
上面这两个类的作用是使用wro4j提供的文件命名策略,这样生成的文件名就会带上时间信息了.
例如：basic-2013020217.js
但是现在又会发现一个问题:如果静态资源文件名称不固定的话,那怎么样引用呢?
这时候就需要通过动态生成
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
HTML est-il facile à apprendre pour les débutants?
Apr 07, 2025 am 12:11 AM
HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Quel est un exemple d'une balise de départ dans HTML?
Apr 06, 2025 am 12:04 AM
Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?
Apr 04, 2025 pm 11:30 PM
L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
HTML, CSS et JavaScript: outils essentiels pour les développeurs Web
Apr 09, 2025 am 12:12 AM
HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué?
Apr 05, 2025 am 06:15 AM
Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...
