話題の爆速CLIツール「Vite」をVue.jsの定番ツール「Vue CLI」と徹底比較！

TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法 第3回

ViteとVue.CLIで生成したプロジェクトの構成比較

　ここでは、上記の手順で生成したViteのプロジェクトと、前回記事の方法で生成したVue.CLIのプロジェクトについて、構成を比較します。プロジェクトを構成するファイル群は図7の通り似通っています。

図7：ViteとVue CLIプロジェクトの構成（左＝Vite、右＝Vue CLI）

　ここでは細かい違いを説明していきます。両プロジェクトではindex.htmlの配置場所が異なっているほか、Viteプロジェクトには.vscode配下にVisual Studio Codeの拡張機能についての設定ファイルextensions.jsonが含まれています。また、Viteプロジェクトのenv.d.tsと、Vue CLIプロジェクトのshims-vue.d.tsはほぼ同一内容で、Vue.jsのコンポーネント（*.vueファイル）をTypeScriptで記述するためのファイルです。

　Viteプロジェクトのみに存在するvite.config.tsは、Viteプロジェクトの設定ファイルです。設定ファイルの詳細は公式サイトで説明されています。設定を行うにはリスト3（1）の通り、defineConfigメソッドの引数に設定内容を与えます。デフォルトでは（2）の通り、Vue.js用のプラグインを使用するように設定されています。

［リスト3］Viteプロジェクトの設定ファイル（p001-vite/vite.config.ts）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({   // 設定を記述するメソッド ...（1）
  plugins: [vue()]              // Vue.jsのプラグインを使用 ...（2）
})

　Vue.jsのWebページ表示を記述する*.vueファイルの関係はどちらも同じで、ページ自体のコンポーネントApp.vueの内部に、ページ一部の内容を表すコンポーネントHelloWorld.vueが埋め込まれています。

［補足］Viteプロジェクトの*.vueファイルに含まれる「<script setup>」とは？

　前回記事でも説明した通り、Vue CLIプロジェクトでは、App.vueの<script>部で（1）のdefineComponentメソッドを利用して、自身のコンポーネント名と、使用するコンポーネントを指定しています。

［リスト4］Vue CLIプロジェクトに含まれるApp.vueの<script>部（p003-vue-cli/src/App.vue）

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({ // コンポーネントを定義 ...（1）
  name: 'App',  // 自身のコンポーネント名
  components: { // 使用するコンポーネントの指定
    HelloWorld
  }
});
</script>

　一方、ViteプロジェクトのApp.Vueでは、リスト5の通り、<script>部が「<script setup>」で始まっており、HelloWorldコンポーネントをimportする記述のみとなっています。

［リスト5］Viteプロジェクトに含まれるApp.vueの<script>部（p001-vite/src/App.vue）

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

　リスト5の「<script setup>」記述は、Vue.jsのバージョン3（Vue 3）で導入されたコンポーネントの記述方法「Composition API」をよりシンプルに記述できる糖衣構文（シンタックスシュガー）です。Composition APIを含め、Vue.jsではさまざまな記法でコンポーネントを記述できますが、これらの記述方法は本連載の将来記事で説明する予定です。

Viteの高速動作と、その仕組み

　Viteでプロジェクト生成が速いことを紹介しましたが、図8に示す通り、Viteではプロジェクトの実行も高速に行えます。

図8：Viteプロジェクト実行時の様子（p001-vite）

　同じPCで、生成直後のVue CLIプロジェクトを実行したときの様子は図9の通りです。Viteのほうが起動までの時間が早いことがわかります。

図9：Vue CLIプロジェクト実行時の様子（p003-vue-cli）

　初回の実行時だけではなく、ソースコードを編集してからブラウザーに反映されるまでの速度も、ViteはVue CLIより高速に動作します。この速度の違いを、ソースコード編集時の通信内容から説明します。F12ツールで通信内容を表示した状態で、ViteおよびVue CLIプロジェクトのソースコードを編集すると、図10に示す通信が発生することがわかります。

図10：ソースコード編集時の通信内容（上＝Vite、下＝Vue CLI）

　Vue CLIでは「app～.js」というファイルが通信されています。これは、Vue CLIプロジェクトでは*.vueファイルや*.tsファイルをひとまとめにして（バンドルして）いることによります。起動時やソースコード編集時、その都度バンドルの処理が実行されるので、その分の処理時間を要します。

　一方、Viteでは「HelloWorld.vue」というファイルが通信されていることがわかります。Viteプロジェクトではバンドルを行わず、コンポーネント単位で差分だけを通信します。内部的にはVue.jsのコンポーネントをブラウザーで解釈できる「ECMAScript Modules」形式のモジュールに変換して送り、それをブラウザー側で解釈します。処理の一部をブラウザー側に肩代わりしてもらう分、Vue CLIより高速に動作するわけです。

［補足］Viteプロジェクトでバンドルを行う方法

　Viteのプロジェクトでは、開発用の実行時にはバンドルを行いませんが、最終的な成果物を作るときにはバンドルを行います。バンドルを行って、その成果物を実行するには、リスト6のコマンドを実行します。

［リスト6］Viteプロジェクトでバンドルを行って実行するコマンド

npm run build # バンドルの処理を実行して成果物を作る
npm run serve # 成果物を実行する