Nuxt +VuetifyのプロジェクトにPurgeCSSを導入する
先日、仕事で触ってるプロジェクトにPurgeCSSを導入したら思った以上のcssサイズ削減にびっくりした。
そのプロジェクトは、semantic uiが導入されているプロジェクトで、PurgeCSSとの相性がいかがなものかと思って、半信半疑で導入したが、ライブラリのcssよりもアプリケーション側のcssに無駄が多かったらしく1/4程度の削減ができていた。
以下は手元のNuxt +VuetifyプロジェクトにもPurgeCSSを導入したときのメモ。
^で触れたプロジェクトはpostcss-purgecssの方を使ったが、今回はnuxt-purgecss というモジュールを使った。 code:install
yarn add --dev nuxt-purgecss
次に paths にVuetifyのsrc以下のコンポーネントを指定する。こうすることで、Vuetifyのコンポーネントに対してもPurgeCSSが適用される。デフォルトに対して置き換えか、追加するかは examples のようにArrayに対して値を追加するか、callbackを渡すかの違いで選択できる。 code:nuxt.config.ts
purgeCSS: {
paths: [
'node_modules/vuetify/src/**/*.ts',
],
},
問題は whitelist の設定で、これをミスると必要なCSSまで削られて、見た目が盛大に崩れることになる。
特にユーティリティ系のclassは注意が必要。color系は /^theme--*/ でだいたい救えた。
code:nuxt.config.ts
whitelistPatterns: [
/^v-((?!application).)*$/,
/^theme--*/,
/.*-transition/,
/^justify-*/,
/^m*-auto/,
/^p*-auto/,
/^text--*/,
/--text$/,
/^row-*/,
/^col-*/,
/^d-*/,
],
最終的には以下の感じに落ち着いた。
code:postcss.config.js
buildModules: [
'@nuxt/typescript-build',
'@nuxtjs/stylelint-module',
'@nuxtjs/vuetify',
'nuxt-purgecss',
],
purgeCSS: {
enabled: true,
whitelistPatterns: [
/^v-((?!application).)*$/,
/^theme--*/,
/.*-transition/,
/^justify-*/,
/^m*-auto/,
/^p*-auto/,
/^text--*/,
/--text$/,
/^row-*/,
/^col-*/,
/^d-*/,
],
},
nuxt-purgecss のデフォルトでは、env === 'dev' のときはpurgecssが無効になるので、開発時(PuregeCSSの導入時)は明示的にenableにしてレイアウトに崩れが無いかなどを確認する必要がある。 結果的に SSGしているindex.htmlで 約1/2のサイズを削減できた。
code:result.sh
du -k ./dist/index.html
436 ./dist/index.html
du -k ./dist/index.html
220 ./dist/index.html