オブジェクトを組み合わせる。 WordPressのJavaScriptファイルを1つのファイルに結合する方法複数のjsファイルを1つのファイルに結合する

31.08.2020

このアクションにより、サーバーへのリクエストの数が減り、サイトの速度が向上します。これは、HTTP1.1 および 20 を超えるリクエストを必要とするページに特に当てはまります。さらに、これによりテストのポイントが追加されます (多くの人にとって、これが最も重要なことです)。

WordPress の Javascript ファイルを 1 つのファイルに結合する方法 - プラグインを使わない方法

一般に、このタスク用のプラグインはありますが、それらのプラグインへのコメントには「機能しない」という趣旨のレビューがたくさんあります。

これを「完全に手動」で行う場合は、コードの山をすべて手動で取得し、1 つのファイルにコピーする必要があります。この方法には次のような多くの欠点があるため、お勧めできません。

1.) JavaScript ファイル記述子名を見つけるのは困難です。これは、id 属性記述子名を見つけることができる CSS ファイルとは対照的です。このハンドルは、マージプロセスの完了後にスクリプトの登録を解除するために必要となるため、重要です。

2.) 柔軟性の欠如。 JavaScript ファイルの追加または削除がある場合、そのファイルを手動で再結合する必要があります。

3.) 結合されたコード部分が競合しないことは保証できません。これは、関数呼び出しのシーケンスと JavaScript 変数のスコープに関係します。

WordPress の Javascript ファイルを 1 つのファイルに結合する方法 - 自動的に

WordPress で JavaScript ファイルを自動的にマージするには、まず JavaScript ファイルへのパスとそのハンドル名を収集する必要があります ( 手動による方法、自動的にのみ）。

にアップロードされた JavaScript ファイルに関するすべての情報を見つけることができます。ワードプレスページ WP_Scripts オブジェクト内。

このオブジェクトは $wp_scripts 変数に保存され、wp_head、wp_print_scripts (wp_enqueue_scripts)、wp_footer、init などのテンプレートセクションで呼び出されます。最も一般的なケースをいくつか紹介します。

一度。 head (タグ) では、wp_head フックを使用してこれを定義できます。

２つ。

フッター (タグの前) では、wp_footer フックを使用してこれを定義できます。

使用するテーマフォルダーにあるfunctions.phpファイルを編集用に開き、そこにコードを追加します。
コード: add_action("wp_head", "show_head_scripts", 9999);

add_action("wp_footer", "show_footer_scripts", 9999);
// 本体を開く前に一番上に表示されます
関数 show_head_scripts())(
グローバル $wp_scripts;
}
エコー「」; print_r($wp_scripts->done); エコー「」;
関数 show_footer_scripts())(
関数 show_head_scripts())(
グローバル $wp_scripts;
}

次に、ページを開いてソースを確認し、JS ファイルへのパスのリスト (ページの上部と下部) を確認します。

WordPress で JavaScript ファイルを 1 つのファイルに結合する

マージするには、コンテンツが表示される前に自動的に検出できるファイルへのパスを収集する必要があります。 wp_enqueue_scripts フックはこれに適しています。これにはいくつかの欠点があります (後述) が、これが自動的に使用できる唯一のトリックです。

これがどのように行われるか (コードロジックの説明):

1.) JavaScript ファイルハンドルは、マージ後にエラーなしで実行できるように、その依存関係に従ってコピーされます。これを行うには、WP_Scripts オブジェクトの all_deps メソッドを呼び出します($wp_scripts->all_deps($wp_scripts->queue))。

2.) JavaScript ファイル内のコードを取得し (file_get_contents を使用)、他のコードと結合します。ローカライズスクリプト wp_localize_script (利用可能な場合) を含めます。このスクリプトは $ wp_scripts-> registered ["handle"] -> extra ["data"] にあります。

3.) 結合されたコードをファイルに書き込み (file_put_contents を使用)、wp_enqueue_scripts 関数を使用してロードします。

4.) マージされたすべてのスクリプト/ハンドルの登録を解除します。これは、前の段落で説明したプロセスが完了した後に行われます (スクリプトを登録解除すると、その依存スクリプトも登録解除されます)。

