JSをYUICOMPRESSORとCLOSURE-COMPILERで同時処理する必要はあるのか?

WordPressに限りませんが、ブログ・システムには多数のJavaScript_ファイル(以後JSとも称す)が存在しますが、これを一次圧縮を経て、二次圧縮させて置き換えてしまう記事となります。 今から10年前の、2015年に開発したMSバッチファイルと置き換える目的で、再度Windows10で動作中の新型MSバッチファイルを作成しなおしました。

MSバッチファイル名: auto2015.bat
WordPressの開発者にこそ試行願いたいと夢見て記事にしました。
その次のステップはPHPの静的部分の最適化ですね。。。

外部URLを参照するアイ・キャッチ静止画(英語版WordPress: featured image)参照元を見る。利用に感謝!

JSって動的データー?

WordPressに限りませんが、ブログ・システムには多数のJavaScriptファイルが存在しますが、これらの大半は完全なる静的データー群です。(動的JavaScriptはあります!後述します。) それもブラウザーに無用で無駄なデーターで一杯のファイルと言えます。 そんな無駄なデーターを訪問者の全ての通信に無駄なコストを浪費させています。 コストとは通信量を無駄に消耗すると言う金の浪費ですし、コストとは二度と戻らない貴重な時間とも言えます。 得をするのは電力供給企業と従量制モバイル通信を提供する電話会社だけ、電気の無駄遣いと通信パケット数の無駄遣い。 WordPressを使用してコンテンツを提供する側から言っても、訪問者が増えると簡単に通信環境が悪化することは、コンテンツを広く少しでも多くの人に発信したい気持ちに対して物理的なブレーキが働きます。 特に無料サーバーでは一日当たりの通信量の上限が低く設定されています! あなたのWordPressの配信が無残に打ち切られます!! つまり静的データーなら、贅肉を1ビットでも削除した一次圧縮を経て、ブラウザーが欲する7zipを利用した二次圧縮を行ったJavaScriptファイルに置き換えましょう!

回帰的考察

過去記事JSとCSSとHTACCESSを連動させ世界最高速を夢見よう!_」で紹介しましたが、今から10年前の2015年に作成したMSバッチファイルでは、複数のJavaScriptファイルを右クリックするだけで、YUICOMPRESSORを利用して一次圧縮を行って、gzip二次圧縮を行うと言う環境を手に入れました。 とうとうと使用し続けてきましたが、以下の問題を抱えていました。

  1. スタンドアローンに分類される自分が作成した特異なJavaScriptなら、YUICOMPRESSORでこそ十分でした!
    今から10年前の2015年に開発したMSバッチで処理する機能で十分でした。時としてYUICOMPRESSORがエラーを表示して、一次圧縮した目的のファイルを生成できないのは、完全に自分のミスですから、それは仕方が無いことで、スクリプト文法としての不完全さを訂正できれば、完璧な一次圧縮が達成される。
  2. ところで問題は、WordPressで提供されるJavaScriptで、YUICOMPRESSORがエラーを表示する場合が多分にある!
    YUICOMPRESSORによるエラー・レポートを開発元に提案してきましたが、一次圧縮した静的JavaScriptを完全には提供されていない。 ファイル名の最後が .min.jp であったり、 JavaScript名そのものが一時圧縮済みのデーターだったり、 しかし大半は、一時圧縮されていないファイルの提供で終わっており、無駄なデーターで膨れ上がっている静的データーが放置されている。 開発者によって提供方法は統一されていないのかも知れません。 今から10年前の2015年に作成したMSバッチファイルでは、WordPress式のファイル名に、YUICOMPRESSORで一次圧縮を試みるが、YUICOMPRESSORがエラーを表示して未処理のままに放置するしかありませんでした。 2020年までの5年間の間、未処理のままに放置するしかありませんでした。

2020年版の仕様

