example with-vendor-bundle is not splitting vendor bundle correctly

[X-Y]

🐛 Bug report

When trying out the with-vendor-bundle example, vendor bundles seem a bit pointless.

Current Behavior

When doing yarn build, with the current setup, most vendor code seems to reside in 0.[hash].chunk.js, a tiny portion of react-dom in vendor.[hash].js

  41.07 KB  build/public/static/js/0.43a77108.chunk.js
  923 B     build/public/static/js/client.406eeeb8.js
  788 B     build/public/static/js/vendor.406eeeb8.js
  194 B     build/assets.json

In generated assets.json, all vendor code is included in client code as well.

{
  "client": {
    "js": [
      "http://localhost:3001/static/js/0.chunk.js",
      "http://localhost:3001/static/js/1.chunk.js",
      "http://localhost:3001/static/js/client.js"
    ],
    "map": [
      "http://localhost:3001/static/js/0.chunk.js.map",
      "http://localhost:3001/static/js/1.chunk.js.map",
      "http://localhost:3001/static/js/client.js.map"
    ],
    "chunks": [
      0,
      1,
      "client"
    ]
  },
  "vendor": {
    "js": [
      "http://localhost:3001/static/js/0.chunk.js",
      "http://localhost:3001/static/js/vendor.js"
    ],
    "map": [
      "http://localhost:3001/static/js/0.chunk.js.map",
      "http://localhost:3001/static/js/vendor.js.map"
    ],
    "chunks": [
      0,
      "vendor"
    ]
  },
  "noentry": {}
}

In server.js, vendor section of the assets.json is never used. All code is embedded through client section.

Current behavior looks very inconsistent from "Idea behind the example" section of README. According to that, vendor code should be included explicitly instead of being part of client code. What's more, with current setup, the vendor splitting seems pointless: removing the vendor entry point from razzle.config.js does not seem to have any impact on code splitting.

  41.07 KB      build/public/static/js/1.f55c8a90.chunk.js
  924 B (+1 B)  build/public/static/js/client.d28ada58.js
  172 B         build/assets.json

Expected behavior

The example should be constructed to display the purpose of vendor splitting. Currently it's quite confusing and a bit pointless. It should answer the questions of what is the benefit of vendor bundles and how should it actually work?

I'm still research about bundle-spliting, so I can only give some personal opinions:

1. vendor bundle should be embedded explicitly in server.js
2. vendor bundle should only reside in vendor section of assets.json
3. vendor bundle should be a single file(?)
4. ...

Reproducible example

https://github.com/jaredpalmer/razzle/tree/master/examples/with-vendor-bundle

Suggested solution(s)

Additional context

Your environment

Software	Version(s)
Razzle	4.1.0
Razzle Plugins
Node	12.22.6
Browser
npm/Yarn	1.22.4
Operating System	MacOs
TypeScript
React

[fivethreeo]

Code splitting has changed alot since this example was made. So it is out of date.

[fivethreeo]

https://webpack.js.org/plugins/split-chunks-plugin/

[fivethreeo]

https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-3

[fivethreeo]

https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L585