How do I disable minification for pre-optimized-min items in my theme?

Question

Sitecore/SXA 10.2

I find it very difficult to know exactly which part of my code is broken when the theme scripts are mangled beyond my comprehension. What can I do to improve this experience?

Take for example this piece of code:

Minified

Original

Note: I'm using a CDN which handles the minify process in production.

Answer 1

There may be other options available, but the easiest I found begins in the config.js included with the SXA theme. Making the configuration changes below will result in a pre-optimized-min file bundled with the variable/function names intact.

Here is the original minifyOptions provided:

minifyOptions: {
    js: {
        compress: {
            hoist_funs: true,
            passes: 1
        },
        toplevel: false
    },
    css: { compatibility: 'ie8' }
}

Here is the updated minifyOptions:

minifyOptions: {
    js: {
        compress: false,
        mangle: false,
        toplevel: false
    },
    css: { }
}

Note: SXA makes use of the npm-uglify-es and npm-clean-css packages.