Javascript圧縮パック

多くのWeb開発者は、遅かれ早かれ、サイトの読み込みを高速化することについて疑問を持っています。 これは、すべてのユーザーがメガビットチャネルを持っているわけではなく、一部のユーザーがまだダイヤルアップを使用しているためです。 この記事では、本番用にJavaScriptを圧縮し、それらを1つのファイルに結合する方法と、さらに改善する方法について説明します。 swfobject.js、jquery-1.3.2.js、jquery.media.js、jquery.markitup.js、jquery.markitup.set.js、application.jsという一連のスクリプトがあるとします。 サイズは約150 KBで、パッカーはそれらを50 KBに圧縮します。



以前はasset_packagerを使用していましたが、その機能は控えめで、javascriptおよびcssファイルのコメント、余分なスペース、改行を削除するだけです。 したがって、私は別の方法を探し始めました。 私のソリューションを提供します。





packr gemをインストールする


config / environment.rbファイルに行を追加します

設定 gem 'packr' ,: lib => false


そしてsudo rake gemsを実行します:インストール



スクリプトファイルのリストを作成する


通常のファイルyamの内容を持つconfig / js_files.ymlを作成しましょう:



ベース:

-swfobject。 js

-jquery - 1.3.2。 js

-jquery。 メディア js

-jquery。 マークアップjs

-jquery。 マークアップ設定します。 js

-アプリケーション。 js




ファイルの初期化


ファイルのリストを取得するには、ファイル初期化子/ javascript_files.rbを作成します



JAVASCRIPT_FILES = YAML :: load File。Read "#{RAILS_ROOT} /config/js_files.yml" symbolize_keys



RAILS_ENV == "production"の場合

JAVASCRIPT_FILES_PACKED = Proc新しい { prod_files = { } ; JAVASCRIPT_FILES。 { | キー、値| prod_files [ key ] = value。 マップ { | v | "packed /" + v } } ; prod_files } 電話する

ActionView ::ヘルパー:: AssetTagHelper register_javascript_expansion JAVASCRIPT_FILES_PACKED

他に

ActionView ::ヘルパー:: AssetTagHelper register_javascript_expansion JAVASCRIPT_FILES

終わり




このコードは、本番環境のjavascriptのパスが「パックされた」サブフォルダーに変更されることを示しています。

ActionView ::ヘルパー:: AssetTagHelper register_javascript_expansion JAVASCRIPT_FILES
-js_files.ymlで指定されたキーを持つjavascript_include_tagヘルパーの複数のファイルを接続できます。



Javascriptをテンプレートに追加する


javascript_include_tag :base 、: cache => "base_packed"




:キャッシュ、config.action_controller.perform_caching = trueが設定されている場合、base_packed.jsファイルが1つ提供され、その内容はbaseにリストされているすべてのファイルになります。



パッケージングのタスク


ファイルlib / tasks / packr.rakeを作成します



「packr」が 必要



名前空間:packr do

タスク:パック する

files = YAML :: load File。read "#{RAILS_ROOT} /config/js_files.yml" [ "ベース" ]

ファイル。 それぞれ | ファイル|

「#{file}パッキング...」

ファイル open "#{RAILS_ROOT} / public / javascripts / Packed /#{file}"'wb' do | f |

f。 write Packr。pack File。read "#{RAILS_ROOT} / public / javascripts /#{file}" 、:shrink_vars => true 、: private => true 、:base62 => true

終わり

puts "packed \ n \ n "

終わり

終わり

終わり




このコードに関するほんの少しの言葉、ここでは「ベース」キーを持つファイルのみがパックされ、「javascripts / Packed」フォルダーに入れられます。記事の最後に戻ります。



これで、すべてのパッケージングの準備が整いました。 ただし、その前に「javascripts / packed」フォルダーを作成する必要があります。作成しないと、エラーが発生します。



パッカーを起動するには、rake packr:packコマンドを実行します。 パッケージ化されたファイルは、以前に作成されたjavascripts / packedファイルにあります。



さらなる改善



最初:


スクリプトでは、パックされたファイルのフォルダーが示され、各スクリプトで指定されます。 普遍性のために、定数に入れてください。



第二:


キーからのファイルはタスクのみにパックされます:ベース、ここでこのパラメーターを行から削除する必要があります
files = YAML :: load File。read "#{RAILS_ROOT} /config/js_files.yml" [ "ベース" ]
すべてのキーにパスを作成します。 必要に応じて、キーをパッケージ化する必要があるパラメーターを追加します。



第三:


javascriptソースファイルはまだ「public / javascripts」フォルダーにあります。たとえば、「lib / javascripts」に移動する必要があります。 生産では、それらはそこでは役に立たない。 開発では、単にlibからpublicへのリンクを作成できます。 本番環境では、「public / javascripts」でパックされたファイルをパックする必要があり、「packed」フォルダーは必要ありません。 同時に、initializers / javascript_files.rbスクリプトも簡素化されます。 ファイルを実稼働環境と開発環境に分ける必要はありません。



4番目:


サーバーを再起動する前に、ファイルをサーバーに圧縮する必要があります。 capistranoを使用する場合、たとえば次のようにできます。



タスク:before_symlink do

「mkdir -p#{release_path} / public / javascripts」を実行します

「rake packr:pack」を実行します

終わり




提案やコメントを歓迎します。

ご清聴ありがとうございました!



All Articles