解説の目的として、ここではJavaScriptファイル名を JS2020.js とします。
  1. 単体でも、32ファイルまでの一括指定でも、JavaScriptを右クリックで送る
  2. YUICOMPRESSORで一次圧縮を行う。
  3. YUICOMPRESSORでエラーとなった場合にエラー表示をファイルに保存する
    JS2020_YUIERROR.TXT.7z YUICOMPRESSORのバージョンを埋め込む。
  4. CLOSURE-COMPILER_のAdvanceモードを利用した一次圧縮を行う。
  5. CLOSURE-COMPILERでエラーとなった場合にエラー表示をファイルに保存する
    JS2020_GOOGLE_WARNING.7z 使用したCLOSURE-COMPILERのバージョンを埋め込む。
  6. CLOSURE-COMPILERでエラーとなった場合は、CLOSURE-COMPILERのデフォルトモードを利用した一次圧縮を行う。
  7. CLOSURE-COMPILERでエラーとなった場合にエラー表示をファイルに追記保存する
    JS2020_GOOGLE_WARNING.7z
  8. CLOSURE-COMPILERでエラーとなった場合は、CLOSURE-COMPILERのWHITESPACE_ONLYモードを利用した一次圧縮を行う。
  9. 一次圧縮ファイル生成に成功したなら7zipを利用してgzip二次圧縮を行う。
    一次圧縮ファイルの容量が大きく無ければ二次圧縮はしない。
  10. YUICOMPRESSORに成功し、CLOSURE-COMPILERで成功した場合は、圧縮ファイルのサイズも吟味して、容量の優秀なファイルセットを採用する。
    採用した方式をゼロサイズの告知用ファイルとして残す。
    • YUICOMPRESSORを採用した場合: JS2020-keepY.log
    • CLOSURE-COMPILERを採用した場合: JS2020-keepG.log
  11. 根源元のJavaScriptファイルが一次圧縮ファイルよりも小さい場合がある。
    この場合は、折角の一次圧縮したファイルを破棄し、根源元のJavaScriptファイルをコピーして採用する。 同時に二次圧縮を行うが、根源元のJavaScriptファイルの容量が大きく無ければ二次圧縮はしない。

2020年版の保存例

解説の目的として、ここではJavaScriptファイル名を JS2020.js とします。
  1. 両方の一次圧縮が成功した場合:
    1. YUICOMPRESSORの方が容量が小さかった場合:
      JS2020.js
      JS2020.min.js
      JS2020.min.js.gz
      JS2020-keepY.log
    2. CLOSURE-COMPILERの方が容量が小さかった場合:
      JS2020.js
      JS2020.min.js
      JS2020.min.js.gz
      JS2020-keepG.log
  2. YUICOMPRESSORの一次圧縮のみ成功した場合:
    JS2020.js
    JS2020.min.js
    JS2020.min.js.gz
    JS2020_GOOGLE_WARNING.7z
  3. CLOSURE-COMPILERの一次圧縮のみ成功した場合:
    JS2020.js
    JS2020.min.js
    JS2020.min.js.gz
    JS2020_GOOGLE_WARNING.7z
    JS2020_YUIERROR.TXT.7z
  4. 両者ともに一次圧縮が不能の場合:
    JS2020.js
    JS2020_GOOGLE_WARNING.7z
    JS2020_YUIERROR.TXT.7z
  5. 一次圧縮ファイルのサイズがオリジナルより大きい場合:
    JS2020.min.js  =  JS2020.js
    JS2020.min.js.gz
    JS2020-keepORG.log

各開発者に公開しようと計画中です。

MSバッチ・ソースの公開

auto2015.bat JavaScript Compression Process Ver:2.0 for Win 2020/03/24 ($1957832) · スニペット · Ujiki .oO / SENDto · GitLab_

稼働中の環境

MicroSoft Windows10 Professional (64) で使用しています。 CMD.EXEに対して特別な設定は何も行っておりません。 マウスを利用した右クリックで送る機能は、今から10年前の2015年当時より同じアプリを利用して実現させています。 是非、あなたが利用しているASCII版アプリを教えてください。 過去記事JSとCSSとHTACCESSを連動させ世界最高速を夢見よう!_」のJSとCSSファイルは右クリックで送る_」項で解説しています。

