$30 off During Our Annual Pro Sale. View Details »

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

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