viteを使う

npmパッケージとしてライブラリを配布したい場合:

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    lib: {
      entry: "./src/index.ts",
      name: "MyLib",
      fileName: "my-lib",
    },
  },
});

複数のHTMLエントリポイントを持つ場合:

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: "index.html",
        admin: "admin.html",
      },
    },
  },
});

バックエンドAPIへのプロキシ:

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
      },
    },
  },
});

.env ファイルで環境変数を管理する。 VITE_ プレフィックス付きの変数のみクライアントに公開される。

# .env
VITE_API_URL=https://api.example.com
SECRET_KEY=xxx  # クライアントには公開されない

// コード内での使用
const apiUrl = import.meta.env.VITE_API_URL;

ES Moduleの特徴を少しまとめておこう。

静的構造

import / export はファイルのトップレベルに書く。条件分岐の中には書けない。これにより、コードを実行しなくてもどのモジュールが使われているか解析できる（tree-shaking の前提）。

非同期読み込み

ブラウザはモジュールを非同期で取得するため、HTMLの描画をブロックしない。

strict mode

ESM は常に strict mode で動作する。

ブラウザは <script type"module">= を指定すると、ESM として読み込む。

<script type="module" src="/src/main.js"></script>

// src/main.js
import { greet } from './greet.js';
greet('world');

// src/greet.js
export function greet(name) {
  console.log(`Hello, ${name}`);
}

このような2つのファイルがあるとする。ブラウザは main.js を読み込み、 import 文を見つけると greet.js をHTTPリクエストで取得する。バンドラなしでモジュールが動く。Viteの開発サーバーはこの仕組みをそのまま使う。ソースファイルをバンドルせず、ブラウザが import するたびにサーバーが該当ファイルを返す。だから起動が速い。

JavaScript は1995年の誕生時にモジュールシステムを持っていなかった。全てのスクリプトがグローバルスコープを共有しており、名前の衝突や依存関係の管理が困難だった。

<!-- 全部グローバル。読み込み順にも依存する -->
<script src="a.js"></script>
<script src="b.js"></script>

これを解決するために、非公式なモジュールの仕組みが次々と生まれた。

Google が2009年に公開した JavaScript の最適化コンパイラ。Closure Library と組み合わせて使うことが想定されていたが、単体でも利用できた。Java で書かれている。

3つのコンパイルレベルがある。

WHITESPACE_ONLY

空白・コメントの除去のみ。今で言う単純なミニファイ。

SIMPLE

変数名の短縮を加える。ローカル変数のみ対象。

ADVANCED

未使用コードの除去、プロパティ名の短縮、関数のインライン化、定数の畳み込みなど。最も攻撃的な最適化。

ADVANCED モードの動作例:

// 入力
function hello(name) {
  return 'Hello, ' + name;
}

function unused() {
  return 'this is dead code';
}

console.log(hello('world'));

// ADVANCED モードの出力
console.log("Hello, world");

unused 関数が除去され（tree-shaking）、 hello 関数がインライン化され、文字列結合が定数に畳み込まれている。2009年の時点でこれをやっていた。

ただし ADVANCED モードは制約が厳しく、JSDoc 形式のアノテーション（ @param {string} 、 @return {number} など）を付ける必要があった。外部ライブラリとの連携には externs ファイルの定義も必要で、導入のハードルが高かった。Google 社内では広く使われたが、一般に普及はしなかった。現在の tree-shaking やミニファイの概念的な先駆けと言える。

CommonJS は Node.js のために作られたもので、根本的な問題があった。

const lodash = require('lodash');
module.exports = { myFunc };

ブラウザで動かない

require は同期的にファイルを読む前提。ブラウザの HTTP リクエストには使えない。

静的解析できない

require は関数呼び出しなので、実行しないと何を読み込むか分からない。tree-shaking 不可。

エコシステムの分裂

サーバーは CommonJS、ブラウザは AMD と、別々の仕組みが併存していた。

ES2015 で import / export が標準化された目的は明確だった。

