Playing around with defer and sync WP strategies

assets/src/js/defer-async-elements.js

@@ -0,0 +1,11 @@
+(() => {
+  console.log('defer-sync-elements loaded.');
+  const elements = ['default', 'defer', 'async'];
+
+  for (const element of elements) {
+    let el = document.createElement('h3');
+    el.className = element;
+    el.innerHTML = `${element} element`;
+    document.querySelector('.page-header-title').insertAdjacentElement("afterend", el);
+  }
+})();

assets/src/js/defer-async-script.js

@@ -0,0 +1,6 @@
+(() => {
+  console.log('defer-sync-script loaded.');
+  for (const element of [['default', 'orange'], ['defer', 'purple'], ['async', 'green']]) {
+    document.querySelector(`.${element[0]}`).style.color = element[1];
+  }
+})();

functions.php

@@ -489,3 +489,30 @@ function ($canonical_url, $post) {
         return $options;
     });
 }
+
+wp_register_script(
+    'defer-async-script',
+    get_template_directory_uri() . '/assets/build/defer_async_script.js',
+    array(),
+    '1.0.0',
+    array(
+        'in_footer' => false,
+        'strategy' => 'defer'
+    )
+);
+
+
+wp_register_script(
+    'defer-async-elements',
+    get_template_directory_uri() . '/assets/build/defer_async_elements.js',
+    array(),
+    '1.0.0',
+    // true,
+    array(
+        'in_footer' => false,
+        'strategy' => 'defer'
+    )
+);
+
+wp_enqueue_script('defer-async-elements');
+wp_enqueue_script('defer-async-script');

webpack.config.js

@@ -19,6 +19,8 @@ const mediaQueryAliases = {
 module.exports = {
   ...defaultConfig,
   entry: {
+    defer_async_script: './assets/src/js/defer-async-script.js',
+    defer_async_elements: './assets/src/js/defer-async-elements.js',
     index: './assets/src/js/app.js',
     style: './assets/src/scss/style.scss',
     post: './assets/src/scss/post.scss',