私: 注:
調べてみても、Java コミュニティーやノードコミュニティーで満足のいく解決策が見つからず、常にさまざまな問題がありました。
おそらく Ruby の精神のおかげで、ror コミュニティは依然として最も強力な設計およびアーキテクチャ能力を備えているようです。
最も素晴らしい人が 1 人か 2 人だけで十分な場合もあります。
次の記事はまだ良いですが、wro4j の設計が愚かで複雑なのが残念です。
最近、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
但是现在又会发现一个问题:如果静态资源文件名称不固定的话,那怎么样引用呢?
这时候就需要通过动态生成
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
