【Laravel】CSSやJSを統合・圧縮して、サイトを軽くする【802日目】

サイト速度のためにファイルを小さくする？

ファイルを合体させます。加えて、改行など動作に無駄なものを削ります。

よく、ライブラリとかで ○○.min.jsとか見たことがあると思います。
そして、これらが一行の長いファイルだったのをみたことがあると思います。
これを作りましょう。

なぜ？

サイトは出来るだけ速度を上げたいですよね。

CSSやJavaScriptのファイルを、そのままファイル毎に読み込んでると、少し無駄があるかもしれません。

ファイルを軽くする

CSSやJavaScriptのファイルは、普段開発している人は、普通は改行やスペースを入れていると思います。
あるいは、コメントを書いているかもしれません。

これらを取り除くと、単純にファイルが軽くなります。

方法

webpack.mix.js

mix.styles([
        'public/css/vendor/normalize.css',
        'public/css/vendor/videojs.css'
    ], 'public/css/all.css'
).scripts([
        'public/js/admin.js',
        'public/js/dashboard.js'
    ], 'public/js/all.js'
);

こんな感じに、圧縮するCSSとJSを指定

npm run production

で圧縮する。

圧縮後のファイル名である、

public/css/all.css
public/js/all.js

これをHTMLに記述する。
これでCSSやJSのリクエストを減らす。