Wordpress Enqueue Modern JS Modules Script Strategy Dependencies

Definisi

Selain wp_enqueue_script, WordPress sejak 6.3+ mendukung script modules (wp_enqueue_script_module) dengan tipe import/export ES, serta wp_script_add_data untuk strategi (async/defer). Ini memungkinkan kode modular tanpa bundler eksternal dan terintegrasi dengan React/Preact bawaan (@wordpress/element).

Kapan dipakai

• Script module: butuh import/export antar file JS tanpa build step, atau pakai @wordpress/* packages.
• Strategy async/defer: percepat render dengan menunda script non-kritis.
• Inline/script data: wp_add_inline_script untuk pass config ke JS.
• Hindari menaruh <script> manual di template; selalu lewat enqueue agar urutan & dependency benar.

Cara kerja

Script module

php

wp_enqueue_script_module(
    'my-app',
    plugin_dir_url(__FILE__) . 'build/app.js',
    array( 'wp-element' ), // dependency module
    '1.0.0'
);
 
// di app.js
import { render } from '@wordpress/element';

Strategy async/defer

php

wp_enqueue_script('my-analytics', $url, [], '1.0', true); // true = in_footer
wp_script_add_data('my-analytics', 'async', true);

Pass data ke JS

php

wp_enqueue_script('my-app', $url);
wp_add_inline_script('my-app', 'window.__CONFIG__ = ' . wp_json_encode($cfg), 'before');

Struktur alur

Contoh interaksi module + data

php

wp_enqueue_script_module('my-block-view', $url, ['wp-api-fetch']);
wp_add_inline_script('my-block-view', 'import("./view.js").then(m => m.init())', 'after');

Catatan implementasi

• Module & classic script punya queue terpisah; dependency antar keduanya tidak otomatis terikat.
• @wordpress/element adalah React; jangan campur dua versi React.
• wp_script_add_data dengan key strategy = defer/async (WP 6.3+).
• Untuk blok, prefer viewScript di block.json daripada enqueue manual.

Kesalahan umum

• Manual <script> di template: urutan rusak, duplikat, tidak ter-minify.
• Campur module & classic tanpa map: import gagal karena bukan module.
• Inline script tanpa escape: XSS lewat wp_json_encode aman, json_encode biasa bisa bocor.
• Async pada script kritis: UI butuh script tapi belum load, error undefined.

Referensi terkait

• WordPress Theme Hierarchy, Template Files, Loop, Enqueue Assets
• Gutenberg Blocks, block.json, Dynamic Blocks
• WordPress Security: Escaping, Sanitization