Я работаю над PWA.Чтобы улучшить производительность загрузки (а именно, оценка Lighthouse), мне нужно сначала представить облегченную страницу «загрузка, подождите», подождать, пока работник службы кэширует код приложения и пакет данных, а затем динамически загрузить пакет с помощью тега script,Однако существует один модуль ES, который является общим для обеих фаз приложения.
Упрощенная версия общего модуля (EventBus.js):
class EventBus {
constructor() {}
publish() {}
subscribe() {}
}
let bus = new EventBus();
export { bus };
Внутри модулей комплектаЕсть множество ссылок на bus
, например:
import { bus } from '../EventBus.js';
...
bus.publish(...);
Итак, мне нужно загрузить EventBus.js через тег script с начальной страницей «Пожалуйста, подождите», а затем иметь глобальный bus
ссылка доступна в комплекте.
Я пробовал это для rollup.config.js:
import path from 'path';
const externalId = path.resolve(__dirname, './js/EventBus.js');
export default {
input: './js/App.js',
external: [externalId],
output: {
file: './bundle.js',
format: 'iife',
globals: {
[externalId]: 'EventBus.bus'
}
}
};
Полученный пакет выглядит так:
(function (EventBus_js) {
...
EventBus_js.bus.publish(...)
...
}(EventBus.bus));
Это разрешило бы вызовы, подобные этому:
...
EventBus.bus.bus.publish(...);
...
Это определенно не то, что я ищу!
Пакет, который я ищу, будет выглядеть примерно так:
(function (bus) {
...
bus.publish(...)
...
}(bus));
Что я здесь не так делаю?