Laravel Mix(webpack)からViteに移行してみる

はじめに

最新版のlaravelではデフォルトのフロントエンドビルドツールが、Laravel MixからViteに変更されています。

Laravel MixからViteへ、試験的に移行してみました。

結論、様々な理由からLaravel Mixを継続使用することに落ち着きましたが、所感や移行時に行ったことを書いてみます。

経緯

• webpackでのコンパイルが重くて業務に支障がでてきた
  • npm run prodが3分くらいかかるサイトがある
• webpackはいまだにシェア率が高いけど、開発終了している
  • 後継のTurbopackが開発中らしい
    https://www.publickey1.jp/blog/23/javascriptwebpackturbopack.html
• Laravel最新バージョンのデフォルトのビルドツールがVite
• 読み方はVite(ヴィート)らしい

今回移行を断念した理由

• 現行webpackに画像圧縮の処理を含めていて、Laravelのblade内での画像表示タグにmixでの指定をしているため、blade内の変更箇所が多い。 (Viteに移行する場合は画像圧縮の処理はNode.jsのライブラリsharpを使用する予定で、パス指定は普通の書き方にする必要がある)
• cssファイル読込やjavascriptファイル読込の書き方も@vite()みたいな書き方に変更する必要がある
• javascriptのrequireが使えない。importに書き換える必要がある
• 上記すべて対応後のデバッグの必要がある

Vite導入してみて

設定ファイルが簡単。ほぼ触っていない。

(弊社docker開発環境はnginxでのリバースプロキシでの表示をしているので、それへの対応に少し詰まった)

コンパイル速度も改善された。

単独で、新規サイトや新規Laravelサイトの作成を行う場合は、ローカルサーバーも勝手に立ち上がるし、リアルタイムcss更新もあるので、Viteがよさそう。

バージョン

Vite移行前のバージョン

laravel version 9.11
node v14.17.6
npm -v 9.2.0

Vite移行後のバージョン

laravel version 9.11
node v18.17.1
npm -v 9.6.7

導入まとめ

1.(Laravelフレームワークを更新)

composer require laravel/framework:^9.11.0

2.nodeのバージョンアップ(voltaで更新)

volta install node
volta pin node@18.17.1

3.npmのバージョンアップ(voltaで更新)

volta pin npm@bundled
// plugin install
npm install --save-dev vite laravel-vite-plugin

4.設定ファイルvite.config.jsを、プロジェクトのルートディレクトリに新規作成

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
	server: {
        hmr: {
            host: 'localhost',
        },
        host: true,
        // port: 8080,
    },
    plugins: [
        laravel([
						// 'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
    resolve: {
        alias: {
            '@': '/resources/js'
        }
    }
});

5.package.jsonのLaravel Mixコマンド部分をviteコマンドに書き換え

"scripts": {
    "dev": "vite",
    "build": "vite build",
},
.
.

6.npm install

npm i

7..envの編集

// 追記した
VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
ASSET_URL=開発用ドメイン
VITE_SENTRY_DSN_PUBLIC=開発用ドメイン