Laravel Mix(webpack)からViteに移行してみた
以前、「Laravel Mix(webpack)からViteに移行してみる」という記事を投稿しました。
そちらの記事の中で、Laravel MixからViteへの移行を断念したと書いたのですが
しばらくしてから移行しましたので、所感など書いていきたいと思います。
目次
前回移行を断念した理由
以下のリストは、以前の記事からの抜粋です。移行するにあたって、実際にすべて行う必要がありました。
- webpackに画像圧縮の処理を含めていて、Laravelのblade内での画像表示タグにmixでの指定をしているため、blade内の変更箇所が多い。 (Viteに移行する場合は画像圧縮の処理はNode.jsのライブラリsharpを使用する予定で、パス指定は普通の書き方にする必要がある)
- cssファイル読込やjavascriptファイル読込の書き方も@vite()みたいな書き方に変更する必要がある
- javascriptのrequireが使えない。importに書き換える必要がある
- 上記すべて対応後のデバッグの必要がある
やったこと
Vite移行用の新規gitブランチを切って、以前の記事を見ながらその通り進めました。
以下のリストも以前の記事からの抜粋です。
- (Laravelフレームワークを更新)
- nodeのバージョンアップ(voltaで更新)
- npmのバージョンアップ(voltaで更新)
- 設定ファイルvite.config.jsを、プロジェクトのルートディレクトリに新規作成
- package.jsonのLaravel Mixコマンド部分をviteコマンドに書き換え
- npm install
- .envの編集
こちらの順序で、Laravel Mixは使えなくなり、Viteが使えるようになります。
画像圧縮
これまではwebpackで画像圧縮のライブラリを使用して画像圧縮していましたが
Vite移行とともに画像圧縮はNode.js + sharpで行うように変更しました。
参考記事
Squooshが開発終了したので、sharpを使って画像を一括最適化、ついでにSVGにも対応した
やったこと
// npm install
npm install --save-dev sharp glob path fs-extra svgo zlib commander
// 参考記事を見ながら、convertImage.mjsを作成
// 以下コマンドでヘルプ表示
node convertImage.mjs -h
// 使ってみる
node convertImage.mjs -i ./resources/images -o ./public/images -m -w -t -v -z
// package.jsonに上記の処理を追加(以下抜粋)
"scripts": {
.....
"image": "node convertImage.mjs -i ./resources/images -o ./public/images -m -w -t -v -z\n",
.....
},
// これで画像処理できるようになった
npm run imageこれで画像圧縮処理が可能になりました。
webpackのライブラリを使用していた時と比べると、とんでもなく早くなりました。
5分くらいかかっていた処理が20秒もかからなくなりました。
LaravelのサイトをVite環境に合わせて改修する
vite.config.jsに追記していく
Viteでコンパイルしたいcssファイルやjsファイルを、Vite.config.jsに追記していきます。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
export default defineConfig({
server: {
port: 8080,
},
plugins: [
laravel([
// ここに追記する。
'resources/sass/main_app.scss',
'resources/js/main_app.js',
]),
],
resolve: {
alias: {
// コンパイル前のファイルで使用するaliasがあればここに書いておく
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
'~@fortawesome': path.resolve(__dirname, 'node_modules/@fortawesome'),
'~jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui'),
}
}
});
Viteでコンパイルされたファイルを参照するように書き換える
例えば、以下のように
<link href="{{ mix('css/main_app.css') }}" rel="stylesheet">
<script src="{{ mix('js/main_app.js') }}"></script>Laravel Mixでコンパイルされるファイルを、blade内で参照している場合
Viteでコンパイルしたら、それまで表示されていたLaravelサイトが表示されなくなって、エラー画面が表示されます。
以下のように書き換えます。
@vite('resources/sass/main_app.scss')
@vite('resources/js/main_app.js')Blade内で使用している画像のパス変更
Laravel Mixでコンパイルされたファイルを参照している場合は相対パスに書き換える。
エディタの一括置換などでやりました。
// こうゆうのを
<img src="{{ mix('/images/sample.jpg') }}" alt="サンプル画像">
// こうゆうふうに
<img src="/images/sample.jpg" alt="サンプル画像">jsでrequire使っていたらimportに書き換える
// こうゆうのを
const { forEach } = require("lodash");
// こうゆうふうに
import { forEach } from 'lodash';package.jsonに追記
// (以下抜粋)
"scripts": {
"dev": "vite",
"prod": "vite build && node convertImage.mjs -i ./resources/images -o ./public/images -m -w -t -v -z\n",
"image": "node convertImage.mjs -i ./resources/images -o ./public/images -m -w -t -v -z\n",
"build": "vite build"
},サイトの表示確認とデバッグ
元々のソースコードでjavascriptの変数宣言忘れとかがあるとViteでのコンパイルでこけたりしました。
(もしくはコンパイルはされているけど動作しないファイルが完成している)
sassファイルについても、古い書き方をしていたり、エイリアスの設定忘れなどがあるとコンパイル走りません。
便利になったこと
- コンパイル時間の短縮。
- npm run devコマンドで、プロジェクトの変更がリアルタイムで反映されるところ。docker環境でもいけました。
運用中のwebサイトのLaravel MixからViteへの移行だったので、気を使いましたけど
結果作業効率がよくなりましたので、やってよかったです。
TEXT BY
OODE
Webエンジニア
2019年にタイガーラック株式会社へ入社。 2022年にあたまを丸めました。 制作チームの人数も増えてきましたので 知識・技術の共有や相談、脱属人化を念頭に仕事していきます。
このカテゴリの最新記事
2024.07.29
2023.12.08
2024.07.16
2024.06.21
