perf(css): webpack purge css

nuxt.config.js

@@ -1,3 +1,7 @@
+const path = require('path');
+const PurgecssPlugin = require('purgecss-webpack-plugin');
+const glob = require('glob-all');
+
 const purgecss = require('@fullhuman/postcss-purgecss');
 const pkg = require('./package');
 
@@ -192,11 +196,11 @@ module.exports = {
     langDir: 'lang/',
   },
 
-  // optimizedImages: {
-  //   mozjpeg: {
-  //     quality: 70,
-  //   },
-  // },
+  optimizedImages: {
+    mozjpeg: {
+      quality: 50,
+    },
+  },
 
   // storyblok: {},
 
@@ -243,6 +247,21 @@ module.exports = {
           exclude: /(node_modules)/,
         });
       }
+
+      if (!ctx.isDev) {
+        // Remove unused CSS using PurgeCSS. See https://github.com/FullHuman/purgecss
+        // for more information about PurgeCSS.
+        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'],
+          }),
+        );
+      }
     },
   },
 

package.json

@@ -70,6 +70,7 @@
     "eslint-config-prettier": "6.7.0",
     "eslint-plugin-nuxt": "0.5.0",
     "eslint-plugin-prettier": "3.1.2",
+    "glob-all": "3.1.0",
     "husky": "3.1.0",
     "imagemin-gifsicle": "6.0.1",
     "imagemin-mozjpeg": "8.0.0",
@@ -80,6 +81,7 @@
     "lqip-loader": "2.2.0",
     "nodemon": "2.0.2",
     "prettier": "1.19.1",
+    "purgecss-webpack-plugin": "1.6.0",
     "require-extension-hooks": "0.3.3",
     "require-extension-hooks-babel": "1.0.0",
     "require-extension-hooks-vue": "3.0.0",