combine ancestor entrypoints into child entrypoints instead of importing bundles for each

2 files changed, 26 insertions, 13 deletions

diff --git a/app/helpers/webpack_helper.rb b/app/helpers/webpack_helper.rb
index 8f0a3b5b190..2f556559c6b 100644
--- a/app/helpers/webpack_helper.rb
+++ b/app/helpers/webpack_helper.rb
@@ -6,7 +6,7 @@ module WebpackHelper
   end
 
   def webpack_controller_bundle_tags
-    bundles = []
+    chunks = []
 
     action = case controller.action_name
              when 'create' then 'new'
@@ -15,19 +15,16 @@ module WebpackHelper
              end
 
     route = [*controller.controller_path.split('/'), action].compact
+    entrypoint = "pages.#{route.join('.')}"
 
-    until route.empty?
-      begin
-        asset_paths = entrypoint_paths("pages.#{route.join('.')}", extension: 'js')
-        bundles.unshift(*asset_paths)
-      rescue Gitlab::Webpack::Manifest::AssetMissingError
-        # no bundle exists for this path
-      end
-
-      route.pop
+    begin
+      chunks = entrypoint_paths(entrypoint, extension: 'js')
+    rescue Gitlab::Webpack::Manifest::AssetMissingError
+      # no bundle exists for this path
+      chunks = entrypoint_paths("default", extension: 'js')
     end
 
-    javascript_include_tag(*bundles.uniq)
+    javascript_include_tag(*chunks)
   end
 
   def entrypoint_paths(source, extension: nil, force_same_domain: false)
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 4907b328b5a..7ec75f7e5d3 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -25,6 +25,7 @@ const defaultEntries = ['./webpack', './commons', './main'];
 function generateEntries() {
   // generate automatic entry points
   const autoEntries = {};
+  const autoEntriesMap = {};
   const pageEntries = glob.sync('pages/**/index.js', {
     cwd: path.join(ROOT_PATH, 'app/assets/javascripts'),
   });
@@ -33,14 +34,29 @@ function generateEntries() {
   function generateAutoEntries(path, prefix = '.') {
     const chunkPath = path.replace(/\/index\.js$/, '');
     const chunkName = chunkPath.replace(/\//g, '.');
-    autoEntries[chunkName] = defaultEntries.concat(`${prefix}/${path}`);
+    autoEntriesMap[chunkName] = `${prefix}/${path}`;
   }
 
   pageEntries.forEach(path => generateAutoEntries(path));
 
-  autoEntriesCount = Object.keys(autoEntries).length;
+  const autoEntryKeys = Object.keys(autoEntriesMap);
+  autoEntriesCount = autoEntryKeys.length;
+
+  // import ancestor entrypoints within their children
+  autoEntryKeys.forEach(entry => {
+    const entryPaths = [autoEntriesMap[entry]];
+    const segments = entry.split('.');
+    while (segments.pop()) {
+      const ancestor = segments.join('.');
+      if (autoEntryKeys.includes(ancestor)) {
+        entryPaths.unshift(autoEntriesMap[ancestor]);
+      }
+    }
+    autoEntries[entry] = defaultEntries.concat(entryPaths);
+  });
 
   const manualEntries = {
+    default: defaultEntries,
     raven: './raven/index.js',
     ide: './ide/index.js',
   };