Настройка PurgecssPlugin в Vue cli + Quasar

Question

Имеем VUE CLI + quasar (но это я думаю не сильно важно, что-то мне подсказывает что подобная проблема будет при использовании любого material framework). Почти дефолтный проект. https://gitlab.com/arogonov/vue3-quasar-test

Задача - при помощи PurgecssPlugin удалить при сборке неиспользуемый css. Имеем вот такой vue.config.js

const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const path = require('path');

let plugins = [];

if (process.env.NODE_ENV === 'production') {
  plugins = [
    new PurgecssPlugin({
      paths: glob.sync([
        path.join(__dirname, './src/**/*.vue'),
        path.join(__dirname, './src/**/*.js'),
      ]),
      extractors: [
        {
          extractor: (content) => content.match(/[A-Za-z0-9-_:\/]+/g) || [],
          extensions: ['html', 'vue', 'js'],
        },
      ],
      whitelistPatterns: [
        /data-v-.*/,
      ],
    }),
  ];
}
module.exports = {
  pluginOptions: {
    quasar: {
      importStrategy: 'kebab',
      rtlSupport: false,
    },
  },
  transpileDependencies: [
    'quasar',
  ],
  configureWebpack: {
    plugins,
  },
};

и вот такой HelloWorld.vue

<template>
  <q-page class="flex flex-center">
    <div class="q-pa-sm bg-red">
      <q-icon name="fas fa-hand-scissors"></q-icon>
      Quasar style
    </div>
    <div class="styleRegular">
      <i class="fas fa-hand-peace"></i>
      Style regular
    </div>
    <div class="styleScoped">
      styleScoped
    </div>
  </q-page>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>

<style>
.styleRegular{
  background-color: #ff0000;
  padding: 10px;
}
</style>

<style scoped>
.styleScoped{
  background-color: #ffff00;
  padding: 10px;
}
</style>

После сборки получаем вот это https://friendly-turing-742683.netlify.app/

Получилось

Css из Quasar который мы в прямую использовали в HelloWorld.vue (class="q-pa-sm bg-red")
Css из неScoped блока (class="styleRegular")

Не получилось

Css свойства которые используются внутри Quasar компонентов и в ./src не присутствующие.
Css из Scoped блока (class="styleScoped") хотя в настройках PurgecssPlugin у меня есть /data-v-.*/ в whitelistPatterns (нагуглил такое решение, но что-то не работает).

Подскажите куда смотреть чтобы всё получилось. Спасибо!

UPD 09.02.2021 Нашёл промежуточное не очень надёжное решение - запускать purgecss после сборки в папке dist.

Устанавливаем purgecss отдельно npm i --save-dev purgecss
Создаём purgecss.config.js

module.exports = {
  content: ['./dist/js/*.js'],
  css: ['./dist/css/*.css'],
  output: ['./dist/css/'],
  keyframes: true,
  variables: true,
  safelist: {
    standard: [/fixed-.*/],
  },
};

редактируем package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build && purgecss --config ./purgecss.config.js",
    "lint": "vue-cli-service lint"
  },

Получаем то, что хотели. Во всяком случае на дефолтном проекте. Но даже в этом случае purgecss промохал свойство fixed-top которое пришлось внести в safelist. Так что в боевых условиях придется тестировать очень плотно из-за боязни потери еще каких-то свойств.

Для маленьких SPA проектов, можно сделать вполне надежный вариант - использовать prerender-spa-plugin и в purgecss.config.js в поле content внести html файлы. Тогда получается все очень хорошо и красиво - поле safelist можно убирать, работает отлично. Но что делать для крупных проектов, где все рендерить заранее не вариант, непонятно. Буду признателен за наводку.

БЛОГ НА HUSL

Настройка PurgecssPlugin в Vue cli + Quasar

Ответы (0 шт):