POSTCSSを使えばCSSのビルドを行うことができます。本番環境向けにminify化するには「cssnano」というプラグインを使用します。
インストール
|
1 |
npm i -D cssnano |
設定
postcss.config.js
POSTCSSのcssnanoを追加します。
|
1 2 3 4 5 6 7 8 9 |
module.exports = (ctx) => { return { plugins: { tailwindcss: {}, autoprefixer: {}, cssnano: ctx.env === "production" ? {} : false, }, }; }; |
package.json
devが開発環境向けのビルド、buildが本番環境向けのビルドを想定します。
|
1 2 3 4 |
"scripts": { "dev": "postcss style.css -o dist.css", "build": "NODE_ENV=production postcss style.css -o dist.css" }, |
ビルド
開発環境向けビルド
POSTCSSの設定で開発時はminify化させていないので以下のコマンドを実行するようにします。開発時はminifyがない方がビルド時間が短くなりますし、読みやすくなって開発しやすくなるので基本的にはminify化しない方が良いためです。
|
1 |
npm run dev |
本番環境向けビルド
以下のコマンドでビルドをしたらビルド結果がminify化されて出力されています。
|
1 |
npm run build |
CSS圧縮の他の選択肢
- 圧縮サイトを使う。
- vscodeのプラグインを使う。
デザイナーさんなどのコーディング環境を考慮して、いまだに非npm環境ならアリかもしれないです。
minify化のメリット
ページの表示速度向上
特にネット回線が弱弱な環境では重要です。コンマ何秒の表示速度の違いがユーザーの離脱につながったりします。Googleが行なっている計測ツールではminify化するかしないかで数秒縮まるサイトもあったようです。
サーバーの容量節約
少しでも節約したいです。どんどんサイトのコンテンツは増えていくのでできるだけ少ない方が良いです。
ソースコードの解読を難しくし盗用防止
今はdeveloperツールが便利で整形などもできるのであまり大したメリットではないかもですが。
この記事へのコメントはありません。