perf(v2): reduce HTML payload by eliminating chunk-map #2118
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
endiliey
added
the
pr: performance
|
Deploy preview for docusaurus-preview ready! Built with commit 7123eb3 |
|
Deploy preview for docusaurus-2 ready! Built with commit 7123eb3 |
endiliey
commented
Dec 12, 2019
| let chunkManifest; | ||
| const {path: defaultOutputPath, publicPath} = compiler.options.output; | ||
|
|
||
| // Build the chunk mapping |
lex111
approved these changes
Dec 12, 2019
yangshun
approved these changes
Dec 12, 2019
yangshun
reviewed
Dec 12, 2019
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.
Motivation
Previously, we always embed a chunk map in the html to find the chunk assets of a webpack chunk name. As number of routes grew bigger, the html could grow bigger (although not fast, because its just text/string & text compression is really good)
The chunk mapping implementation was previously taken from "the blazingly fast SSG" implementation, so we're going to discard that but still preserve the prefetch functionality by leveraging webpack internal more. This PR is inspired after reading webpack/webpack#7056 and reading several parts of webpack still undocumented advanced internal code
The idea is that webpack runtime itself already know how to map chunk id to the relevant chunk assets.
https://github.com/webpack/webpack/blob/fe514dd975f1d2dd1546906a6f4c0a6b2a0e3761/lib/web/JsonpMainTemplatePlugin.js#L255
Webpack runtime itself build the script src by using
So, we modify the webpack runtime to add an extra function called
__webpack_require__.gcathat will allow us to get the corresponding chunk asset for a webpack chunk.
Pass it the chunkName or chunkId you want to load.
For example: if you have a chunk named "my-chunk-name" that will map to "0a84b5e7.c8e35c7a.js" as its corresponding output path
__webpack_require__.gca("my-chunk-name")will return0a84b5e7.c8e35c7a.jsWhy do we need to modify the webpack runtime ?
Because only that code part is aware of all the chunks and so on.
The key benefits of this PR is that our total payload is definitely slimmer, and scale better.
Build time should be slightly faster
Have you read the Contributing Guidelines on pull requests?
yes
Test Plan
Dev and prod should still be able to prefetch
Try it on netlify
On intersection observer, it creates link prefetch
