How to compact + uglify + strip unused CSS and JS for Production Deploys?

Do any folks have experience with production deploys? I'd like to do the following on production, to discourage people from copying the front end source code, and also to keep the file sizes as tight as possible. Here are my requirements:

CSS (both inline CSS as well as CSS in files included using <link href="css/libs/app.css">)

1. Strip all whitespace and comments from my CSS
2. Change all CSS rules and classnames from clean names to ugly names, like ".testimonials_content" to ".xhdy3672" (this would need to modify the CSS rules in the HTML / Blade templates too)
3. (If possible) remove unused CSS rules that are not referenced

JS (both inline JS in HTML using tags as well as JS in files included using <script src="js/libs/app.js"></script>>)

1. Strip all whitespace and comments from my JS
2. Change all JS variables and function names from clean names to ugly names, like "SwipeSlide()" to "xswjnd28()" (this would need to modify the JS rules in the HTML / Blade templates too)
3. (If possible) remove unused JS code that is not referenced.

I'm currently using Laravel Mix (wrapper for Webpack). My webpack.mix.js file looks like this:

const mix = require('laravel-mix');
require('laravel-mix-tailwind');

mix.options({
/*
    purifyCss: true // removes unused CSS, Buggy. DO NOT USE
*/
    clearConsole: true, // in watch mode, clears console after every build

});

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/test.scss', 'public/css');

I'm not very familiar with Webpack, but in my experience, using Laravel Mix with 'purifyCss=true' did not work. I do need something that would hit all of the use cases above 9for both the CSS and JS). Is this possible with Laravel Mix, and what have you ben doing to solve for this?