【レビュー】[コマンド ウィンドウをここで開く]よりちょっと便利な「コマンドプロンプトに送る」 - 窓の杜_
編集部にてWindows 10で動作を確認した。

一行起動書式

auto2015.bat "%F%" "C:Windowsjavajaryuicompressor-2.4.8.jar" type2
今から10年前の2015年当時は: C:Windowsjavajaryuicompressor-2.4.8.jar と起動時設定していましたが、2020版ではMSバッチ・ファイル内で定義しています。 CLOSURE-COMPILERもファイル内で定義しています。

右クリックで利用する方法などは、過去記事JSとCSSとHTACCESSを連動させ世界最高速を夢見よう!_」で詳細を解説しています。

JAVA JARファイルの入手

  1. MS-Windows10へのJAVAインストール
    過去記事JSとCSSとHTACCESSを連動させ世界最高速を夢見よう!_」のJAVA(無料)を入手する_」項で解説しています。
  2. YUICOMPRESSORのJAR入手
    過去記事JSとCSSとHTACCESSを連動させ世界最高速を夢見よう!_」のYUICOMPRESSOR(無料)を入手する_」項で解説しています。
  3. CLOSURE-COMPILERのJAR入手
    GitHub - google/closure-compiler: A JavaScript checker and optimizer._内の「Getting Started」にダウンロード・ハイパー・リンクがあります。 この記事を書いている際のバージョンは、GOOGLE Closure Compiler Version: v20200224 Built on: 2020-02-25 23:33

インストール調整チップ

  1. ログインユーザーによって異なるかも知れませんが、%PATH%を意識します。
    Windowsキー + R ファイル名を指定して実行で、 cmd Enterして、MSコンソールを起動して、 echo %PATH% Enterしましょう。
    auto2015.bat MSバッチファイルは%PATH%が通っているフォルダーに配置すれば便利です。 わたしは、%PATH%の先頭に現れるjavapathに保存しています。
  2. Windows機能である「システムの保護」に含めたいので、JARはWindowsシステム・フォルダーに新しいフォルダーを追加しています。
    フォルダーのセキュリティーを一時広げればフォルダーの作成も、ファイルのコピーも可能です。 \Windows\java\jar

type1 と type2 の選択肢

MSバッチファイルに渡すパラメーターで、type1 と type2 があります。 WordPress用は type2 です。以上の仕様は type2 です。 それでは、type1はと言えば、ファイル名に付加されるコードが違うのと、YUICOMPRESSORのみを扱います。 type1は、もともとの処理を踏襲します。 過去記事ミラーリングした記事における他記事への不自然では無いリンク処理について_」で異様な関数の利用を紹介しました。

この構文書式を多々埋め込んだJavaScriptをYUICOMPRESSORで長年、一次圧縮してきましたが、CLOSURE-COMPILERですと、すんなりと一次圧縮して警告を表示しません。 ところがグローバル変数名が扱えなくて実際には機能しません。 もちろん、過去の全てのJavaScriptをCLOSURE-COMPILER用に編集すれば良いのでしょうけど、YUICOMPRESSORでの一次圧縮で運用します。 これがType1の仕様です。 JavaScriptのevalを含めてローカル関数を勉強したい初心者の方には、迷わずYUICOMPRESSORを推奨します! YUICOMPRESSORは、あなたの優秀な秘書でいるでしょう! YUICOMPRESSORは、あなたの師匠となるでしょう!

プラグイン Merge + Minify + Refresh の不思議と選択肢

