search

hnvn / flutter_image_cropper

A Flutter plugin for Android and iOS supports cropping images
999 stars 394 forks source link

Deferring CSS and JS assets whenever possible #363

Open jcblancomartinez opened 2 years ago

jcblancomartinez commented 2 years ago

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.

hnvn commented 2 years ago

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.

hnvn commented 2 years ago

BTW, feel free to open PR for this improvement