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

cssmagento-2.1magento2minified-jsperformance

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?

Best Answer

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.

Related Topic