どのくらい速くなるの？Laravel MixとViteを性能比較してみました！

LaravelのデフォルトビルドツールがViteになることはみなさんご存知でしょうか？
webpackよりも速くなると言われていますが、実際にどのくらい良くなるのか気になりませんか？

この発表ではLaravel Mix とViteの性能比較した結果を分かりやすくご紹介させていただきます！
はたしてViteは私たちの開発体験をどのくらい快適にしてくれるのでしょうか！？

▼こんな方におすすめ
・Laravelで開発経験のある方
・Viteがどんなツールのなのか知りたい方、気になる方

参考
https://laravel.com/docs/9.x/vite

Transcript

1. Copyright© M&Aクラウド どのくらい速くなるの？ Laravel MixとViteを性能比較してみました！ PHP カンファレンス2022 Akito.Tsukahara
2. Copyright© M&Aクラウド 2 自己紹介 塚原彰仁 AkitoTsukahara 株式会社M&Aクラウド AkitoTsukahara akito_tsukahara
3. Copyright© M&Aクラウド Laravel v9.19.0から Viteがデフォルトの アセットバンドラーになりました！ 3
4. Copyright© M&Aクラウド Viteってなに？ 読みは「ヴィート」。フランス語で「素早い」。 開発者はEvan You（Vueの開発者でもある） 非常に高速な Hot Module Replacement (HMR) など、ネイ ティブ ES モジュールを利用した豊富な機能拡張を提供す る開発サーバ。 Viteはノーバンドルツールとも言われている。実際は esbuildによる事前バンドルが実行されている。 プロダクションビルドにはRollupを利用。
5. Copyright© M&Aクラウド Laravel Mixってなに？ webpackを定義するためのスラスラと書けるAPIを提供 多くのCSSおよびJavaScriptプリプロセッサを使用して Laravelアプリケーションのビルドステップを定義してく れる。 言い換えると、Mixを使用すると、アプリケーションの CSSファイルとJavaScriptファイルを簡単にコンパイルし て圧縮できる。
6. Copyright© M&Aクラウド 比較してみました！ Laravel MixとViteどっちが 速いのか比較してみました！
7. Copyright© M&Aクラウド ベンチマークテスト１ Laravelの初期状態でベンチマークテスト アセットファイルのビルドにかかる時間で比較 Laravel Mix (Laravel v9.1.10) Vite(Laravel v9.30.1) Laravelの初期状態でベンチマークテスト
8. Copyright© M&Aクラウド Laravelの初期状態でベンチマークテスト
9. Copyright© M&Aクラウド Laravelをインストールしただけの初期状態で比較 1457ms 988ms
10. Copyright© M&Aクラウド ベンチマークテスト２ 公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態に して比較 公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較 追加した実装 ・tailwind-css ・autoprefixer ・Vue ・5000行近いscss
11. Copyright© M&Aクラウド 公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較
12. Copyright© M&Aクラウド 公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較 12783ms 4606ms
13. Copyright© M&Aクラウド みんなLaravel Mix使ってる？
14. Copyright© M&Aクラウド Storybookのベンチマークテストもご紹介 Storybook Performance: Vite vs Webpack
15. Copyright© M&Aクラウド Storybookのベンチマークテストもご紹介
16. Copyright© M&Aクラウド Storybookのベンチマークテストもご紹介
17. Copyright© M&Aクラウド Storybookのベンチマークテストもご紹介
18. Copyright© M&Aクラウド Storybookのベンチマークテストもご紹介
19. Copyright© M&Aクラウド Storybookのベンチマークテストもご紹介
20. Copyright© M&Aクラウド Viteが速い理由を簡単に紹介 ポイント ネイティブESMを利用したビルドセットアップ ・npmの依存感関係の解消 ・esbuildによる事前バンドル 詳しくはこちら
21. Copyright© M&Aクラウド 従来のビルドセットアップ
22. Copyright© M&Aクラウド ネイティブESMを利用したビルドセットアップ
23. Copyright© M&Aクラウド まとめ ・Laravel 9.19.0 からViteがデフォルトに ・Laravel MixかViteなら、Viteの方が速い ・webpackも最適化していれば、特に遅いわけでもない ・HMRはViteの方に軍配が上がる（めちゃ速い） ・今後Viteに適応したライブラリも増えていくことは想像できるので、触れ ておくのにはいい機会
24. 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
25. Copyright© M&Aクラウド ありがとうございました！ 25