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

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

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

みなさんはビルドツールVite(ヴィート)を使ったことがありますか?
ビルドツールといえば、webpackやGulp、Rollupなど代表的なツールがありますが、最近はViteが注目を集めています。
参考)https://2021.stateofjs.com/ja-JP/libraries/build-tools

この登壇ではViteがなぜ注目を集めているのか?他のツールと比べて何が違うのか?などなど時間が許す限り解説させていただきます。
また10/11,12で開催予定のViteconfで発表されるViteの最新情報についてもご紹介できればと思います。

▼こんな方におすすめ
・フロントエンド開発している方
・フロントのビルドが遅いなーと日頃から感じている方
・新しいツールの情報をキャッチアップしたい方

AkitoTsukahara

November 19, 2022
Tweet

More Decks by AkitoTsukahara

Other Decks in Programming

Transcript

  1. 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は従来のビルドツールと何が違うのか
  2. 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) 1995年9月: Netscape NavigatorにLiveScript (のちのJavaScript)が搭載された。
  3. 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) 2009年5月: Node.jsによって ・「ブラウザ以外のJavaScript実行環境」と、大きな地位を確立 ・JavaScriptの優れたモジュールシステムがもたらされる→CommonJS
  4. 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) 2011年2月: モジュールバンドラー ・複数のJavaScriptモジュールを結合して、1つのJavaScriptを生成する ・Browserify ・タスクランナーで制御(grunt,gulp) ・webpack
  5. 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) 2014年2月: Vue.js ・当初はAngularを使いやすくシンプルにするコンセプト ・v.1.0.22 以降、テンプレート・スクリプト、スタイルを1つのファイルに記述して コンポーネントを定義するアイデア(SFCs)が採用される ・SFCs自体はRiot.jsが2014年頃に実装している
  6. 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) 2015年6月: ECMAScriptのリリースでES modulesが策定された ・JSファイルから別のJSファイルを読み込む仕組み
  7. 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) 2020年4月: Viteが誕生 ・ネイティブESMでHMRができるように
  8. Copyright© M&Aクラウド 他のビルドツールと比べたらどうなのか? Storybook Performance: Vite vs Webpack 比較対象は5つ 1.

    webpack4 2. webpack5 3. webpack5 a. 遅延コンパイル b. コード分割 4. Vite 5. Vite a. コード分割
  9. Copyright© M&Aクラウド まとめ • ViteはESMを活用したビルドツール ◦ より速く無駄のない開発体験を提供することが目的 ◦ JavaScriptのライフサイクル転換によって誕生 •

    非常に強力なHMR機能を提供してくれる ◦ 変更時には必要なモジュールだけ変更 ◦ esbuildの事前バンドル • 様々なフレームワーク・ツールで利用されている