ビルドツールViteを10分で解説！

Copyright© M&Aクラウド Viteはいいぞ！読みは「ヴィート」。フランス語で「素早い」。開発者はEvan You（Vueの開発者でもある） Webプロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツール非常に高速な Hot
Module Replacement (HMR) など、ネイティブ ESMを利用した豊富な機能拡張を提供

Copyright© M&Aクラウド Viteはいいぞ！今日話すこと • なぜViteが注目されているのか？ ◦ フロントエンド開発におけるビルドツールの歴史から考える • Viteの特徴
• 他のビルドツールとの比較今日話さないこと • Viteのセットアップ方法やコードの詳細

Copyright© M&Aクラウド Viteはどのように生まれたのか？ 1995/9 LiveScriptが誕生 (後のJavascript) 2009/5 Node.jsが誕生 (v0.0.1) 2011/2
Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) JavaScriptの歴史をざっくりお勉強📝 ・ビルドツールが使われているわけ・Viteは従来のビルドツールと何が違うのか

Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) 1995年9月: Netscape NavigatorにLiveScript (のちのJavaScript)が搭載された。

Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) 2009年5月: Node.jsによって・「ブラウザ以外のJavaScript実行環境」と、大きな地位を確立・JavaScriptの優れたモジュールシステムがもたらされる→CommonJS

Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) 2011年2月: モジュールバンドラー・複数のJavaScriptモジュールを結合して、１つのJavaScriptを生成する・Browserify ・タスクランナーで制御（grunt,gulp）・webpack

Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) 2014年2月: Vue.js ・当初はAngularを使いやすくシンプルにするコンセプト・v.1.0.22 以降、テンプレート・スクリプト、スタイルを１つのファイルに記述してコンポーネントを定義するアイデア（SFCs）が採用される・SFCs自体はRiot.jsが2014年頃に実装している

Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) 2015年6月: ECMAScriptのリリースでES modulesが策定された・JSファイルから別のJSファイルを読み込む仕組み

Browserifyが誕生(v0.0.1) 2014/2 Vue.jsが誕生 (v0.0.1) 2015/6 ECMAScript 2015のリリース 2020/4 Viteが誕生 (v 0.1) 2020年4月: Viteが誕生・ネイティブESMでHMRができるように

Copyright© M&Aクラウド Viteはどのように生まれたのか？ JavaScriptの歴史をざっくりお勉強📝 ・ビルドツールが使われているわけ →JavaScriptは他のモジュールを呼び出すことができなかったそのためにブラウザで動かすにはビルドツールでバンドルする必要があった ESMにブラウザが対応したことによって、バンドルしなくても良くなった・Viteは従来のビルドツールと何が違うのか →ESMに基づいた作りになっている
ESMベースでかつHMRをサポートしているので、注目を集めている実際にHMRは体感すごく速い！

Copyright© M&Aクラウド他のビルドツールと比べたらどうなのか？ Storybook Performance: Vite vs Webpack 比較対象は５つ 1.
webpack4 2. webpack5 3. webpack5 a. 遅延コンパイル b. コード分割 4. Vite 5. Vite a. コード分割

Copyright© M&Aクラウド他のビルドツールと比べたらどうなのか？公平な評価を心がけて欲しいとエヴァン・ユーがコメントし、 TurbopackとViteのベンチマークテストのリポジトリが公開されました。指摘内容は・ベンチマークテストされたアプリケーションの構成が揃っていない・30,000以上のモジュールがある場合を想定されているが現実的ではない・ブラウザ評価時間ではなく、再レンダリングにかかる時間を見るべき →OSSの競争はオープンなコミュニケーション、公正な比較、相互尊重が大事だよね
後日Vercelはベンチマークテストの詳細情報を公開しました。

Copyright© M&Aクラウドまとめ • ViteはESMを活用したビルドツール ◦ より速く無駄のない開発体験を提供することが目的 ◦ JavaScriptのライフサイクル転換によって誕生 •
非常に強力なHMR機能を提供してくれる ◦ 変更時には必要なモジュールだけ変更 ◦ esbuildの事前バンドル • 様々なフレームワーク・ツールで利用されている

Copyright© M&Aクラウド参考資料 • https://viteconf.org/2022/replay/vite_keynote • https://qiita.com/qnighy/items/16fdd8e58309a1f706a0 • https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm •
https://jakearchibald.com/2017/es-modules-in-browsers/ • https://ja.vitejs.dev/guide/why.html

ビルドツールViteを10分で解説！

ビルドツールViteを10分で解説！

More Decks by AkitoTsukahara

Other Decks in Programming

Featured

Transcript