laravelをインストールするとpackage.jsonにあれば、laravel-mixもインストールされる。
repository直下にあるwebpack.mix.jsを開く。
CSSを束ねたい場合
mix.styles([
'public/css/source/hoge1.css',
'public/css/source/hoge2.css'
], 'public/css/main.css');
hoge1.cssとhoge2.cssがmain.cssにまとめられ、圧縮軽量化できる。
JSファイルを束ねたい場合
mix.scripts([
'public/js/source/fuga1.js',
'public/js/source/fuga2.js'
], 'public/js/main.js');
書き方はCSSと同じ。
sassもコンパイルできる
mix.sass('resources/assets/sass/app.scss', 'public/css');
上記を記述して保存する。
以下のどちらかのコマンドを実行する。
laravel自体をビルドするコマンド
npm run dev
ファイルの圧縮やコンパイルだけ実行するコマンド
npm run production
他にもいろいろできるが、ここまで。
一つにまとめることの何が良いかと言うと、読み込み速度に影響する。
読み込みの動作も1回になるし、キャッシュされるのも1つだけとなる。
SEOの速度改善の一つのtips。