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を有効にする方法
- Viteをバージョン5.4.0以上に更新します。
sass
からsass-embedded
に切り替えます。npm uninstall sass; npm install -D sass-embedded
を実行してください。
待って – sass-embedded
って何?
Sassは Dart で書かれています。sass
パッケージは純粋なJavascriptにトランスパイルされ、sass-embedded
は同じAPIを公開しますが、ネイティブのDart実行ファイルを使用します。多くの状況で、sass-embedded
の方が高速です。
vite.config.js
ファイルで、css.preprocessorOptions.scss.api
をmodern-compiler
に設定します。
... css: { preprocessorOptions: { scss: { api: 'modern-compiler', } } } ...
注意:
インデント構文を使用している場合は、scss
の代わりにsass
キーを使用する必要があります。
legacy
APIオプションからmodern
APIオプションに調整します。私の場合、pkgImporter
をimporters: [new NodePackageImporter()]
に更新し、NodePackageImporter
のインポートをsass
からsass-embedded
に変更する必要がありました。
これで完了です。これでViteのコンパイル時間がさらに速くなるはずです!
WebpackでSass Compiler APIを有効にする方法
Webpackのsass-loader
もCompiler APIをサポートしています。
- sass-loaderをバージョン14.2.0以上に更新します。
sass
からsass-embedded
に切り替えます。npm uninstall sass; npm install -D sass-embedded
を実行してください。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倍の速度向上を見ています。増分的な開発ビルドも速くなるはずです。
あなたのプロジェクトでどのくらいの速度向上が見られるか、ぜひ教えてください!