gitmyhub

webpack-module-nomodule-plugin

JavaScript ★ 82 updated 5y ago

Easily implement a module nomodule index.html

A Webpack plugin that automatically serves modern, optimized JavaScript to newer browsers while giving older browsers a heavier but compatible version, so you don't manually manage two sets of files.

JavaScriptWebpackNodesetup: moderatecomplexity 2/5

This plugin helps web developers serve modern, faster JavaScript to up-to-date browsers while still supporting older ones like Internet Explorer 11. When you build a website, you want modern browsers to get sleek, optimized code, while older browsers get a heavier, compatible version. This tool automates that process so you don't have to manually manage two sets of files.

It works by integrating with Webpack, a popular tool that bundles website code for production. You set up two separate build steps in your Webpack configuration—one for modern browsers and one for older ones. You then add this plugin to each step, labeling one as "modern" and the other as "legacy." The plugin automatically handles writing the necessary HTML tags so each browser downloads the correct version of your site.

Developers who need to support older browsers but want to give modern users a faster experience would use this. For example, if you're building an e-commerce site where some customers still use older browsers, this plugin ensures they can still shop without issues, while modern users get a quicker, lighter version of the site. It's particularly useful for projects where performance matters but you can't afford to leave older browser users behind.

The plugin offers two output modes. The default "efficient" mode adds some extra HTML to prevent older browsers from accidentally downloading both versions of your code, which wastes bandwidth. The "minimal" mode produces smaller HTML but risks double downloads on certain older browsers. The README notes there's a small quirk with Safari 11 that the plugin handles automatically.

Where it fits