Performance-oriented webpack boilerplate

Config

Modify the tasks/config.json file by adjusting the publicStaticPath to match the absolute URL for the JS dynamic imports to function correctly (i.e. '/wp-content/themes/theme-slug/dist').

Add more JS entries to both modernJsEntries and legacyJsEntries as necessary. Recommend keeping imported components in subfolders.

Usage

Build all the source files, watches for changes:

npm start

Build minified, production-ready source files without watching for changes:

npm run build

Lint files:

npm run lint

Automatically fix cosmetic lint errors:

npm run lint-fix

JavaScript

The webpack implements several advanced webpack features::

• Code splitting
• Dynamic imports
• Generates both ES2015+ & ES5 legacy JS bundles (module/nomodule)

Module/NoModule

The ES2015+ scripts should be loaded using type=module, which runs as a deferred script. Browsers supporting it also have native support for async/await, Classes, arrow functions, fetch, Promises, Map and Set, and therefore there's no polyfill cost associated with using them.

<script type="module" src="/dist/js/main.js"></script>

For legacy browsers load the ES5 scripts are loaded as a fallback with the nomodule attribute. Maintain the defer attribute for parity with modern browsers. The polyfills for the abovely referenced modern elements are loaded in the legacy JS file via babel, while the fetch polyfill is imported.

<script nomodule defer src="/dist/js/main-legacy.js"></script>

Idle Until Urgent

The idlize library is leveraged to queue non-urgent tasks during idle periods with a timeout fallback.

Of particular interest is also the approach of loading of on demand Javascript via IdleQueue with dynamic imports for non critical functionality.