素敵なプラグインを紹介します。 Merge + Minify + Refresh です。 この記事の趣旨に近いプラグインです。 但し、一度導入すると抜け出すのは簡単ではありません。 是非、星1つの評価を与えた方々の発言を読んでから採用の可否を考えてください! ところで、わたしは Merge + Minify + Refresh を安易に導入した一人です。 wwwww

  1. わたしのWordPressの静的JavaScriptは全てを本記事で紹介しましたMSバッチスクリプトで一次圧縮と二次圧縮を行っています。
  2. Merge + Minify + Refresh の設定は右の画像の通りです。
    • Don't Merge CSS: NO , Don't Merge JS: NO
    • Disable CSS Minification: YES , Disable JS Minification: YES
    • Skip checking for @import in CSS: YES
    • Enable Preload Headers for CSS: YES
    • Enable Preload Headers for Javascript: YES
    • Enable Output Buffering: YES
    • Enable Gzip Encoding: YES
    不可思議でしょう?
  3. Don't Merge JS: YESにセットして、 Purge Allして、View Logで、全てのJavaScriptをORIGINAL FILE USED:にする。
    例えば、テーマ内のfunction.phpを編集し、global.min.jsに変更したり、 wp-includes/script-loader.php を編集して、ORIGINAL FILE USED:になるようにします。
  4. 全てが ORIGINAL FILE USED: に、なったなら、Don't Merge JS: NOにセットして、 Purge Allします。
  5. CSSについて、wp-includes/class-wp-theme.phpのstyle.cssは編集しないこと!
    編集してしまうと、テーマの更新通知が永久ループ的に表示され続けます!

以上を全てのWordPressクローンで行っています。 ここで、何とかして、 Merge + Minify + Refresh を機能させないWordPressを作成しました。 Merge + Minify + Refresh と、 Really Simple SSL 以外は他のWordPressと同じです。 そして、サーバーはs22cですので、s22cサーバーのWordPressと比較してみてください。 いつまで存続させるかは未定ですが・・・・・ wp.fs4y.com_ s22c_ どうでしょうか? 同じサーバーのWordPressですが、プラグイン: Merge + Minify + Refresh の導入の差を体感できるのではないでしょうか? この差を体感しても、あなたはプラグインの虜になりますか?

エラーを起こす犯人を捜せ!

緊急告知】 2020/04/29 記事WordPressで問題を起こしているプラグイン Merge + Minify + Refresh 削除手順と配布物のご案内_」で、新しい .htaccessを公開しました。 以下の .htaccessの設定は無用となります! 以下の記事はスルー願います!! わたしのWordPressの基幹フォルダー(以後ディレクトリーと称す)には以下の .htaccess があります。 .htaccessでオーバーライトしない限り、全てのファイルに影響します!
ところが、エラーを起こすディレクトリーがあります。 何故だと思いますか?! そこには単独犯が隠れているのです。 調べたおす必要を感じます。
  1. ディレクトリー: wp-admin
    管理者画面ですから応答が遅くても構わないと納得しています。残念ですが犯人捜しは後回しです。以下の wp-admin/.htaccess を設定しています。
  2. ディレクトリー: wp-includes
    素晴らしいWordPress! このディレクトリーは完璧です! と、言いたいのですが、YUICOMPRESSORでエラーを起こすJavaScriptは存在します。 それでも完成度は高いと言えます。 WordPress開発者の皆様ありがとう!
  3. テーマの開発者にありがとう!
    JavaScriptは完璧です!
  4. 以下のプラグインの各ディレクトリーに .htaccess を定義しています。
    1. all-in-one-seo-pack
      .htaccess が無いと、投稿一覧で、例えばSEOキーワードの編集用の鉛筆ボタンが出ません。
    2. css-javascript-toolbox
      .htaccess が無いと、管理画面を表示しません。
    3. featured-image-from-url/admin
      .htaccess が無いと、管理画面を表示しません。
    4. merge-minify-refresh
      .htaccess が無いと、機能しません。
    5. post-snippets
      .htaccess が無いと、管理画面を表示しません。

