1

I'm doing a project using ApostropheCMS and I have a few questions about the module called apostrophe-assets.

  1. I have a pretty big css file ( > 1MB). I noticed that 30% of this file include a comment added in a master-anon.css.map file. I wonder if I can set some option that I want to exclude .map.css files? This file was generated by apostrophe. If not, can someone tell me why apostrohe generate this file and why it's needed?

  2. Can I minify my CSS file? I know there is a option minify: true, but I want to minify only my css files, not all assets (css + js).

justyna
  • 21
  • 6
  • Is there a particular reason you don't want to minify all of your assets? Anything that apostrophe-assets is creating will be needed to run your side, so its generally better to have Apostrophe minify and bundle them than to have your site load tons of individual, unminified files. – Joseph Mar 30 '21 at 20:59

1 Answers1

1

Apostrophe-assets is used to bundle and minify any JS/stylesheet assets needed by Apostrophe modules (including your own) to run Apostrophe in the browser.

You are correct that you can use the minify: true flag on the options of apostrophe-assets to tell apostrophe to combine and minify any scripts and stylesheets you specify using pushAsset:

self.pushAsset('script', 'always', {when: 'always'})

The purpose behind this functionality in apostrophe-assets is to minify all of your assets and bundle them into individual files in order to decrease browser load (a single file as opposed to loading each asset individually). It makes a very large difference in load speed for a site.

You definitely don't want to stop apostrophe-assets from including its files, because the stuff it builds into the bundled stylesheet and JS files are needed in order to run Apostrophe in the browser. However, there's nothing that forces you to allow Apostrophe to minify the file for you. If you don't include the file in the asset bundle using pushAsset, Apostrophe won't touch your file at all. There isn't another built-in way to handle minification, however - you'd need to use webpack or another utility to minify your individual stylesheet separate from Apostrophe, and you'd likely want to include it in your outerLayout.html file in the head section.

As a general rule though, its usually much easier and better to just let apostrophe-assets handle your CSS file via pushAsset and minify: true when you're ready to deploy to production. Its generally standard procedure to let the assets be larger and turn minification off during development, since asset size doesn't matter nearly as much then. Also, if you specify minify: true, those map comments shouldn't be included in the bundled .css files that are generated.

Joseph
  • 865
  • 5
  • 20
  • Our usual practice is to let it be larger while developing, then use `minify: true` in the production environment. Of course you can always turn on minification locally to review what it will be before deploying. – alexbea Mar 31 '21 at 20:49
  • Thanks @alexbea - I'll make that clearer in my answer! – Joseph Apr 01 '21 at 05:40
  • It's a great explanation. – alexbea Apr 01 '21 at 17:22