LaravelのデフォルトビルドツールがViteになることはみなさんご存知でしょうか? webpackよりも速くなると言われていますが、実際にどのくらい良くなるのか気になりませんか?
この発表ではLaravel Mix とViteの性能比較した結果を分かりやすくご紹介させていただきます! はたしてViteは私たちの開発体験をどのくらい快適にしてくれるのでしょうか!?
▼こんな方におすすめ ・Laravelで開発経験のある方 ・Viteがどんなツールのなのか知りたい方、気になる方
参考 https://laravel.com/docs/9.x/vite
Copyright© M&Aクラウドどのくらい速くなるの?Laravel MixとViteを性能比較してみました!PHP カンファレンス2022 Akito.Tsukahara
View Slide
Copyright© M&Aクラウド 2自己紹介塚原彰仁AkitoTsukahara株式会社M&AクラウドAkitoTsukaharaakito_tsukahara
Copyright© M&AクラウドLaravel v9.19.0からViteがデフォルトのアセットバンドラーになりました!3
Copyright© M&AクラウドViteってなに?読みは「ヴィート」。フランス語で「素早い」。開発者はEvan You(Vueの開発者でもある)非常に高速な Hot Module Replacement (HMR) など、ネイティブ ES モジュールを利用した豊富な機能拡張を提供する開発サーバ。Viteはノーバンドルツールとも言われている。実際はesbuildによる事前バンドルが実行されている。プロダクションビルドにはRollupを利用。
Copyright© M&AクラウドLaravel Mixってなに?webpackを定義するためのスラスラと書けるAPIを提供多くのCSSおよびJavaScriptプリプロセッサを使用してLaravelアプリケーションのビルドステップを定義してくれる。言い換えると、Mixを使用すると、アプリケーションのCSSファイルとJavaScriptファイルを簡単にコンパイルして圧縮できる。
Copyright© M&Aクラウド比較してみました!Laravel MixとViteどっちが速いのか比較してみました!
Copyright© M&Aクラウドベンチマークテスト1Laravelの初期状態でベンチマークテストアセットファイルのビルドにかかる時間で比較Laravel Mix (Laravel v9.1.10)Vite(Laravel v9.30.1)Laravelの初期状態でベンチマークテスト
Copyright© M&AクラウドLaravelの初期状態でベンチマークテスト
Copyright© M&AクラウドLaravelをインストールしただけの初期状態で比較1457ms988ms
Copyright© M&Aクラウドベンチマークテスト2公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較追加した実装・tailwind-css・autoprefixer・Vue・5000行近いscss
Copyright© M&Aクラウド公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較
Copyright© M&Aクラウド公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較12783ms4606ms
Copyright© M&AクラウドみんなLaravel Mix使ってる?
Copyright© M&AクラウドStorybookのベンチマークテストもご紹介Storybook Performance: Vite vs Webpack
Copyright© M&AクラウドStorybookのベンチマークテストもご紹介
Copyright© M&AクラウドViteが速い理由を簡単に紹介ポイントネイティブESMを利用したビルドセットアップ・npmの依存感関係の解消・esbuildによる事前バンドル詳しくはこちら
Copyright© M&Aクラウド従来のビルドセットアップ
Copyright© M&AクラウドネイティブESMを利用したビルドセットアップ
Copyright© M&Aクラウドまとめ・Laravel 9.19.0 からViteがデフォルトに・Laravel MixかViteなら、Viteの方が速い・webpackも最適化していれば、特に遅いわけでもない・HMRはViteの方に軍配が上がる(めちゃ速い)・今後Viteに適応したライブラリも増えていくことは想像できるので、触れておくのにはいい機会
Copyright© M&Aクラウド参考資料・https://ja.vitejs.dev/guide/why.html・https://zenn.dev/takuyakikuchi/articles/36eae991f0239d・https://storybook.js.org/blog/storybook-performance-from-webpack-to-vite/・https://zenn.dev/takuyakikuchi/articles/36eae991f0239d
Copyright© M&Aクラウドありがとうございました!25