From 6368b08ce9719f3251d67392708be3c04de0dc81 Mon Sep 17 00:00:00 2001 From: Oliver Shi Date: Mon, 14 Jun 2021 11:34:47 -0400 Subject: [PATCH 1/2] change webpack devtool to 'eval' from 'source-map' (#829) See here for a comparison of webpack devtool options https://webpack.js.org/configuration/devtool/ 'source-map' is listed as one of the slowest options for build, and is recommended for production builds that want high quality source maps. Changing this to 'eval' shaves off 0.5s from the build time, while still providing a source map in dev mode. J=SLAP-1373 TEST=manual see ~0.5s shaved off the webpack build time see that I get source maps in dev mode, and can add a console log to a formatter and clicking on the console.log's line number will take me to the correct source line in dev tools --- static/webpack-config.js | 1 - static/webpack/webpack.dev.js | 1 + static/webpack/webpack.prod.js | 1 + 3 files changed, 2 insertions(+), 1 deletion(-) diff --git a/static/webpack-config.js b/static/webpack-config.js index 2b429483f..979466cae 100644 --- a/static/webpack-config.js +++ b/static/webpack-config.js @@ -48,7 +48,6 @@ module.exports = function () { ]; const commonConfig = { - devtool: 'source-map', stats: 'errors-warnings', performance: { maxAssetSize: 1536000, diff --git a/static/webpack/webpack.dev.js b/static/webpack/webpack.dev.js index cd1b9546e..15ff8ee3d 100644 --- a/static/webpack/webpack.dev.js +++ b/static/webpack/webpack.dev.js @@ -1,6 +1,7 @@ module.exports = () => { return { mode: 'development', + devtool: 'eval', optimization: { minimize: false } diff --git a/static/webpack/webpack.prod.js b/static/webpack/webpack.prod.js index 5fff2d793..26ae8ca06 100644 --- a/static/webpack/webpack.prod.js +++ b/static/webpack/webpack.prod.js @@ -4,6 +4,7 @@ module.exports = () => { const InlineAssetHtmlPlugin = require('./InlineAssetHtmlPlugin'); return { mode: 'production', + devtool: 'source-map', plugins: [ new InlineAssetHtmlPlugin() ], From 5e08a2a5684cfee51fad2745c503fb7df0ba1d00 Mon Sep 17 00:00:00 2001 From: Oliver Shi Date: Mon, 14 Jun 2021 13:19:33 -0400 Subject: [PATCH 2/2] 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 | 2 +- script/partials/bundle-script-tags.hbs | 2 ++ static/entry-legacy.js | 8 ++++++ static/entry.js | 36 +++----------------------- static/js/HitchhikerJS.js | 29 +++++++++++++++++++++ static/webpack-config.js | 9 +++---- static/webpack/webpack.prod.js | 7 +++-- 7 files changed, 52 insertions(+), 41 deletions(-) create mode 100644 script/partials/bundle-script-tags.hbs create mode 100644 static/entry-legacy.js create mode 100644 static/js/HitchhikerJS.js diff --git a/layouts/html.hbs b/layouts/html.hbs index 3b6619164..3563474eb 100644 --- a/layouts/html.hbs +++ b/layouts/html.hbs @@ -85,7 +85,7 @@ }); {{/babel}} - + {{> script/partials/bundle-script-tags }} {{#if global_config.googleAnalyticsId}} diff --git a/script/partials/bundle-script-tags.hbs b/script/partials/bundle-script-tags.hbs new file mode 100644 index 000000000..67292671a --- /dev/null +++ b/script/partials/bundle-script-tags.hbs @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/static/entry-legacy.js b/static/entry-legacy.js new file mode 100644 index 000000000..06365daff --- /dev/null +++ b/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'; diff --git a/static/entry.js b/static/entry.js index f571d728e..92f7f43e7 100644 --- a/static/entry.js +++ b/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 } \ No newline at end of file +import Scss from './scss/answers/_default.scss'; \ No newline at end of file diff --git a/static/js/HitchhikerJS.js b/static/js/HitchhikerJS.js new file mode 100644 index 000000000..afd7ae021 --- /dev/null +++ b/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 } \ No newline at end of file diff --git a/static/webpack-config.js b/static/webpack-config.js index 979466cae..256d79793 100644 --- a/static/webpack-config.js +++ b/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); } }; diff --git a/static/webpack/webpack.prod.js b/static/webpack/webpack.prod.js index 26ae8ca06..f78a981c6 100644 --- a/static/webpack/webpack.prod.js +++ b/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 = () => { ] }, }; -} \ No newline at end of file +}