その他、わたしが採用しているプラグインで、 .htaccess によるリセットが無用なもの。 akismet , classic-editor , google-sitemap-generator , movabletype-importer , really-simple-ssl , under-construction-page , wordpress-ping-optimizer , wp-multibyte-patch 2020/03/26 における各最新版です。

次世代MakeGZifNewer.sh

エラーを起こす犯人を捜せ!に関係しますが、 MakeGZifNewer.shを改訂します。 改訂しましたら、本記事のDISQUSで告知します。 改訂内容は、 .min.js しか存在しない場合、日付をそのままに、 .min の無いJavaScriptファイルを自動的に配置します。 分かっています! WordPressシステム本体は、 .min.js を読みに行く。 それで構いません。 次世代 MakeGZifNewer.shで、ルールを統一します。 MakeGZifNewer.shはMD5検査機能がありますし、日付の比較のレポート機能があります。 次世代MakeGZifNewer.shで処理しながら、MSバッチファイルで、 .min.js を、YUICOMPRESSORとCLOSURE-COMPILERで再度一次圧縮させて、1ビットでも小さいファイルを採用させます! MakeGZifNewer.shについては、過去記事JSとCSSとHTACCESSを連動させ世界最高速を夢見よう!_」のMakeGZifNewer.shを利用して、.min.ファイルのチェック_」項で解説しています。


改訂版をアップしました

改訂内容は左の画像をクリックしましょう!
  • CLICK!

記事の改訂の告知について

DISQUSコメントで案内します。

DISQUSコメントにログインし、DISQUSコメント枠の一番下段の左端のメール・シンボルをクリックすれば、DISQUSコメントがあれば自動的にメールで知らせてくれます。 再度クリックすれば、メール通知を停止できます。 記事末尾のDISQUSコメントの表示が小さくてスレッドのデザインが狭過ぎると思うなら、DISQUSコメント本尊に接続_してみてください。


SNS

応援よろしくお願い致します! (ABC順)MovableTypeインポート書式のファイルを扱えないブログ類は、SNS扱いです。

開発の行方?

MSバッチに問題が無ければ、bashスクリプト化してWordPress全体を一気に処理させる方向で開発するかも知れません。 PHPサーバーサイドスクリプトは動的にHTMLデーターを生成しますが、ここにも無駄なデーターの生成が存在します。 PHPが生成するHTMLデーターから無駄な贅肉を剝ぎ取る開発を行います? どんどん速くなるWordPressに進化したいと思っています。

動的JavaScript

過去記事第二世代WordPressアイキャッチ静止画と動画_」で公開した: header.php が、PHP内でJavaScriptを生成しています。


auto2020.bat

記事WordPressで問題を起こしているプラグイン Merge + Minify + Refresh 削除手順と配布物のご案内_」で、発展型MSバッチファイルを公開開始しました。 わたしはauto2020.batを利用しています。


サポートが必要ですか?


Support AIt's free and fastSupport BIt's free and fastSupport CIt's free and fast

「無料サポート」に興味があれば
上の丸ボタンをクリック願います。
サーバーから9kbを受信しますのでお待ち願います。

※ 記事本文は別サーバーから JavaScriptファイルとして配信しており、配信元のサーバーにおける JavaScriptファイル(YUICOMPRESSOR済み)も、実際にあなたのブログが受信する gzip圧縮済みの JavaScriptファイルも、30日間のキャッシュ流用を定義していますので、特にご質問の前にブラウザーのキャッシュを削除してから、再度のご訪問と閲覧をお願い致します。
※ DISQUSについては別管理ですので、毎回、最新のDISQUSを表示できています。 但し、ご自分のDISQUSコメントを編集した直後に編集後の内容に至らない場合がありますが、DISQUS表示の上部にある「あなたの言語でDISQUSメニューを再表示する!」をクリックしますと最新の状況を表示致します。 宜しくご理解願います。
※ どれだけ待ってもDISQUSが表示されない場合は「広告ブロック」機能を切ってみて下さい。
Google Translator.

良いブログと利用できないブログ


  • CLICK!