Skip to content

Loading modules separately #6353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Loading modules separately #6353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f1c87c6
Loading modules separately
Nov 24, 2025
7cca609
lint
Nov 24, 2025
af0637e
storage control usage
Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions _data/sidebar.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
43 changes: 43 additions & 0 deletions dev-docs/modules/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,49 @@ results. See [the userSync setConfig](/dev-docs/publisher-api-reference/setConfi
</tbody>
</table>

## 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
<html>
<head>
<title>Page 1</title>>
<script src="https://<your-cdn>/prebid/ortbConverter.js"></script> <!-- Depedency of openxBidAdapter !-->
<script src="https://<your-cdn>/prebid/openxBidAdapter.js"></script> <!-- Bid adapter module !-->
<script src="https://<your-cdn>/prebid/id5IdSystem.js"></script> <!-- Another module (doesn't require any additional dependencies) !-->
<script src="https://<your-cdn>/prebid/prebid.js"></script> <!-- Load prebid.js last !-->
</head>
```

### 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 `<module>.metadata.js`

```html
<html>
<head>
<title>Page 1</title>>
<script src="https://<your-cdn>/prebid/ortbConverter.js"></script> <!-- Depedency of openxBidAdapter !-->
<script src="https://<your-cdn>/prebid/openxBidAdapter.js"></script> <!-- Bid adapter module !-->
<script src="https://<your-cdn>/prebid/openxBidAdapter.metadata.js"></script> <!-- Bid adapter module's metadata !-->
<script src="https://<your-cdn>/prebid/id5IdSystem.js"></script> <!-- Another module (doesn't require any additional dependencies) !-->
<script src="https://<your-cdn>/prebid/id5IdSystem.metadata.js"></script> <!-- Another module's metadata !-->
<script src="https://<your-cdn>/prebid/prebid.js"></script> <!-- Load prebid.js last !-->
</head>
```

## Further Reading

- [Source code of all modules](https://github.com/prebid/Prebid.js/tree/master/modules)
Expand Down