NuxtはpreprocessorMaxWorkersでコンパイルが倍以上速くなる

NuxtでSCSSのコンパイルが倍以上速くなる設定

Nuxt（Vue）プロジェクトで大量のSCSSを使っている場合、開発サーバーの起動やビルド時間が遅くなってしまうことがあります。

あまり知られていませんが、Nuxtではnuxt.config.tsでpreprocessorMaxWorkersを有効化するだけで、SCSSのコンパイル時間を大幅に短縮できます。

nuxt.config.tsの設定方法

nuxt.config.tsのviteセクションに以下の記述を追加するだけで有効化できます。

nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorMaxWorkers: true, // CPUコア数 - 1 で並列処理を実行
    },
  },
})

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorMaxWorkers: true, // CPUコア数 - 1 で並列処理を実行
    },
  },
})

設定でコンパイル速度が変わる理由

NuxtではデフォルトだとSCSSをコンパイルする際、処理はシングルスレッド（1つのCPUコア）で実行されています。

そのため、大規模なプロジェクトで共通の変数・mixins（@use や @import）を無数のコンポーネントで参照している場合、どれだけスペックの高いマルチコアCPUを積んだパソコン（Apple SiliconやCore i7など）を使っていても、1つのコアだけに負荷が集中してしまいます。

preprocessorMaxWorkers: trueを指定すると、Workerスレッドを使ってSCSSのコンパイル処理を複数のCPUコアで並列実行するため処理時間を短縮できます。

プロジェクトの規模や開発環境のCPUコア数によって差は出ますが、SCSSを使用している環境だと、大規模サイトであればSCSSのコンパイルが倍以上速くなりますので、設定することをオススメします。

Nuxt: Preprocessor Workers