ViteとVue.CLIで生成したプロジェクトの構成比較
ここでは、上記の手順で生成したViteのプロジェクトと、前回記事の方法で生成したVue.CLIのプロジェクトについて、構成を比較します。プロジェクトを構成するファイル群は図7の通り似通っています。
ここでは細かい違いを説明していきます。両プロジェクトでは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用のプラグインを使用するように設定されています。
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メソッドを利用して、自身のコンポーネント名と、使用するコンポーネントを指定しています。
<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する記述のみとなっています。
<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ではプロジェクトの実行も高速に行えます。
同じPCで、生成直後のVue CLIプロジェクトを実行したときの様子は図9の通りです。Viteのほうが起動までの時間が早いことがわかります。
初回の実行時だけではなく、ソースコードを編集してからブラウザーに反映されるまでの速度も、ViteはVue CLIより高速に動作します。この速度の違いを、ソースコード編集時の通信内容から説明します。F12ツールで通信内容を表示した状態で、ViteおよびVue CLIプロジェクトのソースコードを編集すると、図10に示す通信が発生することがわかります。
Vue CLIでは「app~.js」というファイルが通信されています。これは、Vue CLIプロジェクトでは*.vueファイルや*.tsファイルをひとまとめにして(バンドルして)いることによります。起動時やソースコード編集時、その都度バンドルの処理が実行されるので、その分の処理時間を要します。
一方、Viteでは「HelloWorld.vue」というファイルが通信されていることがわかります。Viteプロジェクトではバンドルを行わず、コンポーネント単位で差分だけを通信します。内部的にはVue.jsのコンポーネントをブラウザーで解釈できる「ECMAScript Modules」形式のモジュールに変換して送り、それをブラウザー側で解釈します。処理の一部をブラウザー側に肩代わりしてもらう分、Vue CLIより高速に動作するわけです。
[補足]Viteプロジェクトでバンドルを行う方法
Viteのプロジェクトでは、開発用の実行時にはバンドルを行いませんが、最終的な成果物を作るときにはバンドルを行います。バンドルを行って、その成果物を実行するには、リスト6のコマンドを実行します。
npm run build # バンドルの処理を実行して成果物を作る npm run serve # 成果物を実行する