Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

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

AkitoTsukahara

September 25, 2022
Tweet

More Decks by AkitoTsukahara

Other Decks in Programming

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クラウド
    ベンチマークテスト1
    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クラウド
    ベンチマークテスト2
    公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態に
    して比較
    公式ドキュメントに紹介されているアセットのコンパイル参考例と同じ状態にして比較
    追加した実装
    ・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