I’d like to optimize my production site so that for instance css-files are load-time-optimized (reduced to one file, unused rules removed, …) In order to transform those css files from Sass to production level I use a number of gulp transformations.
It would be great, if I could have in my templates a condition, that renders different links to css and js reccources.
On dev I would like to see rather the unmerged files to efficiently identify where some problem occurs.
On test and dev I would like to have the merged/optmized files linked.
How could this be done?
You could use https://github.com/jonnitto/Carbon.IncludeAssets/#readme:
- Put it in your site package composer as a dependency.
- Create the files
- In these files, you can set the configuration.
[details=Example for Production]```
- GeneralHead.min.js[async defer]
- GeneralBody.min.js[async defer]
[details=Example for Development]```
- GeneralHead.debug.js[async defer]
- GeneralBody.debug.js[async defer]
I would include Sourcemaps to your build pipleline. Like that you'll see in which file the error happen. And if you use something like https://rollbar.com/ you get even on Production pages good error reports…
Thanks a lot for the hint!
Looks like Carbon.IncludeAssets will do the trick for me. It also nicely includes a cache-buster to those ressource files.