Nuxt.js + Vuetify.js + PurgeCSS

はじまり

Nuxt.js + Vuetify でいい感じのページできた！
SSGでホスティングサイトへシュゥゥゥーッ!!
超!でかいCSS!!（絶望）

PurgeCSS

これがヒントになった。なにが幸いするかわからん。

設定

下記のページを参考にして設定書いたら（というかとりあえずコピペ）Vuetify絡みのCSSのサイズ1/3くらいになりました。
最適化の余地は全然あるけどとりあえずいいか…

• PurgeCSSの公式
• Gridsome, Vuetify, PurgeCSS を使ってブログサイトを作ってみた

nuxt.config.js

  purgeCSS: {
    enabled: ({ isDev }) => !isDev,
    paths: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      './node_modules/vuetify/dist/vuetify.js'
    ],
    styleExtensions: ['.css'],
    // whitelist: ['body', 'html', 'nuxt-progress', ''],

    whitelist: ['v-application', 'v-application--wrap','layout','row','col'],
    whitelistPatterns: [
      /^v-((?!application).)*$/,
      /^theme--*/,
      /.*-transition/,
      /^justify-*/,
      /^p*-[0-9]/,
      /^m*-[0-9]/,
      /^text--*/,
      /--text$/,
      /^row-*/,
      /^col-*/,   
    ],
    whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],
    
    extractors: [
      {
        extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
        extensions: ['html', 'vue', 'js']
      }
    ]
  },