flutter_image_cropper
flutter_image_cropper copied to clipboard
hnvn
Deferring CSS and JS assets whenever possible
Hi,
Is there any reason why CSS and JS dependencies should not be loaded in the following way?
<head>
...
<!-- Deferring non-critical CSS https://web.dev/defer-non-critical-css/ -->
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css"></noscript>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
...
</head>
That would allow to minimize the number of render-blocking resources with potential saving of 150 ms.
Even though both CSS and JS deferring have no impact in image_cropper behaviour, deferring the loading of "https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js" shows a JS error that I would like to avoid:
Uncaught Error: Mismatched anonymous define() module: function(){"function"!=typeof Promise&&function(e){function t(e,t){return function(){e.apply(t,arguments)}}function i(e){if("object"!=typeof this)throw new TypeError("Promises must be constructed via new") ... http://requirejs.org/docs/errors.html#mismatch at makeError (require.js:168:17) at intakeDefines (require.js:1254:36) at require.js:1452:25
Could you please share your thoughts?
Thanks.
Best Regards.
Sorry I am not much familiar with Web development, if you find that way to load CSS and JS more convenient and efficient, just do it.
