Is there any way to create one shared ResizeObserver for multiple Modules in javaScript

Question

Basically, I have several JavaScript Modules that each contain a own ResizeObserver with a specific code only for that module.

Is it possible to create only one resize observer in the first module that is being loaded, and then in other modules add the necessary code in that first RersizeObserver?

The reason I'm asking is about performance - when the browser is resized, 4 observers are executed instead of just one.

Module1.js
Module2.js
Module3.js
Module4.js

//module1.js
    onResize() {
        const resizeObserver = new ResizeObserver(() => {
            globalThis.viewportWidth =  window.innerWidth;; 
            globalThis.viewportHeight = window.innerHeight;  
        });
        resizeObserver.observe(document.body);

    }


//module2.js
    onResize() {
        const resizeObserver = new ResizeObserver(() => {
            ...  
        });
        resizeObserver.observe(document.body);

    }


//module3.js
    onResize() {
        const resizeObserver = new ResizeObserver(() => {
            ...  
        });
        resizeObserver.observe(document.body);

    }


//module4.js
    onResize() {
        const resizeObserver = new ResizeObserver(() => {
            ...  
        });
        resizeObserver.observe(document.body);

    }