5

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?

| improve this question | |
  • please run command , php bin/magento setup:static-content:deploy – Rakesh Jesadiya Sep 1 '16 at 8:53
  • 1
    Please read my question carefully, I explicitly said that I "redeployed static content". In fact, that's exactly what caused my described problem. – peedee Sep 1 '16 at 8:55
  • I also facing same issue..Are u solve this issue? can u help me – Mahi M Aug 11 '18 at 4:38
  • Sorry, I haven't worked with Magento for over a year. – peedee Aug 13 '18 at 12:54
  • @peedee, could you please advise as to what needs to be done to fix the issue with JS/CSS? I ran all the commands that I knew should have been run after saving the settings. – CodeForGood Mar 26 at 17:12
2

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.

| improve this answer | |
  • You shouldn't need to read your source in a production environment. Which is the only time you should need to enable minification. – TheNorthern_Light Oct 20 '17 at 21:48
  • 1
    Great comment, completely unhelpful. I'll give you the benefit of the doubt that you're not a young lonely troll looking for attention (since you didn't post an answer). BUT, re-read the answer. There was NO suggestion that source code SHOULD be read in production mode. And there is no "ONLY time you should need to enable minifcation". Developer mode ignores minification I believe (but I could be wrong on that). – Jason Oct 20 '17 at 22:00
  • 1
    Sorry, your right that did sound troll'ish, and I apologize. Wasn't meant that way. Just pointing it out for anybody else who might come across this and is new to M2. That was my only focus of the comment. – TheNorthern_Light Oct 21 '17 at 3:49
  • Also, as per a test I was running today, minification DOES have an effect in developer mode. Thats actually how I came across this thread. I have a reactive theme that for the most part works perfectly. However, as soon as I enable minification, some of my mobile specific theme components revert to the unmodified settings of the original theme. I'm pretty sure its due to a theme.min file somewhere that I havn't edited, the problem is identifying the offending file while min is enabled, since the only trace method I know of is grunt, and it doesn't work on minified files. – TheNorthern_Light Oct 21 '17 at 4:03
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.

| improve this answer | |
  • 1
    Maybe it is good to mention that sometimes checking user permissions in the end is necessary. Something like chown -R www-data:www-data path-to-shop/ should be done, if the user who is running the commands is different from the www user. – sagacity Oct 12 '17 at 16:56
0

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.

| improve this answer | |
  • I ran the command you shared that lead to further issues with JS/CSS. Could you please tell me how to reverse what these commands would have done? – CodeForGood Mar 26 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.