フロントエンドjsとcssの圧縮とマージ wro4j_html/css_WEB-ITnose-htmlチュートリアル-php.cn

から: wro4j と maven を使用して、コンパイル中に js および css ファイルを圧縮します

ホームページ

ウェブフロントエンド

htmlチュートリアル

フロントエンドjsとcssの圧縮とマージ wro4j_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:52 AM

私: 注:

調べてみても、Java コミュニティーやノードコミュニティーで満足のいく解決策が見つからず、常にさまざまな問題がありました。

おそらく Ruby の精神のおかげで、ror コミュニティは依然として最も強力な設計およびアーキテクチャ能力を備えているようです。

最も素晴らしい人が 1 人か 2 人だけで十分な場合もあります。

次の記事はまだ良いですが、wro4j の設計が愚かで複雑なのが残念です。

から: wro4j と maven を使用して、コンパイル中に js および css ファイルを圧縮します

最近、Web システムでパフォーマンスの最適化を行っています

そして、圧縮と統合について。

静的リソースファイルの削減は、フロントエンドのパフォーマンスの最適化において非常に重要な部分です。

その利点は、リクエストされたファイルのサイズを削減できるだけでなく、ブラウザによる http リクエストの数も削減できることです。 .

これは Java ベースの Web システムであり、サーバーとして nginx+tomcat を使用するためです。

最後に、コンパイル中に静的リソースを圧縮するために wro4j と Maven プラグインを使用することを検討してください。 🎜>最適化前:

基本的にすべての 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>

ログイン後にコピー

参照されるファイルが多数あり、ファイルサイズは圧縮されていません。

もう 1 つの問題は、ブラウザのキャッシュを最大限に活用するには、静的リソースのファイル名にバージョン管理を実装するのが最善であるということです。

このようにして、フロントエンド Web サーバーは、静的リソースファイルが変更されると、

によってファイル名が再生成されるため、キャッシュの有効期限を気にすることなく、安全にキャッシュ機能を有効にすることができます。 >

以下では、私自身のプロジェクトに基づいて、これら 2 つの問題をより適切に解決する方法を紹介します。

最初のステップ: 導入します。 wro4j を実行し、コンパイル中に散在する上記の複数のファイルをいくつかのファイルに統合し、ファイルを最小化します。

ステップ 2: 生成された静的リソースファイルのファイル名に時刻情報を追加します。

これは、 2 段階の最適化後の参照状況:

1 つの css ファイルと 2 つの js ファイルのみが参照され、全体のファイルサイズが 10 から 3 に減少します。

${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. wro4j の Maven 依存関係を追加します。 🎜>

2. wro4j maven プラグインを追加します

開発環境が Eclipse の場合は、m2e-wro4j プラグインをダウンロードできます

ダウンロードアドレス: http://download.jboss .org/jbosstools/updates/m2e-wro4j/

<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>

ログイン後にコピー

このプラグインの主な機能は、開発環境で対応する静的ファイルを変更するのに役立つことです。 pom.xml ファイルと css ファイルを作成するときに、パッケージ化された js が自動的に生成されます。

   <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>

ログイン後にコピー

ソースファイルを変更するだけで、変更された結果が表示されます。 WEB-INF ディレクトリ内の wro.xml ファイル。このファイルの目的は、wro4j に jss および css ファイルをパッケージ化する方法を指示することです。

公式ドキュメント: http:/ /code.google.com/p/wro4j /wiki/WroFileFormat

実際、この設定ファイルは、公式ドキュメントを読みたくない場合に簡単に理解できるものです。

上記の設定の目的は、wro4j に

/css/basic.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>

ログイン後にコピー

/css を使用するように指示することです。 /skin.css

/ css/jquery-ui-1.8.23.custom.css

.jquery.css

これら 4 つのファイルを統合して、basic.css というファイルを指定したディレクトリ (wro4j-maven-plugin で構成) に生成し、

を追加します/js/jquery-1.7.2.min.js

/js/jquery-ui-1.8.23.custom.min.js

/js/jquery.validationEngine.js

/js/jquery.fixedtableheader.min.js 🎜>/js/roll.js

/js/jquery.pagination.js

/jquery.rooFixed.js

/json2.js

これらのファイルをすべて統合し、指定したディレクトリに Basic.js というファイルを生成します。

/js/common.js

これら 2 つのファイルは、指定されたディレクトリにある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

但是现在又会发现一个问题:如果静态资源文件名称不固定的话,那怎么样引用呢?

这时候就需要通过动态生成

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7717

Java チュートリアル

1641

CakePHP チュートリアル

1396

Laravel チュートリアル

1289

PHP チュートリアル

1233

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。