StorybookでバンドラーにViteを使うStorybookをViteで開発する方法を紹介します。preactプロジェクトではハマりどころがあるため、その点を丁寧に解説しています。また、Storybookの設定ファイルを型安全にする方法も紹介しています。 はじめにStorybook で Vite を使ってビルドできるようになったので紹介します。 iframe 内のビルドを Webpack から vite に切り替えることで次の利点があります。 ビルド速度の改善HMR の高速化アセット処理の自動化Vite プロジェクト設定との互換性Vite のプラグインエコシステムへのアクセスコンポーネントが少ない場合、速度の恩恵はあまり感じられない可能性があります。 Webpack と比較すると、ブラウザが表示されるまでのスピードは劇的に向上しますが、 ブラウザ上での読み込みに時間がかかるためです1。