separate bundle into legacy and modern bundle (#828)

This commit separates bundle.js into the polyfill-free
bundle.js and polyfilled bundle-legacy.js. Both still
run through the babel loader, because the esbuild minifier
is set to target es5, and does not let you minify some
bundles to es5 and some bundles to newer javascript.

The type="module" and nomodule script loading pattern is used
to dynamically load the correct bundle. This is the pattern we
use for determining whether to use answers-modern or answers
assets. This shrinks bundle.js from 443KB to 313KB in prod mode
(and from 1.3MB to 705KB in dev mode). In prod mode the page speed
went from 50 -> 56, and in dev mode the page speed lighthouse scores
went from 36 -> 48.

J=SLAP-1373
TEST=manual

see ~0.7s build speed improvements on yanswers and answers-atlanticsearch
when I remove the core-js import from entry.js
this build speedup doesn't show up for the test-site for some reason, though
investigated for a while but could not figure out why
I figured that yanswers and another random repo would be better benchmarks, though
the test-site's build speed was also not hurt at all by this change

see that the production modern bundle shrinks from 443KB to 313KB after removing
polyfills

smoke test that full page map on ie11 (browserstack), firefox, safari, chrome, and
galaxy s6 chrome (browserstack)

see that bundle.js is inlined properly, and only the modern one is inlined

layouts/html.hbs

@@ -85,7 +85,7 @@
       });
       {{/babel}}
     </script>
-    <script src="{{relativePath}}/bundle.js" data-webpack-inline></script>
+    {{> script/partials/bundle-script-tags }}
     {{#if global_config.googleAnalyticsId}}
       <!-- Global site tag (gtag.js) - Google Analytics -->
       <script async src="https://www.googletagmanager.com/gtag/js?id={{global_config.googleAnalyticsId}}"></script>

script/partials/bundle-script-tags.hbs

@@ -0,0 +1,2 @@
+<script src="{{relativePath}}/bundle.js" type="module" data-webpack-inline></script>
+<script src="{{relativePath}}/bundle-legacy.js" nomodule></script>

static/entry-legacy.js

@@ -0,0 +1,8 @@
+// Import global polyfills
+import 'core-js/stable';
+
+import * as HitchhikerJS from './js/HitchhikerJS';
+window.HitchhikerJS = HitchhikerJS;
+
+// Import all SCSS
+import Scss from './scss/answers/_default.scss';

static/entry.js

@@ -1,35 +1,5 @@
-// Import global polyfills
-import 'core-js/stable';
+import * as HitchhikerJS from './js/HitchhikerJS';
+window.HitchhikerJS = HitchhikerJS;
 
 // Import all SCSS
-import Scss from './scss/answers/_default.scss';
-
-// Import all JS assets
-import Formatters from './js/formatters';
-window.Formatter = Formatters;
-
-export { Formatters };
-export { getDefaultMapApiKey } from './js/default-map-api-key';
-export { isStaging } from './js/is-staging';
-export { isMobile }  from 'is-mobile';
-export { getInjectedProp } from './js/get-injected-prop';
-export { isHighlighted } from './js/is-highlighted';
-
-// Used to transfigure the page for the Overlay
-import Overlay from './js/overlay/answers-frame/overlay';
-window.Overlay = new Overlay();
-
-// Import code used in Collapsible Filters, and give it the alias of window.CollapsibleFilters.
-import CollapsibleFilters from './js/collapsible-filters';
-export { CollapsibleFilters };
-global.CollapsibleFilters = CollapsibleFilters;
-
-// Import custom modules which can be accessed from HitchhikerJS.CustomModules
-import * as CustomModules from './js/custom-modules';
-export { CustomModules };
-
-import StorageKeys from './js/constants/storage-keys';
-export { StorageKeys };
-
-import transformFacets from './js/transform-facets';
-export { transformFacets }
+import Scss from './scss/answers/_default.scss';

static/js/HitchhikerJS.js

@@ -0,0 +1,29 @@
+// Import all JS assets
+import Formatters from './formatters';
+window.Formatter = Formatters;
+
+export { Formatters };
+export { getDefaultMapApiKey } from './default-map-api-key';
+export { isStaging } from './is-staging';
+export { isMobile }  from 'is-mobile';
+export { getInjectedProp } from './get-injected-prop';
+export { isHighlighted } from './is-highlighted';
+
+// Used to transfigure the page for the Overlay
+import Overlay from './overlay/answers-frame/overlay';
+window.Overlay = new Overlay();
+
+// Import code used in Collapsible Filters, and give it the alias of window.CollapsibleFilters.
+import CollapsibleFilters from './collapsible-filters';
+export { CollapsibleFilters };
+global.CollapsibleFilters = CollapsibleFilters;
+
+// Import custom modules which can be accessed from HitchhikerJS.CustomModules
+import * as CustomModules from './custom-modules';
+export { CustomModules };
+
+import StorageKeys from './constants/storage-keys';
+export { StorageKeys };
+
+import transformFacets from './transform-facets';
+export { transformFacets }

static/webpack-config.js

@@ -55,7 +55,7 @@ module.exports = function () {
     },
     target: ['web', 'es5'],
     entry: {
-      'HitchhikerJS': `./${jamboConfig.dirs.output}/static/entry.js`,
+      'bundle': `./${jamboConfig.dirs.output}/static/entry.js`,
       'iframe': `./${jamboConfig.dirs.output}/static/js/iframe.js`,
       'answers': `./${jamboConfig.dirs.output}/static/js/iframe.js`,
       'overlay-button': `./${jamboConfig.dirs.output}/static/js/overlay/button-frame/entry.js`,
@@ -73,8 +73,7 @@ module.exports = function () {
       filename: pathData => {
         const chunkName = pathData.chunk.name;
         return {
-          VerticalFullPageMap: 'locator-bundle.js',
-          HitchhikerJS: 'bundle.js',
+          VerticalFullPageMap: 'locator-bundle.js'
         }[chunkName] || '[name].js'
       },
       library: '[name]',
@@ -140,12 +139,12 @@ module.exports = function () {
   if (isDevelopment) {
     const devConfig = require(
       `./${jamboConfig.dirs.output}/static/webpack/webpack.dev.js`
-    )();
+    )(jamboConfig);
     return merge(commonConfig, devConfig);
   } else {
     const prodConfig = require(
       `./${jamboConfig.dirs.output}/static/webpack/webpack.prod.js`
-    )();
+    )(jamboConfig);
     return merge(commonConfig, prodConfig);
   }
 };

static/webpack/webpack.prod.js

@@ -1,10 +1,13 @@
 const { ESBuildMinifyPlugin } = require('esbuild-loader')
 
-module.exports = () => {
+module.exports = (jamboConfig) => {
   const InlineAssetHtmlPlugin = require('./InlineAssetHtmlPlugin');
   return {
     mode: 'production',
     devtool: 'source-map',
+    entry: {
+      'bundle-legacy': `./${jamboConfig.dirs.output}/static/entry-legacy.js`,
+    },
     plugins: [
       new InlineAssetHtmlPlugin()
     ],
@@ -42,4 +45,4 @@ module.exports = () => {
       ]
     },
   };
-}
+}