Slide 1

Slide 1 text

Copyright© M&Aクラウド どのくらい速くなるの? Laravel MixとViteを性能比較してみました! PHP カンファレンス2022 Akito.Tsukahara

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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