どのくらい速くなるの？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
   

   View Slide

2. Copyright© M&Aクラウド 2
   自己紹介
   塚原彰仁
   AkitoTsukahara
   株式会社M&Aクラウド
   AkitoTsukahara
   akito_tsukahara
   

   View Slide

3. Copyright© M&Aクラウド
   Laravel v9.19.0から
   Viteがデフォルトの
   アセットバンドラーになりました！
   3
   

   View Slide

4. Copyright© M&Aクラウド
   Viteってなに？
   読みは「ヴィート」。フランス語で「素早い」。
   開発者はEvan You（Vueの開発者でもある）
   非常に高速な Hot Module Replacement (HMR) など、ネイ
   ティブ ES モジュールを利用した豊富な機能拡張を提供す
   る開発サーバ。
   Viteはノーバンドルツールとも言われている。実際は
   esbuildによる事前バンドルが実行されている。
   プロダクションビルドにはRollupを利用。
   

   View Slide

5. Copyright© M&Aクラウド
   Laravel Mixってなに？
   webpackを定義するためのスラスラと書けるAPIを提供
   多くのCSSおよびJavaScriptプリプロセッサを使用して
   Laravelアプリケーションのビルドステップを定義してく
   れる。
   言い換えると、Mixを使用すると、アプリケーションの
   CSSファイルとJavaScriptファイルを簡単にコンパイルし
   て圧縮できる。
   

   View Slide

6. Copyright© M&Aクラウド
   比較してみました！
   Laravel MixとViteどっちが
   速いのか比較してみました！
   

   View Slide

7. Copyright© M&Aクラウド
   ベンチマークテスト１
   Laravelの初期状態でベンチマークテスト
   アセットファイルのビルドにかかる時間で比較
   Laravel Mix (Laravel v9.1.10)
   Vite(Laravel v9.30.1)
   Laravelの初期状態でベンチマークテスト
   

   View Slide

8. Copyright© M&Aクラウド
   Laravelの初期状態でベンチマークテスト
   

   View Slide

9. Copyright© M&Aクラウド
   Laravelをインストールしただけの初期状態で比較
   1457ms
   988ms
   

   View Slide

10. Copyright© M&Aクラウド
    ベンチマークテスト２
    公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態に
    して比較
    公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較
    追加した実装
    ・tailwind-css
    ・autoprefixer
    ・Vue
    ・5000行近いscss
    

    View Slide

11. Copyright© M&Aクラウド
    公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較
    

    View Slide

12. Copyright© M&Aクラウド
    公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較
    12783ms
    4606ms
    

    View Slide

13. Copyright© M&Aクラウド
    みんなLaravel Mix使ってる？
    

    View Slide

14. Copyright© M&Aクラウド
    Storybookのベンチマークテストもご紹介
    Storybook Performance: Vite vs Webpack
    

    View Slide

15. Copyright© M&Aクラウド
    Storybookのベンチマークテストもご紹介
    

    View Slide

16. Copyright© M&Aクラウド
    Storybookのベンチマークテストもご紹介
    

    View Slide

17. Copyright© M&Aクラウド
    Storybookのベンチマークテストもご紹介
    

    View Slide

18. Copyright© M&Aクラウド
    Storybookのベンチマークテストもご紹介
    

    View Slide

19. Copyright© M&Aクラウド
    Storybookのベンチマークテストもご紹介
    

    View Slide

20. Copyright© M&Aクラウド
    Viteが速い理由を簡単に紹介
    ポイント
    ネイティブESMを利用したビルドセットアップ
    ・npmの依存感関係の解消
    ・esbuildによる事前バンドル
    詳しくはこちら
    

    View Slide

21. Copyright© M&Aクラウド
    従来のビルドセットアップ
    

    View Slide

22. Copyright© M&Aクラウド
    ネイティブESMを利用したビルドセットアップ
    

    View Slide

23. Copyright© M&Aクラウド
    まとめ
    ・Laravel 9.19.0 からViteがデフォルトに
    ・Laravel MixかViteなら、Viteの方が速い
    ・webpackも最適化していれば、特に遅いわけでもない
    ・HMRはViteの方に軍配が上がる（めちゃ速い）
    ・今後Viteに適応したライブラリも増えていくことは想像できるので、触れ
    ておくのにはいい機会
    

    View Slide

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
    

    View Slide

25. Copyright© M&Aクラウド
    ありがとうございました！
    25
    

    View Slide