diff --git a/_data/sidebar.yml b/_data/sidebar.yml index b06ea827e5..e3aacd894b 100644 --- a/_data/sidebar.yml +++ b/_data/sidebar.yml @@ -531,6 +531,14 @@ sectionTitle: subgroup: 5 +- sbSecId: 1 + title: Loading modules separately + link: /dev-docs/modules/index.html#loading-modules-separately + isHeader: 0 + isSectionHeader: 0 + sectionTitle: + subgroup: 5 + - sbSecId: 1 title: External Interfaces link: diff --git a/dev-docs/modules/index.md b/dev-docs/modules/index.md index 41788113b3..019f43c34c 100644 --- a/dev-docs/modules/index.md +++ b/dev-docs/modules/index.md @@ -115,6 +115,49 @@ results. See [the userSync setConfig](/dev-docs/publisher-api-reference/setConfi +## Loading modules separately + +There are situations where a publisher uses different modules depending on various factors, such as specific pages or locations. This creates the inconvenience of having to load a Prebid build that is larger than what a particular page actually needs. While it’s possible to work around this by creating separate Prebid builds for different pages, that approach doesn’t scale well. Since a Prebid build is composed of concatenated chunks, it’s possible to load modules separately, allowing you to have a main Prebid file that contains only the modules shared across all pages. + +### Example + +This is the example of loading modules separately for the self-hosted (e.g. CDN) Prebid build. +Instructions for importing modules when using the npm package can be found in the [Readme file](https://github.com/prebid/Prebid.js/blob/master/README.md) + +1. Perform full Prebid build `gulp build` +1. Generate the main `prebid.js` file containing only the modules required across all pages: `gulp bundle --modules=<...>` +1. Host `build/dist` folder content on your server or CDN +1. Check the dependencies of the modules you plan to load dynamically on the current page [Dependency tree](https://cdn.jsdelivr.net/npm/prebid.js@latest/dist/chunks/dependencies.json) +1. Load the required modules, their dependencies using script tags: + +```html + + + Page 1> + + + + + +``` + +### Storage control usage + +When working with the `storageControl` module you will need to explicitly import disclosure metadata. To do this, pair each module import with its corresponding metadata file `.metadata.js` + +```html + + + Page 1> + + + + + + + +``` + ## Further Reading - [Source code of all modules](https://github.com/prebid/Prebid.js/tree/master/modules)