I found a solution that small SPA sites can use and that works great.
- Install purgecss separately
npm i --save-dev purgecss
- We use the prerender-spa-plugin. And vue.config.js looks like this now
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
let plugins = [];
if (process.env.NODE_ENV === 'production') {
plugins = [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: [
'/',
],
}),
];
}
module.exports = {
pluginOptions: {
quasar: {
importStrategy: 'kebab',
rtlSupport: false,
},
},
transpileDependencies: [
'quasar',
],
configureWebpack: {
plugins,
},
};
- Create purgecss.config.js
module.exports = {
content: ['./dist/index.html', './dist/**/*.html', './dist/js/*.js'],
css: ['./dist/**/*.css'],
output: ['./dist/css/'],
keyframes: true,
variables: true,
};
- edit package.json in scripts section
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build && purgecss --config ./purgecss.config.js",
"lint": "vue-cli-service lint"
},
This method works perfectly (the css file has decreased from almost 200 to 15kb, ideally leaving only the css that is needed), but will not work for large sites with changing content.
@dobbel said in Removing unused CSS via purgecss-webpack-plugin:
Sure, but does it work?
I’ll try it now, but in any case, you cannot use this command
path.join(__dirname, './node_modules/quasar/src/components/**/*.js'),
Since then all js files from all components will be checked - and this makes no sense, since all CSS properties will be exported, even those components that I do not use.
Today I will think about what can be done about it.