エンジンにこれらすべてのタスクを実行させるには、次のコードをfunctions.phpファイルに貼り付けます。

コード: add_action("wp_enqueue_scripts", "merge_all_scripts", 9999);
関数 merge_all_scripts()
{
関数 show_head_scripts())(

/*
#1. 依存関係に基づいてハンドルを並べ替えます。
結果は to_do プロパティに保存されます ($wp_scripts->to_do)
*/
$wp_scripts->all_deps($wp_scripts->キュー);

// 新しいファイルの場所: E:xampp\htdocs\wordpresswp-content\theme\wdc\merged-script.js
$merged_file_location = get_stylesheet_directory() 。 DIRECTORY_SEPARATOR 。 "マージされたスクリプト.js";

$merged_script = "";

// JavaScript ファイルをループし、$merged_script 変数に保存します
foreach($wp_scripts->to_do as $handle)
{
/*
URL をクリーンアップします (例: wp-content/主題/wdc/main.js?v=1.2.4)。
wp-content/主題/wdc/main.js になる
*/
$src = strtok($wp_scripts->登録済み[$handle]->src, "?");

/**
#2. JavaScriptファイルを結合します。
*/
// src が URL http / https の場合
if (strpos($src, "http") !== false)
{
// サイトの URL を取得します。例: http://webdevzoom.com/wordpress
$site_url = サイト_url();

/*
ローカルサーバー上にある場合は、URLを相対パスに変更します。
例えば http://webdevzoom.com/wordpress/wp-content/plugins/wpnewsman/css/menuicon.css
/wp-content/plugins/wpnewsman/css/menuicon.css になります。
これはHTTPリクエストを再利用するためのものです

そうでない場合は、例えば https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css、
その後はそのままにしておきます（スキップします）
*/
if (strpos($src, $site_url) !== false)
$js_file_path = str_replace($site_url, "", $src);
それ以外
$js_file_path = $src;

/*
file_get_contents 関数を使用できるようにするには、スラッシュを削除する必要があります。
例えば /wp-content/plugins/wpnewsman/css/menuicon.css
wp-content/plugins/wpnewsman/css/menuicon.css になる
*/
$js_file_path = ltrim($js_file_path, "/");
}
それ以外
{
$js_file_path = ltrim($src, "/");
}

// ファイルが存在するかどうかを確認してからマージします
if (file_exists($js_file_path))
{
// ＃3。 wp_localize_script を確認する
$localize = "";
if (@key_exists("data", $wp_scripts->registered[$handle]->extra)) (
$localize = $obj->extra["data"] 。 ";";
}
$merged_script .= $localize 。 file_get_contents($js_file_path) 。 ";";
}
}

// マージされたスクリプトを現在のテーマディレクトリに書き込みます
file_put_contents($merged_file_location, $merged_script);

// ＃4。結合したファイルのURLを読み込みます
wp_enqueue_script("マージスクリプト", get_stylesheet_directory_uri() . "/マージスクリプト.js");

// 5. ハンドルの登録を解除します
foreach($wp_scripts->to_do as $handle)
{
wp_deregister_script($handle);
}
}

合併が成功したかどうかを確認する

ブログページに移動し、ソースを開き、その中で接続されているmerged-script.js ファイルを探します。

次に、ブラウザの「開発者ツール」を開いて、結合されたスクリプトにエラーがないことを確認します (F12 キーを押します)。 Google Chrome) をクリックし、「コンソール」タブを選択します。

コンソールにはエラーのテキストが表示され、エラーが発生した場所が参照されます。 merged-script.js ファイルに呪いの言葉がなければ、すべて問題ありません。

結合に参加しなかった残りのスクリプトの機能を確認します。

英語のオリジナル記事を読んでください。

CSS ファイルと JS ファイルを統合して圧縮することで、サイトのパフォーマンスを最適化しようとしています。私の質問は、私が遭遇した実際の状況を考慮して、これを達成する方法の（具体的な）手順に関連しています（ただし、これは他の開発者にも共通するはずです）。

