wro4jでリソースをminifyし、Jettyでレスポンスをgzip化して通信する。日記その他wro4jでリソースをminifyし、Jettyでレスポンスをgzip化して通信する。Java2014.04.01スマホ向けのブラウザサービスは、モバイル回線で画像などのリソースを大量にやりとりするので、通信のもたつきを感じることが多いです。ある時、さすがに読み込みが遅いと感じて、JavaScriptとCSSのリソースの容量を確認したら、11ファイルで742KBになっていました。そこで、JavaScriptとCSSを圧縮することにしました。目次wro4jで全てのファイルをminifyする。Jettyの設定でレスポンスをgzip化する。事前にgzipファイルを用意しておく必要がある結果、79%も削減できた。wro4jで全てのファイルをminifyする。minifyと呼ばれることをしました。minifyとは、JavaScriptやCSSの動作に影響を与えない範囲で、不要なコメント文や空白文字を除去したり、変数名の文字数を減らしたりする処理です。Javaには、wro4jと呼ばれるリソース圧縮ツールがあるので、これを使いました。Hostingwro4jは、Mavenプラグインとして導入し、ビルド時にリソースの圧縮をかけられるようにしました。ro.isdc.wro4jwro4j-maven-plugin1.7.0true${project.basedir}/src/main/webapp/css/${project.basedir}/src/main/webapp/js/${project.basedir}/src/main/webapp/${project.basedir}/src/main/webapp/WEB-INF/wro.xmlro.isdc.wro.extensions.manager.standalone.GoogleStandaloneManagerFactorycompilerunJavaScriptとCSSは、wro4jによって複数ファイルの結合とminifyをすることが可能です。どのファイルを圧縮するかの設定は、wro.xmlという設定ファイルに、たとえば次のように書きます。/js/templates.js/js/app.jsこれだけでJavaScriptなどは、20〜30%くらいは容量を削減することができます。Jettyの設定でレスポンスをgzip化する。CSSは、minifyの効果があまり大きくありません。類似のスタイルをまとめる構文がないので、必然的に反復記述を減らせないためです。そこで更に、HTTPの通信の際に、レスポンスボディを丸ごとgzipで圧縮します。サーブレットコンテナにJettyを使っている場合の例です。し、gzipパラメータをtrueにすることでgzip転送を利用できるようになります。gzipServletorg.eclipse.jetty.servlet.DefaultServletgziptruegzipServlet/js/*/css/*意外と単純です。事前にgzipファイルを用意しておく必要があるこのJettyのサーブレットによる、gzip転送は、HTTPのリクエストをされるごとにgzip圧縮をするわけではありません。そのため事前に、非圧縮のファイルとgzip圧縮されたファイルを用意しておく必要があります。./js/app.jsmain.jsmain.js.gztemplates.jsこんな風に、main.jsと並列にmain.js.gzを配置しておくことで、gzipされたファイルをレスポンスしてくれます。ちなみに、両方置いておく必要がある理由は単純です。gzip圧縮による通信に対応していないブラウザが存在するためです。HTTP通信の際には、gzip圧縮による通信ができるかをリクエストヘッダに添えるので、これを見て、main.js.gzを返すのか、main.jsを返すのかを判断します。deflate...gzip圧縮されたファイルが用意されていない場合は、ヘッダに関わらず非圧縮のファイルが返されます。結果、79%も削減できた。minifyとgzip圧縮によって、容量を742KBから159KBに79%も削減することができました!モバイルの低速回線だとかなりの体感の差になると思います。コピーkatty0324三度の飯とエレクトロン広告業界と無関係な僕がさっぱり理解できないアドテク用語を調べた。関連記事Objective-CSocketRocketでiPhoneからWebSocket通信をする。続きまして、WebSocketネタです。WebSocketでリアルタイムな何かを作るにあたって、ブラウザベースで作ってもいいのですが、まずはiPhoneで作ってみることにしました。問題をちゃんと解決するために必須の手順、4ステップ。「大変です!」から始まる、緊急の問題解決の手順について。(WEB系以外に適用できるかどうかは分かりません。WEBサービスは、動かしながら修正することが多い都合で、時折思ってもいなかった問題が発生することがありますが、そういう時に落ち着...Objective-C複数人参加のリアルタイム通信アプリを作る。(クライアント編)「WebSocketってなんだ?」「SocketRocketでiPhoneからWebSocket通信をする。」「Node.jsでWebSocketサーバを立てる」で要素技術は学んだので、さっそくリアルタイム通信なおもちゃの作成に挑みました。...JettyJettyでセッションCookieにsecure属性を設定する。HTTPSを用いたサイトを構築する場合、Cookieにsecure属性をつける必要が出てくる場合があります。Jettyで設定のメモです。昨日、snappyという圧縮アルゴリズムについて書きました。今日は、snappyとgzipとの比較について書きます。Pushの計測データを模倣したラ...Cactiリソース監視、MuninかCactiか。CloudWatchでリソース監視していましたが、より詳細にリソース監視をしようと思いました。簡単にいうと以下の様な目的です。障害が発生する前に、問題になりそうな部分を...Node.js複数人参加のリアルタイム通信アプリを作る。(サーバ編)「複数人参加のリアルタイム通信アプリを作る。(クライアント編)」で先にクライアントサイドだけ紹介しましたが、最後にサーバサイドの実装を紹介します。今までは「wro4jでリソースをminifyし、Jettyでレスポンスをgzip化して通信する。」に書いたように、Mavenにフロントエンドの処理もさせていました。[...]ホームWEB開発プログラミング言語Javakatty0324経営半分、エンジニアリング半分でやってます。ECSのサービスを複数のロードバランサに追加する2022.01.10Railsプロジェクトにfactory_botの導入2021.12.26ビジネス文書は、読まないで済むほうがいい2021.09.26人気記事mkdirでディレクトリが存在しない時だけディレクトリを作成する。InnoDBの行ロックとテーブルロックの挙動2013.07.122021.02.18Tomcatのログをローテートさせて一定期間で削除する。2014.07.042021.03.07Linuxで共有ライブラリsoを作ったり使ったりする方法。2013.10.242021.02.11UUIDはなぜ、分散環境で好き勝手に生成しても衝突しないのか。RFC4122規格とUUIDの性質。2014.03.282021.02.188年乗ったクロスバイクのボロボロになったパーツをまとめて交換した。2016.11.282021.03.07PHPでnullとfalseと空文字と0は同じ?2011.03.262021.03.07階層化されたデータをHTTPのGETリクエストのパラメータに含める方法。2013.07.27IP制限されているWEBサイトをSSH経由でブラウザに表示する。2014.03.142021.02.11自作ツールテキスト一括変換ツールブラウザ上でリアルタイムにテキストの変換ができるツールです。日記その他ホーム検索トップサイドバーkatty0324経営半分、エンジニアリング半分でやってます。ECSのサービスを複数のロードバランサに追加する2022.01.10Railsプロジェクトにfactory_botの導入2021.12.26ビジネス文書は、読まないで済むほうがいい2021.09.26人気記事mkdirでディレクトリが存在しない時だけディレクトリを作成する。InnoDBの行ロックとテーブルロックの挙動2013.07.122021.02.18Tomcatのログをローテートさせて一定期間で削除する。2014.07.042021.03.07Linuxで共有ライブラリsoを作ったり使ったりする方法。2013.10.242021.02.11UUIDはなぜ、分散環境で好き勝手に生成しても衝突しないのか。RFC4122規格とUUIDの性質。2014.03.282021.02.188年乗ったクロスバイクのボロボロになったパーツをまとめて交換した。2016.11.282021.03.07PHPでnullとfalseと空文字と0は同じ?2011.03.262021.03.07階層化されたデータをHTTPのGETリクエストのパラメータに含める方法。2013.07.27IP制限されているWEBサイトをSSH経由でブラウザに表示する。2014.03.142021.02.11自作ツールテキスト一括変換ツールブラウザ上でリアルタイムにテキストの変換ができるツールです。Handlebars.js2タイトルとURLをコピーしました。