コフス技術ブログ

ホームに戻る
Powered by
ホーム
備忘録

sassOptionsのfiber指定しなくてもコンパイル速度の低下は許容出来そう

sassOptionsでnode-fibersが使われている古いプロジェクトのnodeのバージョンが上げられず、ちょっと困るという場面が最近増えてきました。

旬なプロジェクトであればあれやこれやとメンテナンスも行うのですが、年に数回しか触らない古いプロジェクトだと依存関係で消耗するのも億劫になってしまうものです。

node-fibersはnode v16との互換性がありません。使い続けるにはv16未満を維持しなければなりませんが、v16未満だと対応していないパッケージもちょこちょこ見かけます。
The Discontinuation of node-fibers: https://sass-lang.com/blog/node-fibers-discontinued

ncuを掛けてもnodeのバージョンが低すぎてyarn installで弾かれる場面も多くなってきました。全てはnode-fibersがnode v16に対応していない事が原因です。

一応代替オプションもあるようですが、代替オプションを模索するほどの時間もかけられませんし、ただただnode v16以降でも正常にコンパイルさえ出来ればOK、という気持ちです。

ということでnode-fibersがnode v16に対応していないのなら、いっその事コンパイル速度の低下を受け入れsassOptionsからfiber指定を取ってしまえば全て解決するのでは？という考えを持ちつつ、
実際に年数回しか触らない古いプロジェクトでfiberオプション指定の有無でどれだけコンパイル速度に違いが出るのか試してみることにします。

環境

測定環境は実際のプロジェクトでnode-fibersが動いている以下の2つのデバイスで計測します。

# MacBook Pro 2018 i9
$ node -v
v12.22.9

$ yarn -v
1.22.0

# M1 MacBook Air
$ node -v
v12.22.3

$ yarn -v
1.22.10

package.jsonは一部省略していますが以下の様な感じです。

package.json
{
  "browserslist": [
    "> 0.5% in JP"
  ],
  "devDependencies": {
    ...
    "autoprefixer": "^9.0.0",
    "css-declaration-sorter": "^5.1.2",
    "css-mqpacker": "^7.0.0",
    "cssnano": "^4.1.10",
    "fibers": "^5.0.0",
    "gulp": "^4.0.2",
    "gulp-postcss": "^9.0.0",
    "gulp-sass": "^4.1.0",
    "sass": "^1.30.0",
    ...
  }
}

sassのコンパイルは懐かしきgulpを使用したタスクランナーでのソースマップ書き出し有りを使用します。

  const scss = () => {
    return gulp
      .src('src/**/*.scss', { sourcemaps: true })
      .pipe(
-       sass({ fiber: Fiber, outputStyle: 'compressed' })
+       sass({ outputStyle: 'compressed' })
          .on('error', sass.logError)
      )
      .pipe(
        postcss([
          autoprefixer({ grid: true }),
          mqpacker(),
          cssnano({ autoprefixer: false }),
          cssDeclarationSorter({ order: 'smacss' })
        ])
      )
      .pipe(gulp.dest(setting.io.output.css, { sourcemaps: '/maps' }))
      .pipe(gulpif(browserSync.active === true, browserSync.stream()))
  }

ちなみにコンパイル対象のsassファイルは総行数22748の中程度の規模感です。
実際の作業時の速度を知りたいのでPostCSSのプラグインもそのまま指定した状態で計測します。

watchなしの単発でのコンパイル速度

gulp.watchではなく毎回単体でコンパイルした際の速度です。

MacBook Pro 2018 i9

MacBook Pro 2018 i9の場合、fiber指定無しだと約0.8s程遅くなるようですがまぁ許容範囲内です。

fiber指定有り(s) fiber指定無し(s)
1回目 3.25 4.46
2回目 3.71 4.34
3回目 3.8 4.53
4回目 3.88 4.29
5回目 3.63 4.53
平均 3.654 4.430000000000001

M1 MacBook Air

M1 MacBook Airの場合、fiber指定無しだと約1s程遅くなるようですがこちらもまぁ許容範囲内です。ただnode v15未満はarm版に未対応なのでRosetta2を経由する為若干MacBook Pro 2018 i9より遅めです。

fiber指定有り(s) fiber指定なし(s)
1回目 4.72 5.53
2回目 4.21 5.72
3回目 4.27 5.16
4回目 4.29 5.09
5回目 4.26 5.22
平均 4.35 5.343999999999999

watch有りのファイル保存時のコンパイル速度

gulp.watch有りで主にローカル開発時のファイル保存時にコンパイルされる際の速度です。

MacBook Pro 2018 i9

MacBook Pro 2018 i9の場合、fiber指定無しだと約0.3s程遅くなるようですがこちらも許容範囲内な速度です。watchオプションなので回数を重ねるとコンパイル速度もfiber指定有りと比べても大差は無さそうです。

fiber指定有り(s) fiber指定無し(s)
1回目 3.6 4.07
2回目 2.63 2.94
3回目 2.04 2.38
4回目 1.77 2.03
5回目 1.92 2.23
平均 2.392 2.73

M1 MacBook Air

MacBook Pro 2018 i9の場合、fiber指定無しだと約0.4s程遅くなるようですがこちらも許容範囲内な速度です。

fiber指定有り(s) fiber指定なし(s)
1回目 4.29 5.35
2回目 2.59 3.01
3回目 1.67 2.03
4回目 1.5 1.81
5回目 1.42 1.66
平均 2.294 2.772

sassOptionsのfiber指定なくてもコンパイル速度の低下の具合は許容範囲内

上記結果からfiber指定無しでもコンパイル速度の低下具合は許容範囲内という結果が得られたので、fiber指定が無くても動く環境であれば無くても良さそうだという事が分かりました。

特にwatch有りだとfiber指定有りの時とほぼ変わらないコンパイル速度なので、ローカル開発時のコンパイル待ち時間への影響は微々たるものでした。

逆にfiber指定を維持してnode-fibersの為にnodeのバージョンが上げられない方がデメリットが大きいはずですので、コンパイル速度低下はあまり気にせずfiber指定は取ってしまってOKと言えそうです。

ホームへ戻る