お元気ですか。PageSpeed Insightsのスコアが90を超えて喜んでいるHodaです。

ここ最近、モバイル端末におけるサイトの表示速度を改善しているのですが。

その過程で、WordPressのスクリプトファイルを調べる機会がありました。

下図はそのファイルのソースコードですが、とても解読する気にはならないですよね。

圧縮され、解読が大変なソースコード

このように、コードは容量を削減するために圧縮されている場合があります。

圧縮されたコードは、それはもうキュンキュンな状態なので、読み解くのは一苦労です。

 

この記事では、一度縮小されたコードを整形し、可読化する方法をメモします。

 

圧縮済みJavaScriptファイルを整形するツール

JavaScript unpacker and beautifier

 

こちらのツールが簡単に使えて便利です。

Javascript unpacker and beautifier

 

テキストエリアにコードを貼り付け、Beautifyボタンをクリックするだけです。

 

 

ギュウギュウな状態から、綺麗に整理されたコードへ早変わり。

復元され、解読が容易になったソースコード

圧縮済みCSSファイルを最適化するツール

CSSファイル整形ツールStyleneat

 

CSSファイル用のツールもありました。

styleneat

コードをテキストエリアに直接入力するだけでなく、CSSファイルをアップロードしたり、URLを指定する方法もあり、扱いやすそうです。

 

まとめ

圧縮されたCSSとJSファイルを復元、整形するツールを紹介しました。

インストールしなくても手軽に使える点が非常に良いですね。

作成者に感謝です。

それではまた、ごきげんよう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*