用途
新着
履歴
分類

laravel JS,CSSをまとめる

laravel JS,CSSをまとめる
laravel-mixを利用して、複数のJSやCSSをそれぞれ一つにまとめるサンプル。

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。

公開 2022-11-11 06:41:01
更新 2022-11-11 06:41:41
このページの二次元コード
laravel JS,CSSをまとめる

人気のサンプル

search -  category -  about
© 2024 kipure
Top