製品リリースでは、3 つの CSS ファイルを 1 つに結合し、たとえば YUI Compressor を使用して圧縮したいと考えています。ただし、これら 3 つのファイルを新しく変更された CSS にリンクする必要があるすべてのページを更新する必要があります。これはエラーが発生しやすいようです (たとえば、多くのファイルにいくつかの行を削除したり追加したりしているなど)。他にリスクの少ないアプローチはありますか? JS ファイルでも同じ問題があります。

13 件の回答

並べ替え:

活動

これを Ant タスクで実行できるため、svn/git を使用している場合はメッセージ/プレコミットフックに含めることができます。

更新: 私は現在、CONCAT で grunt を使用しており、貢献を軽視し、外観を損ないます。オブザーバーと併用して、新しいミニファイルを作成させることができます。背景ソースが変わるたびに。 uglify contrib はコンソールログを分割するだけでなく、未使用の関数とプロパティも削除します。

これら 3 つのファイルを新しくルート化された CSS にリンクする必要があるすべてのページを更新する必要があります。

まず、一般的なタイトルを付ける必要があると思います。したがって、必要に応じてすべてのヘッダーを変更する必要はありません。良い習慣- 見出しは 1 つ、または 2 ～ 3 つあります。ページは必要なので、タイトルを変更できます。そのため、Web アプリケーションを拡張する場合、リスクも退屈も軽減されます。

開発環境については言及していませんでした。さまざまな環境向けに多数の圧縮ツールがリストされていることがわかります。そしてあなたは使用します良いツールつまり、YUI コンプレッサーです。

コンテンツ管理システム (Wordpress、Joomla、Drupal など) については言及していないようですが、一般的な CMS を使用している場合は、利用可能なすべてのプラグイン/モジュールが用意されています ( 無料オプション）、CSSとJSを縮小してキャッシュします。

プラグインを使用すると、編集可能な非圧縮バージョンを保持できるため、変更を加えると、プラグインが自動的に変更を組み込んでファイルを再圧縮します。何かが壊れた場合にファイル（カスタム js ファイルなど）を除外できるプラグインを必ず選択してください。

私は過去にこれらのファイルを手動で保存しようとしたことがありますが、いつもメンテナンスの悪夢になってしまいました。幸運を祈ります。これがお役に立てば幸いです。

提供するファイルの前処理を行う場合は、おそらく適切なビルドシステム (Makefile など) をセットアップする必要があるでしょう。こうすることで、重複のない元のファイルが得られ、変更を加えるたびに「make」を実行して、自動的に生成されたすべてのファイルを更新することができます。すでにビルドシステムがインストールされている場合は、その仕組みと使用方法を学習してください。そうでない場合は、追加する必要があります。

したがって、最初にファイルをマージして縮小する方法を考えてください。コマンドライン(YUICompressor のドキュメントを参照してください)。自動生成されたマテリアル用のディレクトリを指定します。これは、作業中のマテリアルとは別に、Web サーバーにアクセス可能であり、そこに出力されます (例: gen/scripts/combination.js)。使用したコマンドを Makefile に配置し、変更を加えて変更を有効にするたびに「make」を繰り返します。次に、結合されたミニファイルを指すように他のファイルのヘッダーを更新します。

もう少し軽量で柔軟なものが必要な方のために、この問題を解決するために今日 js.sh を作成しました。これは JS ファイルをターゲットとするシンプルなコマンドラインツールであり、CSS ファイルを処理するように簡単に変更できます。利点:

プロジェクトで複数の開発者が使用できるように簡単にカスタマイズ可能
script_order.txtで指定された順序でJSファイルを結合します。
Google の Closure Compiler で圧縮する
JS を次のように分割します< 25kb куски где возможно, так как iPhone не будет кэшировать что-либо большее, чем 25kb.
小さなものを作成します PHPファイル必要に応じてタグを含めることができます
使用法: js.sh -u あなたの名前

いくつかの改善が必要になる可能性がありますが、これまでに見た他のすべてのソリューションよりも私のユースケースにとっては優れています。

最適化の最初のステップは、ファイルを最小化することです。 (縮小と最適化には GULP を強くお勧めします。数時間かかるシンプルなソリューションで、インストールとすべてのファイルが一度に圧縮されます。すべての CSS、JS、less、sass などをサポートします。)

または、昔ながらの解決策:

1) 一般に、サイトのパフォーマンスを最適化する最適化プロセスとして、すべての CSS を 1 つのファイルにマージし、Compass を使用してファイルを圧縮します。こうすることで、静的 CSS に対する複数のリクエストが 1 つに置き換えられます。

