Magento 2: How to work with minified JS and CSS files

Question

I don't understand how minification is supposed to work for JS/CSS. My version is Magento 2.1.0

I found the setting in the configuration under Stores -> Configuration -> Advanced -> Developer where I can turn on minification. It tells me that this only works in production mode, so I turned on production mode and redeployed static content and compiled DI, and now my site is completely broken and most JS and CSS files are not found (404).

This is not surprising to me since the filenames are now different! What used to be myscript.js is now myscript.min.js in my pub/static folder, so no wonder that when the frontend tries to load myscript.js the file is not found.

What's the idea here? How am I supposed to be able to turn this on without breaking anything? Do I need to develop my modules and themes in a different way to account for this name change? How?

Answer 1

EDIT RECENTLY POSTED ON GITHUB Apparently this is a known issue. And my steps below were because I was in Developer Mode, although as of right now (12/01) I haven't had issues with the Admin after I minified the JS (again, no bundling).

I just recently had an attempt at this, I saw the same blank screen for a moment. So I went through my steps again, this time, making sure I was IN DEVELOPER MODE.

1. Disable the cache through command line.

2. Enable the minifying of css and js. (I did NOT enable bundling because I read a few negatives effects of bundling in Magento 2

3. In command line, AFTER the above step, make sure to clear all files from pub/static (except .htaccess), then clear all files from--> var/di var/generation var/cache

4. This may be overkill, but then clear cache using the command line.
5. Run compile command.
6. Run deploy command.
7. Enter into production mode from the command line.

I'm on Magento 2.1.2 installed through Softaculous with a purchased them installed and a custom child theme of that theme. JUST A NOTE Minifying the css will make it impossible to read in the inspector panels in Firefox and Chrome because you won't know where the css is coming from. As for JS, I'm not sure, but I would expect the same. Hope this helps.

Answer 2

In production-mode, it seems like neither grunt commands nor bin/magento setup:static-content:deploy nor clearing caches in magento admin is enough. It seems you need to execute all or some of these commands:

• Clear caches like rm -rf var/cache/* var/di/* var/generation/* var/page_cache/* var/view_preprocessed/* pub/static/frontend/*
• php bin/magento setup:upgrade
• php bin/magento setup:di:compile
• php bin/magento setup:static-content:deploy
• If you have a non-english site you need to deploy static-content for it as well since Magento defaults to en_US, do this with php bin/magento setup:static-content:deploy -l sv_SE (replace sv_SE) with your language.

I know for sure that running all of these commands generates a new minified CSS, but I am not sure which are necessary. Clearing caches are one necessary component for sure but it's not the only one.

If you have Varnish you need to restart varnish server varnish service restart.

Clear browser caches.

On our server it takes about 15 minutes to deploy a CSS change.

Answer 3

It's a common issue when you're using developer mode and have the minify configuration on. To fix it, only on local environment, please run the commands below:

bin/magento config:set dev/js/minify_files 0
bin/magento config:set dev/css/minify_files 0
bin/magento config:set dev/js/minify_files 0
bin/magento cache:flush
bin/magento setup:static-content:deploy --area=frontend en_US

You might want to replace en_US with your default language.