Vue SFCの「ランタイムのコンパイルコストがかからない事前コンパイルされたテンプレート」ってなんだ？？？

今回は、Vue公式ドキュメントのSFCセクションで出てきた文言である「ランタイムのコンパイルコストがかからない事前コンパイルされたテンプレート」について、周辺知識にも軽く触れながら記事にまとめていきたいと思います。

記事に登場してくる単語について詳しくまとめようとするとそれで1つの記事をかけてしまうので、今回は概要のみ触れたいと思います。（いずれ記事としてまとめたい。。。。）

SFCとは

Vueコンポーネントのテンプレート（template）、ロジック（script）、スタイル（style）を1つのファイルにカプセル化できる特別なファイル形式のこと（下記コード参照）

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

「ビルドステップ」ってなんだよ！

Vueの公式ドキュメントに度々登場してくる「ビルドステップ」
デプロイ前に実行されるものというざっくりとした認識であったため、改めて言語化しておきます。

そもそものデプロイ（本番環境への配置）の挙動を理解しておく必要があります。

デプロイの挙動をまとめると下記です。

1. コンパイル
   1. ソースコードを機械が理解できるコード（バイナリコード）に変換する
   2. 例えば、TypeScriptをJavaScriptに変換する処理
2. バンドル
   1. 複数のファイルを1つにまとめる
3. 最適化
   1. コードの圧縮やデッドコードの除去を行う（パフォーマンスの向上）
4. テスト
   1. ビルドされたコードが正しく動作するかを確認するためのテストの実行
5. デプロイ
   1. 最終的なビルド成果物を運用環境に配置する

つまりビルドステップとは、デプロイステップにおける1~3のステップの総称です。

余談

ビルドツールとしてよく名前が挙がるものとしてViteがあります。

Viteの特徴として以下があります。

• 高速で動く開発サーバー
  • モジュールの読み込みと更新をESMを利用しているため、変更が即座に反映される（HMR（ホットモジュールリプレースメント））
• 効率的なビルド
  • 内部的にRollupを使用しているため、ビルド時間が短く、生成されたバンドルも効率的

Rollupってなんだよ！

Viteはバンドラー、兼、開発サーバーを立てるアプリケーションで、RollupはViteが内部的に使っているバンドラーです。

要は、VIteの中でバンドル処理を担ってくれているバンドラーです。

特徴としては以下があります。

• Tree Shaking
  • 未使用のコードを自動で除去してくれるため、最終的なバンドルサイズが小さくなる
• ESM対応
  • モジュールの読み込みを効率的にしてくれる

ランタイムのコンパイルコストがかからない事前コンパイルされたテンプレートってなんだよ！

今回の記事の本題です。

そもそも、ランタイムでのコンパイルコストとは、アプリケーション実行されている間（ランタイム）にコンパイル（他言語への変換）を行う際に発生するリソース（CPU、メモリ、時間）のこと。

• ランタイムでのコンパイルステップ
  • 動的テンプレート解析
    • テンプレートが実行時に解析されて、JSに変換されるプロセス
    • ブラウザのレンダリング時に行われて、ゆーざーがページをロードする際に時間がかかる要因
  • JSのパースと実行
    • テンプレートの変換だけでなく、変換後にJＳを実行するリソースも必要なので、それを行うプロセス

SFCでは、これらの上記のランタイムでのコンパイルステップのうち、動的テンプレート解析を事前に行うことができます。

• テンプレートの事前コンパイル
  • SFCのテンプレートは、ビルド時にJＳコードに変換される
  • このプロセスは開発中もしくは、デプロイまでに行われるためランタイムでは変換済みのコードが利用されるようになる

ただJSの実行に関しては、ブラウザやNode.jsといったJＳランタイムの環境で行われるため、Viteの責務ではありません。

つまり、「ランタイムのコンパイルコストがかからない事前コンパイルされたテンプレート」とは、 「ランタイム時に行っていた動的テンプレート解析をデプロイ前のビルドステップであるコンパイル時にすべて終わらせてしまう」 という意味になります。

事前コンパイルによる利点

事前コンパイルについて理解できたうえで、それらの利点に最後触れて終わりたいと思います。

• 初期ロードの高速化
  • テンプレートが事前にコンパイルされているため、アプリケーションの初期ロード時にJavaScriptのパースやコンパイルのコストがかからない
  • その結果、ユーザーがアプリケーションをロードする際の待ち時間が短縮される
• 効率的な再レンダリング
  • 動的なコンテンツの変更に対する再レンダリングが効率的に行われる
  • 仮想DOMを使用して変更部分のみを更新することによる、パフォーマンスの向上
    • 事前にコンパイルしていることで差分のみ再れんだりんぐすれば良いため
• リソースを省エネ化できる
  • 事前コンパイルにより、実行時に必要なCPUおよびメモリの使用量が削減される

まとめ

規模の小さい個人開発でのアプリケーションでは、特に意識しなくても問題のない事前コンパイルによるバンドルサイズの削減ですが、規模の大きいアプリケーションでは事前コンパイルによる恩恵は大きいと感じています。

Vue SFCについて全体的な解像度が上がれば幸いです。