開発サーバー起動時のフラッシュを軽減

開発サーバー起動時に発生する画面のフラッシュ（一瞬の白い画面表示）を軽減するため、ブラウザの起動タイミングがBrowserSyncの初期化完了後に変更されました。これにより、開発者体験の向上が図られています。

背景

従来の実装では、BrowserSyncが開発サーバーを起動すると同時にブラウザが自動的に開かれていました。この動作により、サーバーの準備が完全に整う前にブラウザがページにアクセスし、一瞬白い画面が表示されるフラッシュ現象が発生していました。PR #2076 では、この問題に対処するため、ブラウザの起動タイミングを制御する実装が追加されています。

この変更は、free版とpro版の両方の開発サーバーに適用されます。

技術的な変更

packages/webawesome/scripts/build.js において、BrowserSyncの設定とブラウザ起動ロジックが変更されました。

変更前:

bs.init(
  {
    startPath: '/',
    port,
    logLevel: 'silent',
    // ...
  },
  () => {
    spinner.succeed();
    console.log(`\nThe dev server is running at ${chalk.cyan(url)}\n`);
  },
);

変更後:

import open from 'open';

bs.init(
  {
    open: false,
    startPath: '/',
    port,
    logLevel: 'silent',
    // ...
  },
  () => {
    spinner.succeed();
    console.log(`\nThe dev server is running at ${chalk.cyan(url)}\n`);
    open(url);
  },
);

BrowserSyncの open オプションを false に設定することで、自動的なブラウザ起動を無効化しています。代わりに、open パッケージ（v11.0.0）を使用してサーバー起動完了後のコールバック内でブラウザを開くようになりました。

依存関係として追加された open パッケージは、クロスプラットフォームでブラウザを起動するためのライブラリです。内部的には default-browser と bundle-name パッケージを使用し、ユーザーのデフォルトブラウザを検出して起動します。

設計判断

BrowserSync標準の自動起動を無効化し、外部パッケージで制御する方式 が採用されました。

PRでは、BrowserSyncの自動起動を無効にし、初期化完了後に外部パッケージでブラウザを起動するアプローチが選択されました。bs.init() のコールバックが呼ばれる時点でサーバーの準備が完了していることを保証し、その後に明示的にブラウザを起動することで、確実にフラッシュを防ぐ設計になっています。

open パッケージの選択により、デフォルトブラウザの検出やプラットフォーム固有の起動処理を自前で実装する必要がなくなり、保守性も向上しています。

まとめ

本PRは、開発サーバーの起動シーケンスを見直し、ブラウザ起動のタイミングを少し遅らせることで、視覚的なノイズを軽減した変更です。BrowserSyncの設定変更と外部パッケージの追加という最小限の修正で、開発者体験の改善を実現しています。