• 1つの仕組みでサーバーもブラウザも統一する
• 静的構造にして最適化（tree-shaking）を可能にする
• 非同期読み込みに対応する

ただし、仕様策定から実際に使えるようになるまでには時間がかかった。

仕様から実用まで6年かかった。特に Node.js のエコシステムは CommonJS で巨大になっていたため、移行が遅れた。2026年現在、主要なライブラリは ESM 対応が進み新規プロジェクトでは ESM がデフォルトだが、CommonJS のパッケージもまだ大量に残っている。Vite が esbuild でプリバンドルしているのは、この互換性問題を吸収するためでもある。

使われていないコードをビルド時に除去する最適化手法。ESM の静的構造を利用して、どの export が実際に import されているかを判定する。

// utils.js — 3つの関数をエクスポート
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

// main.js — add だけ使う
import { add } from './utils.js';

console.log(add(2, 3));

ビルド後の出力（概念）:

// subtract と multiply は消える。add だけが残る
function add(a, b) {
  return a + b;
}
console.log(add(2, 3));

subtract と multiply は誰からも import されていないので、最終的なバンドルに含まれない。ファイルサイズが小さくなる。

CommonJS では tree-shaking が効かない。 require は関数呼び出しなので、条件分岐の中にも書ける。静的に解析できないため、何が使われているか判定できず、全部バンドルに含めるしかない。

// CommonJS — require は動的に呼べる
const utils = require('./utils');
// utils のどのプロパティが使われるか、実行しないと分からない

アプリケーション全体を1つの巨大なJSファイルにまとめず、複数のファイル（チャンク）に分割する手法。必要なコードだけを必要なタイミングで読み込める。

// main.js — ボタンを押したときだけ chart.js を読み込む
document.getElementById('btn').addEventListener('click', async () => {
  const { renderChart } = await import('./chart.js');
  renderChart();
});

ビルド後の出力:

dist/
├── index.js        # main.js のバンドル（初期読み込み）
└── chart-a1b2c3.js # chart.js のバンドル（ボタン押下時に読み込み）

chart.js は初期表示時にはダウンロードされない。ユーザーがボタンを押して初めて取得される。初期表示が速くなる。

ルートベースの分割（React の例）:

import { lazy } from 'react';

// 各ページを動的インポートで分割
const Home = lazy(() => import('./pages/Home'));
const Settings = lazy(() => import('./pages/Settings'));
const Dashboard = lazy(() => import('./pages/Dashboard'));

ビルド後:

dist/
├── index.js           # ルーター等の共通コード
├── Home-x1y2z3.js     # /home にアクセスしたときだけ読み込む
├── Settings-a4b5c6.js # /settings にアクセスしたときだけ読み込む
└── Dashboard-d7e8f9.js

全ページのコードを一括ダウンロードせず、表示するページのコードだけ取得する。

コードの動作を変えずにファイルサイズを小さくする処理。空白・改行の除去、変数名の短縮などを行う。

ミニファイ前:

function calculateTotalPrice(items) {
  let totalPrice = 0;
  for (const item of items) {
    totalPrice += item.price * item.quantity;
  }
  return totalPrice;
}

console.log(calculateTotalPrice([
  { price: 500, quantity: 2 },
  { price: 1200, quantity: 1 },
]));

ミニファイ後:

function c(t){let o=0;for(const e of t)o+=e.price*e.quantity;return o}console.log(c([{price:500,quantity:2},{price:1200,quantity:1}]));

変わった点:

• calculateTotalPrice → c 、 totalPrice → o 、 items → t 、 item → e （変数名の短縮）
• 空白・改行・インデントの除去
• オブジェクトのプロパティ名（ price 、 quantity ）は外部からアクセスされる可能性があるため変更されない

典型的なJSファイルでミニファイすると 30〜70% 程度サイズが減る。さらに gzip / brotli 圧縮と組み合わせると、元のサイズの 10〜20% 程度まで縮小できる。

Vite は vite build 時に esbuild（JS）および Lightning CSS（CSS）でミニファイを自動的に行う。設定不要。