フロントエンドjsとcssの圧縮とマージ wro4j_html/css_WEB-ITnose
私: 注:
調べてみても、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>
公式ドキュメント: http:/ /code.google.com/p/wro4j /wiki/WroFileFormat
実際、この設定ファイルは、公式ドキュメントを読みたくない場合に簡単に理解できるものです。
上記の設定の目的は、wro4j に
<?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>
これら 4 つのファイルを統合して、basic.css というファイルを指定したディレクトリ (wro4j-maven-plugin で構成) に生成し、
を追加します
これらのファイルをすべて統合し、指定したディレクトリに Basic.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衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7333
9
1627
14
1351
46
1262
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
