Test 3

config/webpack.prod.config.js

@@ -14,7 +14,14 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const PostCssAutoprefixerPlugin = require('autoprefixer');
-const PostCssRTLCSS = require('postcss-rtlcss');
+ const PostCssRTLCSS = require('postcss-rtlcss');
+
+const purgecss = require("@fullhuman/postcss-purgecss");
+
+// Reduce CSS file size by ~70%
+// const { PurgeCSSPlugin } = require('purgecss-webpack-plugin');
+
+const glob = require('glob');
 
 const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic-plugin');
 const commonConfig = require('./webpack.common.config');
@@ -25,6 +32,10 @@ dotenv.config({
   path: path.resolve(process.cwd(), '.env'),
 });
 
+const PATHS = {
+  src: path.join(__dirname, 'src'),
+};
+
 const extraPlugins = [];
 if (process.env.ENABLE_NEW_RELIC !== 'false') {
   // Enable NewRelic logging only if the account ID is properly defined
@@ -106,6 +117,10 @@ module.exports = merge(commonConfig, {
                   PostCssAutoprefixerPlugin(),
                   PostCssRTLCSS(),
                   CssNano(),
+                  purgecss({
+                    content: ['./**/*.html', './**/*.js', './**/*.jsx'],
+                  }),
+
                 ],
               },
             },
@@ -185,6 +200,13 @@ module.exports = merge(commonConfig, {
     new MiniCssExtractPlugin({
       filename: '[name].[chunkhash].css',
     }),
+
+    // The recommend usage by official docs
+    // https://purgecss.com/getting-started.html
+    //    new PurgeCSSPlugin({
+    //      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
+    //   }),
+
     // Generates an HTML file in the output directory.
     new HtmlWebpackPlugin({
       inject: true, // Appends script tags linking to the webpack bundles at the end of the body