perf(v2): significantly reduce bundle size & initial html payload

[endiliey]

Motivation

Update: used alphanumeric id from hash so that the same module path always have same chunk name. For better long term caching.

I think it's quite straightforward that SPEED is everything in web development. Saving 0.3s or even 0.5s in page loading is HUGE.
This PR attempts to reduce our bundle size by changing the registry.js structure a little bit (using array instead of object) and using short alphanumeric id for our webpack chunk name in production.

So in development

// registry.js
export default {
  'component---site-src-pages-help-js-7-e-3-222': [() => import(/* webpackChunkName: 'component---site-src-pages-help-js-7-e-3-222' */ "@site/src/pages/help.js"), "@site/src/pages/help.js", require.resolveWeak("@site/src/pages/help.js")],
  'component---site-src-pages-index-jsc-4-f-f99': [() => import(/* webpackChunkName: 'component---site-src-pages-index-jsc-4-f-f99' */ "@site/src/pages/index.js"), "@site/src/pages/index.js", require.resolveWeak("@site/src/pages/index.js")],
}

While production

// registry.js
export default {
  '17896441': [() => import(/* webpackChunkName: '17896441' */ "@site/src/pages/help.js"), "@site/src/pages/help.js", require.resolveWeak("@site/src/pages/help.js")],
  '7e37206e': [() => import(/* webpackChunkName: '7e37206e' */ "@site/src/pages/index.js"), "@site/src/pages/index.js", require.resolveWeak("@site/src/pages/index.js")],
}

So the main caveat of this PR is obvious, when looking at the network tab, the JS file name is not so easy to determine like before.

See how the js file name in production is previously component---theme-doc-item-178-a40.8e48729024944b887b6d.js. After this PR, you should only see something like 7e37206e.8e487290.js.

But I believe easy to debug JS name should be done in development (for developer), and we should prioritize sending the lowest byte as possible to docusaurus's website visitor. Our neighbor SSG also used numeric id and doesnt seem to have complains though. Seeing huge website like Facebook/ Instagram, their JS file naming is even more randomized (use alphanumeric like ours for long term caching)

upload image


free image hosting

This also makes our HTML payload smaller because the inlined chunk-mapping is shorter in string length

See Test Plan for more obvious benefit especially on scaling.

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

I used 225 valid markdown files for the stress test. The markdown file is generated with this script https://gist.github.com/endiliey/8970281b25b125747c27d8d2be9260f1

Before
Main bundle ~349kb
HTML is ~81kb

After
Main bundle ~295kb
HTML is ~47kb

That's almost ~100kb difference saved on initial payload.

Even with current docu v2 docs, we have saved ~10kb on main bundle and ~8kb/html
Before

After
1

P.S: For user like me who has potato internet, few KBs saving can be worth a lot

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit 93ddf74

https://deploy-preview-1898--docusaurus-2.netlify.com

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit 93ddf74

https://deploy-preview-1898--docusaurus-preview.netlify.com

[yangshun]

Wew this is pretty significant. Nice job