laravel Mix と viteの違い

仕事でLaravelを使う機会が多いのですが、
最近Laravelの知識をアップデートできていないなぁと感じ、自己学習でLaravel10を触っている者です。
学習を進めていく中で、LaravelのデフォルトビルドツールがLaravel MixからViteに変わったことを知り、Viteとは?となったので、調べてみました。

Laravel Mixとは（振り返り）

Laravel Mixとはなんだったか。
Laracastsを作ったJeffrey Wayが開発したパッケージで、中身はwebpackです。
Laravel Mixを使用すると、アプリケーションのCSSファイルとJavaScriptファイルを簡単にコンパイルして圧縮できます。

webpack.mix.jsにエントリポイントを設定することで、コンパイル/バンドルを行うことができます。

sass（コンパイル）
mix.sass('resources/sass/app.scss', 'public/css');

js（バンドル）

mix.js([
  'src/test_1.js',
  'src/test_2.js'
], 'dist/bundle.js');

Laravel Mixについてもっと知りたい方はこちら。
https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17

Viteとは

Viteとは何ぞやというと、webpack や Rollup、Parcelのようなビルドツールの1つ。
これらの役割としては、プロジェクトすべてのファイルをコンパイル・結合して一つの塊（バンドル）となったファイルを生成してくれます。
※ちなみにVite(ヴィート)はフランス語で「素早い」という意味の単語

前述した通り、Laravelのバージョン9.18以降はViteがデフォルトビルドツールとなっているので、
create-projectしたらすぐ使えます。
※Laravel Breezeも結構便利で、Reactの勉強に使っています。

Viteがwebpackなどの従来ツールより高速となっている理由は2つ。

1. HMRが全てのソースコードを同時に読み込むのではなく、修正された部分のみを読み込むから
2. Viteは、依存関係の解決をesbuildで事前バンドルするようしており、これにより、多くの内部モジュールを持つ依存関係を単一のモジュールに変換して、その後のページロードのパフォーマンスを向上させている。
   ※最終的なビルドには、esbuildではなくRollupを用いている。
   　現状Rollup の方がパフォーマンスと柔軟性のトレードオフに優れているからとのこと。
   　将来的にはesbuildが使用されることもありそうです。

詳しく知りたい方はこちら
https://ja.vitejs.dev/guide/why.html

推奨環境

LaravelでViteを動かすためにはこちらのバージョンが必要。
PHP 8.0 以上
Node 16 以上

・Viteが使用できるブラウザ
Native ESMをサポートしているブラウザを対象としています。
IE11はデフォルトでは対象外。
※IE11で使用できるようにする方法設定はある。
https://ics.media/entry/210708/#contents-anchor-ie11

導入手順

Viteをとりあえず試してみたいという方向けの導入手順。

一旦Nodeのバージョン確認。
バージョンが古い場合はアップデートしましょう。

node --version

下記のnpmコマンドを実行

npm create vite@latest

プロジェクト名やテンプレのオプションをつける場合

# npm 6.x
npm create vite@latest my-app-name --template react

# npm 7+ は追加で 2 つのダッシュが必要
npm create vite@latest my-app-name -- --template react

フレームワークを選択

? Select a framework: › - Use arrow-keys. Return to submit.
   vanilla
    vue
❯   react
    preact
    lit
    svelte

作成されたプロジェクトフォルダに移動して、初期インストール

cd my-app-name
npm install

後は、動作を確認する場合

npm run dev

本番用にビルドする場合

# dist/ディレクトリに吐き出される
npm run build

Viteの注意事項

ViteはTypeScriptをサポートしてますが、型チェックは行ってくれないので注意が必要です。
型チェックはIDE とビルドプロセスによって処理してねとのこと。
※型チェックを行うと、Viteの持ち味である速さが損なわれてしまうらしいです。

所感

プロジェクトの規模が大きくなればなるほど、Viteの速さは活きてくるかもしれないです。
個人開発レベルの小さなシステムだと、実感しにくいかもしれないです...
フロントに力を入れた開発をあまり行ったことがないので、Laravel Mix（webpack）にストレスをそもそも感じていないからかも。

参考サイト

• Vite公式ドキュメント
• Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。
• jQueryからTypeScript・Reactまで！Viteで始めるモダンで高速な開発環境構築