Next.js 14.2がリリースになったので、Turbopackで採用されたLightningCSSをキャッチアップしてみる
はじめに
アイディオットDX開発部の中川です。
つい先日Next.js 14.2がリリースされたということで
フロントエンドの最新を追っている弊社として
Webpack後継のTurbopackの高速化にLightningCSSが寄与している点に注目し
現在の状況をまとめてみました。
参考 NextJS 14.2リリースノート：
注意
4/25現在でTurboPackのbuildは商用向けに使える状態までテスト通過はしていないようです。
ビルドツールとしてのテスト通過状況は下記から確認できます。
（Production:NOと表示されていますね！）
これまでとの違い
TailwindCSS v3.4からOxideというツール群の中にLightningCSS自体は採用されていました。
しかしNext.jsでそれを使う際にはNext側が非対応のため next dev コマンドでは速度のアドバンテージが
発揮できない状態でした。
それが next dev --turbo コマンドを使うことによってTurboPackではLightningCSSの恩恵を受けることができます。
LightningCSSの特徴とメリット
・ビルドサイズがESBuildに比べて約90％ほど小さい
・ビルド時間がCSSNanoと比べて100倍、ESBuildと比べて４倍の速さ
・Rust製
ネスト記述
LightningCSSの導入によって下記のようなネスト記述が可能です。
対応ブラウザ全てにおいて、ビルド後は非ネスト状態にて出力されます。
ビルド前
.foo {
color: blue;
.bar {
color: red;
}
}
ビルド後
.foo {
color: blue;
}
.foo .bar {
color: red;
}
light-dark関数
ブラウザにて使用されているテーマによって
CSS一行で書き分けられる関数が新たに追加されました。
html {
color-scheme: light dark;
}
html[data-theme=light] {
color-scheme: light;
}
html[data-theme=dark] {
color-scheme: dark;
}
button {
background: light-dark(#aaa, #444);
}
Minify処理
LightningCSS ではビルド時のMinify時に主に以下の処理が行われます。
重複prefixの除去
minify前
.button {
-webkit-transition: background 200ms;
-moz-transition: background 200ms;
transition: background 200ms;
}
minify後
.button{transition:background .2s}
値の正規化
minify前
.foo {
background: 0% 0% / auto repeat scroll padding-box border-box red;
}
minify後
.foo{background:red}
UnoCSSとの組み合わせ
UnoCSSについて知りたい方はこちら
TailwindCSSによるClass記述が煩雑になりやすいということで
最近注目されているUnoCSSですが、LightningCSSによるビルドと組み合わせる
Exampleがありましたのでこちらを参考に組むと良さそうです。
GitHub:Vite＋UnoCSS＋LightningCSS
最後に
いつの間にViteやNext.js、TailwindCSSに含まれていたLightningCSSですが
今回のNext.js 14.2の速度改善に大きく貢献しているようだったため
取り上げてみました！
今後もNext.js周辺に含まれる技術を深掘りしていきたいと思います。
あとがき
AI・データ利活用をリードし、世界にインパクトを与えるプロダクトを開発しませんか？
アイディオットでは、今後の事業拡大及びプロダクト開発を担っていただけるエンジニアチームの強化を行っております。
さらに会社の成長を加速させるため、フロントエンドエンジニア、バックエンドエンジニア、インフラエンジニアのメンバーを募集しております！
日本を代表する企業様へ自社プロダクトを活用した、新規事業コンサルティング、開発にご興味のある方はお気軽にご連絡ください。
【リクルートページ】
https://aidiot.jp/recruit/
【募集ポジション一覧】
https://open.talentio.com/r/1/c/aidiot/homes/3925
【採用についてのお問合せ先】
株式会社アイディオット 採用担当：佐藤
Discussion