From 430e4fe2595d8912a9f3a8bdc909181ea8a83e2c Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Tue, 14 Jul 2026 14:42:35 +0200
Subject: [PATCH] Load video embed and before/after packs on demand

Both content elements pull in sizable dependencies (react-player,
react-compare-image) that were previously bundled into the frontend
pack loaded by every entry. Bundle them separately so entries that
do not use these elements no longer download the extra JavaScript,
improving initial load performance.

REDMINE-21330
---
 entry_types/scrolled/lib/pageflow_scrolled/plugin.rb |  3 ++-
 entry_types/scrolled/package/config/webpack.js       | 12 ++++++++++++
 .../scrolled/package/contentElements-server.js       |  2 ++
 .../scrolled/package/src/contentElements/frontend.js |  2 --
 rollup.config.js                                     |  5 ++++-
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
index 37e7acdb43..064126ea81 100644
--- a/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
+++ b/entry_types/scrolled/lib/pageflow_scrolled/plugin.rb
@@ -161,7 +161,8 @@ def configure(config)
 
         c.revision_components.register(Storyline, create_defaults: true)
 
-        ['tikTokEmbed', 'twitterEmbed', 'hotspots', 'socialEmbed'].each do |name|
+        ['tikTokEmbed', 'twitterEmbed', 'hotspots', 'socialEmbed',
+         'videoEmbed', 'inlineBeforeAfter'].each do |name|
           c.additional_frontend_packs.register(
             "pageflow-scrolled/contentElements/#{name}-frontend",
             content_element_type_names: [name]
diff --git a/entry_types/scrolled/package/config/webpack.js b/entry_types/scrolled/package/config/webpack.js
index 931aca8438..5be037db52 100644
--- a/entry_types/scrolled/package/config/webpack.js
+++ b/entry_types/scrolled/package/config/webpack.js
@@ -37,6 +37,18 @@ module.exports = {
         'pageflow-scrolled/contentElements/socialEmbed-frontend.css'
       ]
     },
+    'pageflow-scrolled/contentElements/videoEmbed-frontend': {
+      import: [
+        'pageflow-scrolled/contentElements/videoEmbed-frontend',
+        'pageflow-scrolled/contentElements/videoEmbed-frontend.css'
+      ]
+    },
+    'pageflow-scrolled/contentElements/inlineBeforeAfter-frontend': {
+      import: [
+        'pageflow-scrolled/contentElements/inlineBeforeAfter-frontend',
+        'pageflow-scrolled/contentElements/inlineBeforeAfter-frontend.css'
+      ]
+    },
     'pageflow-scrolled/widgets/defaultNavigation': {
       import: [
         'pageflow-scrolled/widgets/defaultNavigation',
diff --git a/entry_types/scrolled/package/contentElements-server.js b/entry_types/scrolled/package/contentElements-server.js
index ea88089b00..a669c903c3 100644
--- a/entry_types/scrolled/package/contentElements-server.js
+++ b/entry_types/scrolled/package/contentElements-server.js
@@ -1,5 +1,7 @@
 import 'pageflow-scrolled/contentElements-frontend';
 import 'pageflow-scrolled/contentElements/hotspots-frontend';
+import 'pageflow-scrolled/contentElements/inlineBeforeAfter-frontend';
 import 'pageflow-scrolled/contentElements/socialEmbed-frontend';
 import 'pageflow-scrolled/contentElements/tikTokEmbed-frontend';
 import 'pageflow-scrolled/contentElements/twitterEmbed-frontend';
+import 'pageflow-scrolled/contentElements/videoEmbed-frontend';
diff --git a/entry_types/scrolled/package/src/contentElements/frontend.js b/entry_types/scrolled/package/src/contentElements/frontend.js
index a728a4a81b..ae2833e4b7 100644
--- a/entry_types/scrolled/package/src/contentElements/frontend.js
+++ b/entry_types/scrolled/package/src/contentElements/frontend.js
@@ -1,11 +1,9 @@
 import './heading/frontend';
-import './inlineBeforeAfter/frontend';
 import './inlineImage/frontend';
 import './inlineVideo/frontend';
 import './inlineAudio/frontend';
 import './soundDisclaimer/frontend';
 import './textBlock/frontend';
-import './videoEmbed/frontend';
 import './externalLinkList/frontend';
 import './dataWrapperChart/frontend';
 import './vrImage/frontend';
diff --git a/rollup.config.js b/rollup.config.js
index 2172c056fd..37c3084141 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -374,7 +374,10 @@ const pageflowScrolled = [
     }
   ))),
 
-  ...(['tikTokEmbed', 'twitterEmbed', 'hotspots', 'socialEmbed'].map(name => (
+  ...([
+    'tikTokEmbed', 'twitterEmbed', 'hotspots', 'socialEmbed',
+    'videoEmbed', 'inlineBeforeAfter'
+  ].map(name => (
     {
       input: `${pageflowScrolledPackageRoot}/src/contentElements/${name}/frontend.js`,
       output: {