feat(v2): better webpack splitchunks optimization

[endiliey]

Motivation

This PR is optimizing webpack splitchunks algorithm.

I notice that the react-live is not being lazily loaded properly due to our chunking algorithm. It tries to put vendors all into one folder.

The simple idea is this. For bigger node_modules package, try to split it out into a separate chunk

Consider this scenario

// a.js
import react
import endi

// b.js
import react
import endi
import react-live

Previously

will result in a.bundle.js, b.bundle.js and vendors.js (containing both react, endi and react-live)

So if i load a.bundle.js, it will also load vendors.js. Note that react-live is not needed but i had to load it too
If i load b.bundle.js, it will load vendors.js

This "PR

Which will result in a.bundle.js, b.bundle.js and vendors.js (containing both react and endi) and react-live.js
So if i load a.bundle.js, it will only load vendors.js.
If i load b.bundle.js, it will load vendors.js and react-live.js

Our first page load performance is definitely better.

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

before

after

overall bundle size has no change.
Due to browsers parallel request capability, this is definitely better.

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit 7df44b6

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

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit 7df44b6

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