Feature/webpack optimizations #833
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
#829
#828