How can I minify CSS and JS files on my website?

[salamseo]

Hi, 

The CSS and JS files of my website, which are being served from the Shopify CDN, are not being minified. Here is the URL of the page: https://devotionweddingdresses.com/products/nava, and here is the URL of the reference file URL(https://devotionweddingdresses.com/cdn/shop/t/10/assets/cart.js?v=152621234464311990471682678671) being served from the CDN, but it is not minified.

I need assistance in minifying the CSS and JS files.

[NomtechSolution]

it can be minfied using toptal website. By using that website, css and js can easily minfied

[salamseo]

But what about the automatic minification of CSS and JS files that Shopify explains in the following documents:

• https://shopify.dev/docs/themes/best-practices/performance/platform#:~:text=Files%20delivered%20over...
• https://shopify.dev/changelog/shopify-now-serves-minified-css-files-automatically

Why my files are not automatically minified?

[NomtechSolution]

it needs to minify manually

[maxbruhn]

If you look at the top of your file it says:

/** Shopify CDN: Minification failed

Line 16:0 Transforming class syntax to the configured target environment ("es5") is not supported yet
Line 17:13 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
Line 22:6 Transforming const to the configured target environment ("es5") is not supported yet
Line 30:0 Transforming class syntax to the configured target environment ("es5") is not supported yet
Line 31:13 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
Line 35:4 Transforming const to the configured target environment ("es5") is not supported yet
Line 44:19 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
Line 53:22 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
Line 59:10 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
Line 63:14 Transforming object literal extensions to the configured target environment ("es5") is not supported yet
... and 32 more hidden warnings

**/

 
Shopify can't minify es6 as of today (Aug 2023)

[stijns96]

Is there a staff member who can share why Shopify is still targeting es5 while using es6?

For now we will stick with es6, because http2 is fast enough to process these types of files. Converting them to es5 makes the files much larger than they need to be for modern browsers.

Since I can not really find any git repo for this, I'll post this comment here.

[mmarienko]

I've created a repo that solves this issue for Dawn theme: https://github.com/mmarienko/shopify-gulp-theme using Gulp 4 and Babel (+ Tailwind). You can use it as a reference or as your starting point. 

I'll be glad if you star or fork the repository.