Merge pull request #1241 from omfgnuts/main

Fixed docs Plugin Section navigation & Added cache busting doc

apps/docs/src/en/antora.yml

@@ -5,6 +5,7 @@ display_version: '0.20'
 start_page: ROOT:getting-started.adoc
 nav:
   - modules/ROOT/nav.adoc
+  - modules/enhanced_api/nav.adoc
 asciidoc:
   attributes:
     idprefix: '@'

apps/docs/src/en/modules/ROOT/nav.adoc

@@ -1,34 +1,18 @@
 .Getting Started
-* xref:ROOT:history.adoc[History of Module Federation]
+* xref:history.adoc[History of Module Federation]
 * xref:getting-started.adoc[What is Module Federation?]
-** xref:setup.adoc[Setting up Environment]
-** xref:getting-started-practical.adoc[Getting Started]
-** xref:use-cases.adoc[Use Cases]
-** xref:pros-cons.adoc[Pros and Cons of Module Federation]
-** xref:best-practices.adoc[Best Practices and Tips]
+* xref:setup.adoc[Setting up Environment]
+* xref:getting-started-practical.adoc[Getting Started]
+* xref:use-cases.adoc[Use Cases]
+* xref:pros-cons.adoc[Pros and Cons of Module Federation]
+* xref:best-practices.adoc[Best Practices and Tips]
 
 .Core Features
 * xref:dynamic-remotes.adoc[Dynamic Remotes in Module Federation]
 * xref:shared-api.adoc[]
 * xref:delegate-modules.adoc[]
 * xref:versioned-shared-modules.adoc[]
-
-.Plugins/Packages
-* Enhanced API Plugin
-** xref:enhanced_api/about.adoc[About]
-** xref:enhanced_api/installation.adoc[Installation]
-** xref:enhanced_api/getting_started.adoc[Getting Started]
-* Features
-** xref:enhanced_api/features_default_async.adoc[Default Async]
-* xref:enhanced_api/features_module_name_map.adoc[Modules' Name Map]
-** xref:enhanced_api/features_remotes_name_map.adoc[Remotes' Name Map]
-** xref:enhanced_api/features_remotes_url.adoc[Remotes' URL]
-** xref:enhanced_api/features_remote_object_definition.adoc[Object Definition]
-* Helper
-** xref:enhanced_api/helper_about.adoc[About]
-** xref:enhanced_api/helper_installation.adoc[Install]
-** xref:enhanced_api/helper_getModule.adoc[getModule]
-** xref:enhanced_api/helper_dynamicLoad.adoc[dynamicLoad]
+* xref:cache_busting.adoc[]
 
 .Recipes
 * xref:examples-demos.adoc[]
@@ -37,7 +21,7 @@
 * xref:unit-testing.adoc[]
 * xref:public-path-dynamic.adoc[]
 * xref:resiliency-failovers.adoc[]
-* xref:naming-convention-tips.adoc[]
+* xref:naming-convention-tips.adoc[Naming Conventions for Modules and Exports ]
 * xref:shared-header-footer.adoc[]
 * xref:composable-commerce-PBC-edition.adoc[]
 

apps/docs/src/en/modules/ROOT/pages/cache_busting.adoc

@@ -0,0 +1,69 @@
+= Cache Busting
+
+== Introduction to Cache Busting
+
+Cache busting is a technique used to prevent browsers from serving outdated or cached files. In the context of Module Federation, cache busting ensures that the latest versions of federated modules are loaded, even if a browser has cached an older version.
+
+== Cache Invalidation Techniques
+
+=== Random Query String
+
+One of the common techniques for cache invalidation in Module Federation involves appending a random query string to the end of the `remoteEntry.js`. This can be controlled to generate the same random string within a specific time window.
+
+=== Example Usage
+
+Here's an example of how you can implement this technique:
+
+[source, javascript]
+----
+// webpack.config.js
+plugins: [
+  new ModuleFederationPlugin({
+    name: 'my-app',
+    remotes: {
+      'my-remote-1': 'my-remote-1@[window.remote-1-domain]/remoteEntry.js?[getRandomString()]',
+      // ...
+    },
+    shared: {...}
+  }),
+  new ExternalTemplateRemotesPlugin(), //no parameter
+  // ...otherPlugins
+]
+----
+
+In this example, the `getRandomString()` function will generate the same random string in a 5-minute window based on the current epoch time. This ensures better control over cache invalidation.
+
+=== Using the External Remotes Plugin
+
+An npm package named `external-remotes-plugin` has been published to simplify the implementation of this technique. You can find it https://www.npmjs.com/package/external-remotes-plugin[on npm].
+
+== Including Hashes in Filenames
+
+Another effective technique for cache busting in Module Federation is including hashes in filenames. This ensures that any change in the file content will result in a new hash, forcing the browser to load the updated file.
+
+=== Webpack Configuration
+
+You can configure Webpack to include content hashes in the filenames as follows:
+
+[source, javascript]
+----
+// webpack.config.js
+module.exports = {
+  output: {
+    filename: '[name].[contenthash].js',
+    publicPath: '/dist/',
+  },
+  // ...
+};
+----
+
+In this configuration, `[contenthash]` is replaced with a hash of the content of the output file, ensuring that the file is reloaded whenever its content changes.
+
+=== Further Reading
+
+- https://github.com/module-federation/module-federation-examples/issues/566[Dynamic remoteEntry.js URL plugin - GitHub Issue]()
+- https://webpack.js.org/guides/caching/[Webpack Documentation on Caching]
+
+---
+
+If you have any questions or need further assistance, please don't hesitate to reach out. Happy coding!

apps/docs/src/en/modules/enhanced_api/nav.adoc

@@ -0,0 +1,16 @@
+.Plugins/Packages
+* Enhanced API Plugin
+** xref:about.adoc[About]
+** xref:installation.adoc[Installation]
+** xref:getting_started.adoc[Getting Started]
+* Features
+** xref:features_default_async.adoc[Default Async]
+* xref:features_module_name_map.adoc[Modules' Name Map]
+** xref:features_remotes_name_map.adoc[Remotes' Name Map]
+** xref:features_remotes_url.adoc[Remotes' URL]
+** xref:features_remote_object_definition.adoc[Object Definition]
+* Helper
+** xref:helper_about.adoc[About]
+** xref:helper_installation.adoc[Install]
+** xref:helper_getModule.adoc[getModule]
+** xref:helper_dynamicLoad.adoc[dynamicLoad]