Spark webpack.mix.js using BrowserSync and SSL kills CPU

I'm running MAMP Pro on a MacBook with a https://domain.test host. The SSL cert is self-signed created through MAMP. What is the appropriate way to use BrowserSync with this setup? Following the instructions to add this:

.browserSync('https://domain.test')

results in an EXTREMELY long initial page load, where the Safari Networking process spikes and kills Safari. Eventually after about a second the page loads and then the app is responsive, but if I have npm run watch running, the reload again takes another second, killing Safari again. This is my first foray into Laravel, Mix, and Spark (which has a 2.2 MB app.js file!), so I'm a little stumped. Seems there is some issue with BrowserSync finding the domain name? Loading the site directly through the host name works fine, it's the BrowserSync proxy which is the problem.

I've tried some other configs to no avail like including the browser-sync-webpack-plugin and adding config values to the webpackConfig block like so:

plugins: [
            new BrowserSyncPlugin({
                open: 'external',
                https: true,
                host: 'domain.test',
                proxy: 'https://domain.test',
                files: ['resources/assets/**/*.scss','resources/assets/**/*.js','resources/assets/**/*.php', 'app/**/*.php', 'routes/**/*.php']
            })
        ]

Still loads super slowly.

My webpack.mix.js looks like this, as created by Spark

let mix = require('laravel-mix');
let exec = require('child_process').exec;
let path = require('path');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
    .browserSync('https://foldingstory3.test')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .js('resources/assets/js/app.js', 'public/js')
    .copyDirectory('resources/assets/img', 'public/img')
    .copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
    .sass('resources/assets/sass/app-rtl.scss', 'public/css')
    .then(() => {
        exec('node_modules/rtlcss/bin/rtlcss.js public/css/app-rtl.css ./public/css/app-rtl.css');
    })
    .version(['public/css/app-rtl.css'])
    .webpackConfig({
        resolve: {
            modules: [
                path.resolve(__dirname, 'vendor/laravel/spark-aurelius/resources/assets/js'),
                'node_modules'
            ],
            alias: {
                'vue$': 'vue/dist/vue.js'
            }
        }
    });