PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
Post on:2019年9月26日
sponsors
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。
特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。
How to Remove Unused CSS
by Luca Spezzano
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。
未使用のCSSを削減しよう
私はしばらくの間、CSSファイルから未使用のスタイルを削除できるツールを探していました。なぜこの種のツールを探していたと思いますか？ 最近では、ほとんどのデベロッパーが多くのCSSフレームワークやライブラリを使用しているため、CSSファイルのサイズが肥大化することを避けられません。
しかし、それらのフレームワークやライブラリのCSSファイルで実際に使用するスタイルはどの程度でしょうか。時には、20%以下の場合もあります。使用しないスタイルはあなたのWebページに必要でしょうか。
PurgeCSSとは
PurgeCSSとは未使用のスタイルをCSSファイルから削除するためのツールで、制作のワークフローの一部として使用できます。
PurgeCSSの流れは、下記の通りです。
- クリーニングしたいCSSファイル
- そのCSSが適用されるHTMLファイル
- 生成された新規CSSファイルのパス
CSSファイル（1）からHTMLファイル（2）を検索し、そこから実際に使用したスタイルのみを持つ新しいCSSファイル（3）を生成します。
実際に試してみると、CSSのサイズを60%以上に削減できると思います。
追記（2020/1/20）
PurgeCSS 2.0が、2020/1/19にリリースされました。
主な変更点は下記の通りです。
- PurgeCSSの新しいバージョンはTypescriptで記述。
- PurgeCSSの以前のバージョンは同期して動作しましたが、新しいバージョンは非同期に動作します。これにより、実行時間が少なくなります。
- font-face, keyframeでの不具合に対応。
- CSS変数に対応。
- NodeJS <8のサポートをドロップ。
ビルドツール
PurgeCSSの素晴らしい点は、一般的な多くのビルドツールを使用して制作ワークフローに組み込めることです。
- CLI
- JavaScript API
- Webpack
- Gulp
- Rollup
JavaScriptフレームワーク
また、JavaScriptフレームワークでも使用できます。
- React
- Vue
- Next
- Nuxt
PurgeCSSの使い方
以前私は、gulpでCSSビルドプロセスをセットアップする方法について記事を書きました。その際に、PurgeCSSを使用しているので、ビルドプロセスに興味がある場合は参考にしてください。
参考: Setting up a CSS build process with Gulp
この記事では、PurgeCSSをgulpおよびNuxt.jsで実装する方法を説明します。その他のさまざまな実装方法については、PurgeCSSの公式ドキュメントをご覧ください。
PurgeCSSをgulpで実装する方法
最初に、npmまたはyarnでパッケージをインストールします。
|
1 |
npm i -D gulp-purgecss |
または、
|
1 |
yarn add gulp-purgecss |
gulpfile.jsで、追加したパッケージをインポートします。
|
1 2 |
const gulp = require('gulp'), purgecss = require('gulp-purgecss'); |
あとは、下記のようにタスクを作成するだけです。
|
1 2 3 4 5 6 7 8 9 10 |
gulp.task('purgecss', () => { return gulp .src('src/**/*.css') .pipe( purgecss({ content: ['src/**/*.html'] }) ) .pipe(gulp.dest('build/')) }) |
タスクを直列または連続して実行している場合は、HTMLファイルを生成した後にこのタスクを実行することを忘れないでください。そうしないと、タスクはエラーを生成してしまいます。
PurgeCSSをNuxt.jsで実装する方法
PurgeCSSがHTMLファイルを扱っているのを最初に見た時、動揺しました。私はNuxt.jsでさまざまなプロジェクトを開発しており、私にとってファイルを最適化することは非常に重要です。しかし、ドキュメントを読むと、PurgeCSSをReactやVueやNextやNuxtなどのJavaScriptフレームワークで実装できることが分かりました。
Nuxt.jsのプロジェクトでPurgeCSSを使用する方法を見てみましょう
最初に、下記のパッケージをnpmまたはyarnでプロジェクトにインストールします。
|
1 |
npm i --save-dev glob-all purgecss-webpack-plugin |
または、
|
1 |
yarn add glob-all purgecss-webpack-plugin |
nuxt.config.jsでインポートします（エクスポートのデフォルト以外）。
|
1 2 3 |
import PurgecssPlugin from 'purgecss-webpack-plugin' import glob from 'glob-all' import path from 'path' |
エクスポートのデフォルト内で、ビルド構成にこれを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
build: { extractCSS: true, extend(config, { isDev, isClient }) { if (!isDev && isClient) { config.plugins.push( new PurgecssPlugin({ paths: glob.sync([ path.join(__dirname, './pages/**/*.vue'), path.join(__dirname, './layouts/**/*.vue'), path.join(__dirname, './components/**/*.vue') ]), whitelist: ['html', 'body'] }) ) } } } |
これで完了です！
PurgeCSSを試して、ファイルからどれだけ削減できたか教えてください😉
また、メンテナンス性に優れ、拡張性を備えたCSSのコードを作成する方法に興味がある場合は、CSS方法論に関するこの記事をご覧ください。
参考: メンテナンス性に優れ、拡張性を備えたCSSを書くために -メンテナブルCSS
sponsors
