Laravelでhtmlを圧縮するプラグイン「laravel-page-speed」

Laravelで アウトプットするhtmlの minify (圧縮) をするプラグイン「laravel-page-speed」の紹介です。

 CSS、Javascriptなどの assetファイルを圧縮することは 珍しくありませんが、ページのソースを開いた時に 下の画像のようなminifyされたマークアップを目にしたことはないでしょうか？

 上の画像は ' google.co.jp ' のトップページのソースです。ページのレンダリングには必要無い 空白や改行、コメントを除去することによって ファイルのサイズが小さくなります。

 静的 ( スタティク ) なファイルを圧縮することは さほど難しくありませんが、テンプレートエンジンのような 動的なファイルとなると話しは変わってきます。

 テンプレート ( LaravelだとBlade ) の性質上、テンプレートの中に専用の構文、制御文を記述するので 下記のような空白が混ざったコードになることも 当たり前のように起こります。

 そんな テンプレートエンジンのレンダリング事情ですが、Laravelフレームワークでhtmlコードを圧縮してくれる プラグインが「laravel-page-speed」です。

- Viewをレンダリングする際に html を圧縮してくれる

laravel-page-speed は プロジェクトルート上で ' composer ' コマンドを使って導入します。
( * 動作するバージョンは Laravel Framework 5.3 以上 です )

# laravel-page-speedのインストール
composer require renatomarinho/laravel-page-speed

 Laravel 5.5から パッケージの 自動認識機能が追加され簡素化されたので、( 5.3, 5.4 )、5.5.* では 導入手順が少しだけ変わります。

 ' config/app.php ' の ' providers ' 内に下記のコードを追加します。
( * laravel 5.5では必要ありません )

// Laravel 5.3, 5.4 ( * 5.5では必要ありません )
// config/app.php
RenatoMarinho\LaravelPageSpeed\ServiceProvider::class,

次に コマンドライン上から 下記のコマンドを実行します。
( * laravel 5.5では必要ありません )

# project root
php artisan vendor:publish --provider="RenatoMarinho\LaravelPageSpeed\ServiceProvider"

最後に ' app/Http/Kernel.php ' の ' $middleware ' の 配列内に下記のコードを追加します。
( * 全バージョン共通 )

// app/Http/Kernel.php

\RenatoMarinho\LaravelPageSpeed\Middleware\ElideAttributes::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\InsertDNSPrefetch::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\RemoveComments::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\TrimUrls::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\RemoveQuotes::class,
\RenatoMarinho\LaravelPageSpeed\Middleware\CollapseWhitespace::class,

以上で導入は完了です。ページにアクセスすれば minifyされた htmlで発行されます。
( *  viewがレンダリングされる度に minifyされるので、' /storage/framework/view/* ' のキャッシュ内は圧縮されません。)

* 検証の為に 下記のコードを追加し、ファイルのサイズを比較してみました

{{- 検証の為に500行のリストを追加 -}}
<ul>
 @for ($i=0; $i < 500; $i++)
 <li>
  <strong> Hello!! {{ 1 + $i }} </strong>
 </li>
 @endfor
</ul>

 以上が laravel-page-speed の紹介でした。EC2などのデータの通信料が必要なクラウドサービスにホスティングしているサービスなら トラフィック量が多いシステムなら 月々の通信料が節約出来そうです。

GitHub : renatomarinho/laravel-page-speed