Ускорение компиляции Sass в Vite и Webpack

Vite поставляется со встроенной поддержкой Sass, а также других CSS-препроцессоров. Просто установите npm sass, импортируйте файл .scss, и он заработает.

Однако в этом была своя загвоздка. При каждом импорте Sass новый экземпляр Sass запускается, компилируется и завершается. Если у вас есть один импортированный файл точки входа Sass, импортирующий другие файлы Sass, это не так уж и важно. Но если используется однофайловый компонент(SFC) Vue с lang="scss", то для каждого SFC создавался новый экземпляр Sass.

Это может привести к большим потерям времени.

В начале этого года OddBird помог Sass добавить новый Compiler API, позволяющий повторно использовать один экземпляр Sass для нескольких компиляций. Хотя можно использовать новый API в собственных настройках компиляции Sass, было приятно увидеть, что команда Vite добавила его поддержку в версии 5.4.0.

Как включить Sass Compiler API в Vite

1. Обновите Vite до версии 5.4.0 или выше.

2. Перейдите с sass на sass-embedded, выполнив npm uninstall sass; npm install -D sass-embedded.

3. В файле vite.config.js установите для параметра css.preprocessorOptions.scss.api значение modern-compiler.

   ...
   css: {
     preprocessorOptions: {
       scss: {
         api: 'modern-compiler',
       }
     }
   }
   ...

4. Настройте все параметры из легаси API на параметры современного API. В моем случае нужно было обновить pkgImporter на importers: [new NodePackageImporter()] и изменить импорт NodePackageImporter с sass на sass-embedded.

И всё готово. Теперь компиляция Vite станет ещё быстрее!

Как включить Sass Compiler API в Webpack

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-кратного улучшения скорости. Инкрементные dev-сборки также должны стать быстрее.