ViteのresolveIdで特定環境のビルドだけ不要モジュールをstub化してバンドル軽量化

皆さん、こんにちは！Dress Code株式会社でプロダクトエンジニアをしているもずさん（@mozu1206）が、開発ツールの「Vite」を使った、ちょっとした工夫でウェブサイトの表示を速くするテクニックを紹介しています。今回のテーマは「モジュールを賢く扱う」こと。ウェブサイトを作る時、たくさんの部品（モジュール）を組み合わせて一つのウェブサイトを完成させます。しかし、中には、特定の状況でしか使わない部品や、そもそもウェブサイトの見た目には関係ないけれど、開発の時にだけ必要な部品もあります。これらを全部まとめてしまうと、ウェブサイトのデータが重くなってしまい、表示が遅くなる原因になってしまいます。

そこで、もずさんが提案しているのが、「不要なモジュールを一時的に別のものに置き換える（stub化）」という方法です。これは、開発の時だけ必要な部品や、特定の環境（例えば、ウェブサイトの見た目を作る部分だけ）では使わない部品を、「今はこれがあるよ」という仮の部品に置き換えてしまうイメージです。こうすることで、ウェブサイトを実際にインターネットで公開する時（バンドル）、本当に必要な部品だけを選んで、無駄なくまとめることができます。結果として、ウェブサイトのデータが軽くなり、ユーザーがページを開いた時の表示速度が速くなるというわけです。

この技術は、「resolveId」というViteの機能を使っています。これは、Viteが部品を探す時に、「あれ？この部品はどこにあるかな？」と探すのを手助けしてくれる役割を持っています。この探す仕組みに手を加えることで、先ほど説明した「不要なモジュールを一時的に置き換える」という処理を、Viteが部品を探す段階で自動的に行ってくれるようになります。これにより、開発者は特別な操作をしなくても、常に効率的なウェブサイトのデータが作られるようになります。以前、もずさんが紹介していた、Dexie.jsというデータベースを使った「フロントだけで動くプロトタイプ」の話も、このように部品をうまく差し替えていく設計思想が共通していると言えるでしょう。ウェブ開発の世界では、このように少しの工夫で、ユーザー体験を大きく向上させることができるんですね。