2) 複数の JS の問題。CDN (または Google ホストライブラリ) を使用することで解決できるため、リクエストはあなたのサーバーとは別のサーバーに送信されます。こうすることで、サーバーは前のリクエストが完了するのを待たずに次のリクエストを送信します。

3) 独自の JavaScript をローカルに保存している場合は、Brackets の「JavaScript の圧縮」プラグインを使用して各ファイルを非表示にします。基本的には 1 クリックで JavasScript を圧縮できます。ブラケット - 無料のエディター CSS と JS 用ですが、PHP やその他の言語でも使用できます。フロントエンド開発者とサードパーティ開発者の両方が選択できるプラグインが数多くあります。一般に、「ワンクリック」でこれらすべての (それでも複数の) コマンドを実行できます。ところで、ブラケットは私の非常に高価な Dreamweaver を置き換えました ;)

3) CSS を最小限に抑えるには、Sass、Compass、less などのツールを使用してみてください。

注: ブレンドや変数を使用しなくても、CSS は圧縮されます (純粋な CSS を使用するだけで、Compass の「look」コマンドが圧縮されます)。

これがお役に立てば幸いです!

私の交響曲プロジェクトでは次のようなことをします

(#layout.html.twig #) (% ブロックスタイル %) (% if app.environment == "prod" %) (% else %) (% endif %) (% endblock %) (# some-view.html .twig #) (% extends "AppMainBundle::layout.html.twig" %) (% ブロックスタイル %) ((parent() )) (% if app.environment != "prod" %) (% else %) (%エンドブロック%)

DEV バージョンが運用の準備ができたら、私は使用します

指定された 2 つ以上の JavaScript オブジェクトの内容を結合します。結合の結果は、これらのオブジェクトの最初のオブジェクトに書き込まれます (関数の実行後に関数によって返されることもあります)。この関数には 2 つの用途があります。

オブジェクトの内容を結合します ターゲット, オブジェクト1,.., オブジェクトN、結果をオブジェクトに入れます ターゲット.

使用上の特徴

2 つ以上のオブジェクトを指定した場合、結果はそれらの結合になります。オブジェクトを 1 つだけ指定した場合、extend() 関数はその内容をグローバル $(jQuery) オブジェクトに追加します。このように、独自の関数を名前空間に追加することで、ライブラリの機能を拡張できます。これはプラグインを作成するときに役立ちます。

オブジェクトをマージした結果、最初のオブジェクトが変更されることを思い出してください (これは extend() 関数の結果としても返されます)。指定したオブジェクトを何も変更しない場合は、パラメータとして設定できます。 ターゲット空のオブジェクト:

var object = $.extend (( ) , object1, object2) ;

再帰的（ディープ）コピー

オブジェクトを結合すると、一致するフィールドが上書きされます。

var object1 = (リンゴ: 0、チェリー: 97);

var object2 = (リンゴ: 5、ドリアン: 100);

$.extend(オブジェクト1, オブジェクト2) ;

ただし、最初のパラメータとして true を指定すると、ディープコピーが実行され、マージプロシージャが内部オブジェクトに適用されます (前の場合のように書き換えるのではなく)。

var object1 = (リンゴ: 0、バナナ: (重量: 52、価格: 100)、さくらんぼ: 97);

var object2 = ( バナナ: ( 価格: 200 ) 、ドリアン: 100 ) ; $.extend(true, object1, object2);/* 結果: ( リンゴ:0, バナナ:(重量:52, 価格:200), ドリアン:100, チェリー:97, ); */ Object.assign() メソッドは、列挙可能なすべての独自のプロパティを 1 つ以上のプロパティからコピーします。ソースオブジェクト

に

対象物

。対象のオブジェクトを返します。

この対話型サンプルのソースは GitHub リポジトリに保存されています。インタラクティブなサンプルプロジェクトに貢献したい場合は、https://github.com/mdn/interactive-examples を複製して、プルリクエストを送信してください。

構文 Object.assign(target , ...sources) パラメータ target ターゲットオブジェクト - ソースのプロパティを適用する対象。変更後に返されます。

ソースソースオブジェクト - 適用するプロパティを含むオブジェクト。戻り値 ターゲットオブジェクト。説明ターゲットオブジェクトのプロパティは、同じキーを持つ場合、ソースのプロパティによって上書きされます。後のソース」プロパティは以前のものを上書きします。 Object.assign() メソッドはコピーのみを行います。 数え切れないほどのそして

自分の

プロパティをソースオブジェクトからターゲットオブジェクトに変換します。ソースでは [] を使用し、ターゲットでは [] を使用するため、 getter と setter を呼び出します。したがって、それは

割り当てる

プロパティと新しいプロパティのコピーまたは定義。このため、マージソースにゲッターが含まれている場合、新しいプロパティをプロトタイプにマージするのに適さない可能性があります。

プロパティ定義 (列挙可能性を含む) をプロトタイプにコピーするには、代わりに Object.getOwnPropertyDescriptor() および Object.defineProperty() を使用します。

String プロパティと Symbol プロパティの両方がコピーされます。

関数 test() (「厳密な使用」; let obj1 = ( a: 0 , b: ( c: 0)); let obj2 = Object.assign((), obj1); console.log(JSON.stringify(obj2) ); // ( "a": 0, "b": ( "c": 0)) obj1.a = 1; "b": ("c": 0)) console.log(JSON.stringify(obj2)); // ("a": 0, "b": ("c": 0)) obj2.a = 2 ; obj1)); // ( "a": 1, "b": ( "c": 0)) console.log(JSON.stringify(obj2)); : 0)) obj2.b.c = 3; console.log(JSON.stringify(obj1)) // ( "a": 1, "b": ( " c": 3); (obj2)); // ( "a": 2, "b": ( "c": 3)) // ディープクローン obj1 = ( a: 0 , b: ( c: 0)); .parse(JSON.stringify(obj1)); obj1.a = 4; console.log(JSON.stringify(obj3)) ( "a": ( "c": 0)); ();

オブジェクトの結合 const o1 = ( a: 1 ); const o2 = ( b: 2 ); const o3 = ( c: 3 ); const obj = Object.assign(o1, o2, o3); コンソール.ログ(obj); // ( a: 1, b: 2, c: 3 ) console.log(o1); // ( a: 1, b: 2, c: 3 )、対象オブジェクト自体が変更されます。同じプロパティを持つオブジェクトの結合 const o1 = ( a: 1, b: 1, c: 1 ); const o2 = ( b: 2, c: 2 ); const o3 = ( c: 3 ); const obj = Object.assign((), o1, o2, o3); コンソール.ログ(obj); // ( a: 1、 b: 2、 c: 3 )

プロパティは、パラメータの順序の後の方にある同じプロパティを持つ他のオブジェクトによって上書きされます。

シンボル型プロパティのコピー const o1 = ( a: 1 ); const o2 = ( : 2 ); const obj = Object.assign((), o1, o2); コンソール.ログ(obj); // ( a: 1, : 2 ) (Firefox のバグ 1207182 を参照) Object.getOwnPropertySymbols(obj); // プロトタイプチェーン上のプロパティと列挙不可能なプロパティはコピーできません const obj = Object.create(( foo: 1 ), ( // foo は obj のプロトタイプチェーン上にあります。 bar: ( value: 2 // bar は), baz: ( value: 3, enumerable: true // baz は独自の列挙可能なプロパティです。 ) )); // ( baz: 3 ) プリミティブはオブジェクトにラップされます const v1 = "abc"; const v4 = const obj = Object.assign(()) , v1, null, v2, unknown, v3, v4); // 独自の列挙可能なプロパティを持つことができるのは文字列ラッパーのみであることに注意してください。 console.log(obj) ( "0": "a", "1": "b", "2"; : "c" ) 例外が発生すると、進行中のコピータスクが中断されます。 const target = Object.defineProperty((), "foo", ( value: 1 , writable: false )); // target.foo は読み取り専用のプロパティ Object です。 assign(target, ( bar: 2), ( foo2: 3, foo: 3, foo3: 3), ( baz: 4 )) ; // TypeError: "foo" は読み取り専用です // 代入時に例外がスローされますtarget.foo console.log(target.bar); // 2、最初のソースは正常にコピーされました。 console.log(target.foo2); // 3、2 番目のソースの最初のプロパティは正常にコピーされました。 console.log(target.foo); // 1、ここで例外がスローされます。 console.log(target.foo3); // 未定義、assign メソッドが終了したため、foo3 はコピーされません。 console.log(target.baz); //未定義 3番目のソースもコピーされません。アクセサーのコピー const obj = ( foo: 1, get bar() ( return 2; ) ); let copy = Object.assign((), obj); コンソール.ログ(コピー); // ( foo: 1, bar: 2 ) // copy.bar の値は、obj.bar の getter の戻り値です。 // これは完全な記述子をコピーする割り当て関数です function completeAssign(target, ...sources) (sources.forEach(source => ( let descriptors = Object.keys(source).reduce((descriptors, key) => ( descriptors = Object.getOwnPropertyDescriptor(source, key); return descriptors; ), ()); // デフォルトでは、Object.assign は列挙可能なシンボルもコピーします Object.getOwnPropertySymbols(source).forEach(sym => ( let descriptor = Object) .getOwnPropertyDescriptor(source, sym); if (descriptor.enumerable) (descriptors = descriptor; )); コンソール.ログ(コピー); // ( foo:1, get bar() ( return 2 ) ) ポリフィル

ES5 にはシンボルがないため、このポリフィルはシンボルプロパティをサポートしていません。

If (typeof Object.assign !== "function") ( // 書き込み可能: true、列挙可能: false、構成可能: true Object.defineProperty(Object, "assign", ( value: function assign(target, varArgs) ( // 関数の .length は 2 "厳密な使用"; if (target === null || target === unknown) ( throw new TypeError("unknown または null をオブジェクトに変換できません"); ) var to = Object(ターゲット); for (var インデックス = 1; インデックス< arguments.length; index++) { var nextSource = arguments; if (nextSource !== null && nextSource !== undefined) { for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to = nextSource; } } } } return to; }, writable: true, configurable: true }); }

仕様仕様

ECMAScript 最新ドラフト (ECMA-262)
その仕様における「Object.assign」の定義。

ブラウザの互換性

このページの互換性表は構造化データから生成されています。データに貢献したい場合は、https://github.com/mdn/browser-compat-data をチェックして、プルリクエストを送信してください。

GitHub で互換性データを更新する

デスクトップモバイルサーバー Chrome Edge Firefox Internet Explorer Opera Safari Android Webview Chrome for Android Firefox for Android Opera for Android iOS Safari Samsung Internet Node.js割り当てる

Chrome 完全サポート 45

エッジフルサポート 12

Firefox 完全サポート 34

IE サポートなしなし

Opera フルサポート 32

Safari 完全サポート 9

WebView Android 完全サポート 45

Chrome Android 完全サポート 45

Firefox Android 完全サポート 34

Opera Android 完全サポート 32

Safari iOS 完全サポート 9

Samsung Internet Android 完全サポート 5.0

nodejs 完全サポート 4.0.0

凡例完全サポート完全サポートサポートなしサポートなし

読書時間: 2 分。

2017 年 4 月 20 日公開

こんにちは！私たちは、WordPress サイトの最も興味深く、最も便利なプラグインを分析し続けます。今日は、CSS ファイルと JS ファイルを組み合わせて Web サイトを最適化する方法を学びます。デフォルトでは、すべての CSS ファイルと JS ファイルが個別に表示されるため、サイトに負荷がかかります。これらのファイルを 1 つのファイルに結合して、サイトの読み込みを高速化できます。とてもシンプルで便利なプラグインです！ WordPress 管理パネルからプラグインを直接インストールできます。ページに移動:プラグイン – 新規追加