はじめに
こんにちは。Expressで頭パンクした、JS素人さんです。
webpackでPostCSSをどう使うかを見たい場合は「ほかのかたのすごい記事へ」ですね。
ではでは、なぜLessからPostCSSにお乗り換えするのか...
それは、だれでもさわれるプロダクトを目指しているからです。←受け売り。
そのひとつが、PostCSSにお乗り換えでした。
Lessは機能が多いので、
最低限のプラグインを入れて、PostCSS側で凝ったことができないようにします。
もちろん、今後はプラグインの追加は許容しません。(プラグインが亡くなって入れ換える沼地は極力さける方向)
また、いざというときに、bootstrapのサポートが始まる(？)Sassへの移行も視野に入っています。(白目)
ただひたすらに、PostCSSにお乗り換えする際の辛みだけでは業が深いので、
爆走と噂のwebpack+PostCSSのコンパイル速度Sassもついでに計ってみた次第です。はい。
使用したプラグイン
| プラグイン名 | 機能 | ドキュメント |
|---|---|---|
| postcss-import | @import 'path';が使える | postcss-import |
| postcss-nested | LessやSassのようなネストができる postcss-nestingもあるが、移行のしやすさを優先 |
postcss-nested |
| postcss-custom-properties | :root{--value-name: declaration;}で変数宣言 | postcss-custom-properties |
| postcss-calc | calc()の機能拡張 異なる単位(pxとemなど)でもよきタイミングで計算してくれる |
postcss-calc |
| postcss-mixins |
@define-mixin mixin-name {properties}; .class-name { @mixin mixin-name; } ミックスインはマルチクラスで対応していき、除去する予定 |
postcss-mixins |
| autoprefixer | 言わずもがな、われらがautoprefixer ベンダープレフィックスをつけてくれる |
autoprefixer |
postcss-cssnext + postcss-import で良いじゃないのかともおもいましたが、
cssnext は、なんだかんだいっていろんな事ができてしまうので、必要なプラグインを入れていきました。
(cssnext が悲しい終わり方をしていたり、、、
postcss-preset-env が出たりしていますが、、、)
現状とかとか
gulpタスクでLessをコンパイルして、autoprefixerでベンダープレフィックスをつけて、
吐き出したものをコピータスクでデプロイするためのディレクトリにコピーする流れと、
webpackでVueのビルドを行うときに、
コンポーネントのLessをコンパイルする流れがあります。
PostCSSにお乗り換えしたのはSPAなVueコンポーネントのスタイルです。
既存のLessでSMACSSぽくかかれていたもののうち、使用するファイルのみPostCSSに書き換えて別ディレクトリに移動しました。
Less使用時同様に各コンポーネントで使う分だけインポートします。
計測はVueコンポーネント分の差をみるために、
Lessをコンパイルして吐き出すgulpタスクをコメントアウトしました。
これで、gulp+Less以外のビルドはそのままで、
LessとPostCSSの速度差が計れるはず！
コンパイル速度の計測
キャッシュ(cache-loader)とdist以下を毎回消してからビルドするのを13回ずつ行い、平均をだしました。
結果
誤差が大きくて有意差はないもののLessが早かった。
早かったのである。
(Sassはまあ、あれですね。そういう子なので置いておきましょう。)
| Name | 平均(ms) | 標準誤差(ms) |
|---|---|---|
| PostCSS | 43679 | 2083 |
| Less | 42754 | 2626 |
え？
LessからPostCSSのミックスインの書き換えの虚しさはなんだったの？
大先生よりプラグインが多いのが原因じゃないかとも言っていただきました。
変数はCascading Variablesに書き換えすれば postcss-custom-properties 落とせるかな、、
IE11以前のやつらの対応はありますが、2020年で消せますね！(win10ユーザーが、edgeを使って欲しい思いで心が溢れそう)
一度CSS Level1~4の確認をしておこうかな。
何はともあれモジュールを載せていくと、実はLessのほうが早くなるようでしたので参考までに。
それにしてもwebpack3に怒られ過ぎて、新しい何かに目覚めそうだった。
機能制限はできるようなので、ひとまず良しとしよう！
そうしよう！
ちなみにnode v8とv10だとv10のほうがコンパイル速度が少し早くなって嬉しくなってました。