-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
perf(v2): reduce HTML payload by eliminating chunk-map #2118
Conversation
Deploy preview for docusaurus-preview ready! Built with commit 7123eb3 |
Deploy preview for docusaurus-2 ready! Built with commit 7123eb3 |
let chunkManifest; | ||
const {path: defaultOutputPath, publicPath} = compiler.options.output; | ||
|
||
// Build the chunk mapping |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
bye old code
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wow, wow, it is awesome job! 👏
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This solves our scalability problem. My favorite PR of the year 🎉
All hail the webpack guru 🙇
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__.gca
that 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.js
Why 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
![2 simple debugging](https://user-images.githubusercontent.com/17883920/70727069-a100ab00-1d31-11ea-98fb-0c15fa11e7e9.PNG)
![production still working](https://user-images.githubusercontent.com/17883920/70727071-a1994180-1d31-11ea-9176-9581128526f9.PNG)
Try it on netlify
![image](https://user-images.githubusercontent.com/17883920/70728222-96dfac00-1d33-11ea-8dec-bdde4e1a98cb.png)
On intersection observer, it creates link prefetch
![prefetch](https://user-images.githubusercontent.com/17883920/70728365-defece80-1d33-11ea-95ad-8b8f4c83bc35.gif)