コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > CSS > Sassのビルドが遅い？そんなときは最大8倍高速な【sass-embedded】を使ってみよう。

Sassのビルドが遅い？そんなときは最大8倍高速な【sass-embedded】を使ってみよう。

CSS Sass Vite WebPack

Speeding Up Your Sass Compilation in Vite and Webpack

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

Sassのコンパイルはビルドの速度低下の原因となることがありますが、もはやそうである必要はありません。

Viteには、Sassやその他のCSSプリプロセッサのサポートが組み込まれています。単にnpm install sassを実行し、.scssファイルをインポートするだけで動作します。

しかし、これには一つの問題がありました。Sassのインポートごとに、新しいSassのインスタンスが起動し、コンパイルし、終了していました。単一のインポートされたSassのエントリーポイントファイルが他のSassファイルをインポートしている場合、これは大きな問題ではありません。しかし、Vueのシングルファイルコンポーネント（SFC）でlang="scss"を使用している場合、SFCごとに新しいSassインスタンスを起動していました。

これは積み重なると大きな影響となります。

今年の初め、OddBirdはSassに新しいCompiler APIを追加する支援をしました。これにより、複数のコンパイルに対して単一のSassインスタンスを再利用できるようになりました。独自のSassコンパイル設定で新しいAPIを採用することもできますが、私たちはViteチームがバージョン5.4.0でサポートを追加したのを見て興奮しました。

ViteでSass Compiler APIを有効にする方法

  1. Viteをバージョン5.4.0以上に更新します。
  2. sassからsass-embeddedに切り替えます。npm uninstall sass; npm install -D sass-embeddedを実行してください。

待って – sass-embeddedって何？

Sassは Dart で書かれています。sassパッケージは純粋なJavascriptにトランスパイルされ、sass-embeddedは同じAPIを公開しますが、ネイティブのDart実行ファイルを使用します。多くの状況で、sass-embeddedの方が高速です。

  1. vite.config.jsファイルで、css.preprocessorOptions.scss.apiをmodern-compilerに設定します。
...
css: {
  preprocessorOptions: {
    scss: {
      api: 'modern-compiler',
    }
  }
}
...

注意： インデント構文を使用している場合は、scssの代わりにsassキーを使用する必要があります。

  1. legacy APIオプションからmodern APIオプションに調整します。私の場合、pkgImporterをimporters: [new NodePackageImporter()]に更新し、NodePackageImporterのインポートをsassからsass-embeddedに変更する必要がありました。

これで完了です。これでViteのコンパイル時間がさらに速くなるはずです！

WebpackでSass Compiler APIを有効にする方法

Webpackのsass-loaderもCompiler APIをサポートしています。

  1. sass-loaderをバージョン14.2.0以上に更新します。
  2. sassからsass-embeddedに切り替えます。npm uninstall sass; npm install -D sass-embeddedを実行してください。
  3. webpack.config.jsで、sass-loaderルールのoptions.apiをmodern-compilerに設定します。
...
{
  loader: "sass-loader",
  options: {
    api: "modern-compiler",
  },
}
...

メリット

ここでのメリットは、プロジェクトによって大きく異なります。私たちのコードベースでは、小規模なプロジェクトでvite buildの時間が約4.7秒から約3.9秒に、大規模なプロジェクトで約5.9秒から約3.8秒に改善されました。他の人々は最大8倍の速度向上を見ています。増分的な開発ビルドも速くなるはずです。

あなたのプロジェクトでどのくらいの速度向上が見られるか、ぜひ教えてください！

©コハム