[wp-trac] [WordPress Trac] #12009: Add support for HTML 5 "async" and "defer" attributes

[WordPress Trac]

#12009: Add support for HTML 5 "async" and "defer" attributes
-------------------------------------------------+-------------------------
 Reporter:  Otto42                               |       Owner:  10upsimon
     Type:  enhancement                          |      Status:  assigned
 Priority:  high                                 |   Milestone:  6.3
Component:  Script Loader                        |     Version:  4.6
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch has-unit-tests 2nd-        |     Focuses:
  opinion                                        |  performance
-------------------------------------------------+-------------------------

Comment (by joysons):

 To address the compatibility issue between the legacy script loader and
 modern JavaScript modules in WordPress, a comprehensive solution can be
 implemented. Here's a detailed explanation with examples and code
 snippets:

 1. Refactor the script loading mechanism: Update the script loader in
 WordPress to support modern JavaScript modules alongside traditional
 scripts. This refactoring will involve modifying the loader to
 differentiate between module scripts and regular scripts.
 Example: WordPress script loader refactoring

 {{{
 function enqueue_script($src, $deps = array(), $type = 'script') {
   // Check if the script is a module script
   $is_module = strpos($src, '.module.js') !== false;

   // Enqueue the script using appropriate WordPress function
   if ($is_module) {
     wp_enqueue_script('module-script', $src, $deps, null, true);
   } else {
     wp_enqueue_script('regular-script', $src, $deps, null, false);
   }
 }
 }}}
 2. Incorporate module script support: Enhance the script loader to
 recognize and handle module scripts properly by leveraging the module
 loading capabilities provided by modern browsers.
 Example: Loading a module script in WordPress

 {{{
 <script type="module" src="path/to/module.js" async></script>
 }}}
 3.Handle dependencies: Extend the script loader to handle dependencies
 between module scripts. When a module script has dependencies, the loader
 should ensure that all dependencies are resolved before executing the
 dependent module script.
 Example: Handling module script dependencies in WordPress

 {{{
 <script type="module">
   import { dependency } from './dependency.js';
   // Code that relies on the imported dependency
 </script>
 }}}
 4. Support async and defer attributes: Modify the script loader to
 recognize the async and defer attributes for both traditional and module
 scripts. This ensures proper execution order and behavior based on the
 specified attributes.
 Example: Loading an async module script in WordPress

 {{{
 <script type="module" src="path/to/module.js" async></script>
 }}}
 Example: Loading a deferred module script in WordPress

 {{{
 <script type="module" src="path/to/module.js" defer></script>
 }}}
 5.Comprehensive testing and documentation: Thoroughly test the updated
 script loader with various scenarios, including module scripts with
 dependencies, async and defer attributes, and compatibility with existing
 plugins and
 themes[https://c-neatnewsextreme.blogspot.com/2022/11/review.html .]
 Provide clear documentation on the updated script loading mechanism,
 explaining its usage, behavior, and considerations for developers.

 By refactoring the script loading mechanism and incorporating module
 script support, WordPress can embrace modern JavaScript practices while
 maintaining compatibility with existing codebases. This solution allows
 developers to utilize the benefits of module scripts, such as
 encapsulation and modularity, while ensuring optimal performance and
 adhering to the intent of the web platform.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/12009#comment:112>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform