feat: Add improvements on SSG build

From my vue-i18n-router branch:

Add improvements on SSG build:

adding dynamic dependencies via client manifest
add core web vitals for css.

Hints:

Instead only using ssr-manifest.json to add preload links, I also add manifest on SSR, and so we can add all modules for the modules entries for each page.

Using manifest.json we can add the module for the route, its dependencies, its css and its assets.

For example, for src/pages/b.vue route page on multiple-pages-i18n example:

Generated manifest.json on SSR build

{
  "index.html": {
    "file": "assets/app.0d8781b6.js",
    "src": "index.html",
    "isEntry": true,
    "imports": [
      "_vendor.ac044cbc.js"
    ],
    "dynamicImports": [
      "src/pages/index.md",
      "src/pages/b.vue",
      "src/pages/a.md",
      "src/pages/hi/[name].vue"
    ],
    "css": [
      "assets/app.ccd406f9.css"
    ]
  },
  "_vendor.ac044cbc.js": {
    "file": "assets/vendor.ac044cbc.js"
  },
  "src/pages/index.md": {
    "file": "assets/index.94eea00f.js",
    "src": "src/pages/index.md",
    "isDynamicEntry": true,
    "imports": [
      "_Counter.adaf98b7.js",
      "_vendor.ac044cbc.js",
      "index.html"
    ]
  },
  "_Counter.adaf98b7.js": {
    "file": "assets/Counter.adaf98b7.js",
    "imports": [
      "index.html",
      "_vendor.ac044cbc.js"
    ],
    "css": [
      "assets/Counter.ecd9e063.css"
    ]
  },
  "src/pages/b.vue": {
    "file": "assets/b.0d0687be.js",
    "src": "src/pages/b.vue",
    "isDynamicEntry": true,
    "imports": [
      "_Counter.adaf98b7.js",
      "_vendor.ac044cbc.js",
      "index.html"
    ],
    "assets": [
      "assets/test.787f7936.jpg"
    ]
  },
  "src/pages/a.md": {
    "file": "assets/a.74e2c17a.js",
    "src": "src/pages/a.md",
    "isDynamicEntry": true,
    "imports": [
      "_vendor.ac044cbc.js"
    ]
  },
  "src/pages/hi/[name].vue": {
    "file": "assets/[name].e8e2b3cd.js",
    "src": "src/pages/hi/[name].vue",
    "isDynamicEntry": true,
    "imports": [
      "index.html",
      "_vendor.ac044cbc.js"
    ]
  }
}

Their dependencies will be:

src/pages/b.vue ---------------------------
isEntry: undefined
isDynamicEntry: true
imports: _Counter.adaf98b7.js,_vendor.ac044cbc.js,index.html
dynamicImports: undefined
dependencies: [
  '/assets/b.0d0687be.js',
  '/assets/app.0d8781b6.js',
  { file: '/assets/app.ccd406f9.css', type: 'css', defer: true },
  '/assets/vendor.ac044cbc.js',
  '/assets/Counter.adaf98b7.js',
  { file: '/assets/Counter.ecd9e063.css', type: 'css', defer: true },
  { file: '/assets/test.787f7936.jpg', type: 'other' }
]

For dependencies with type: 'css', SSG will generate on head, for example for { file: '/assets/app.ccd406f9.css', type: 'css', defer: true }:

    <link
      rel="preload"
      as="style"
      onload="this.onload=null;this.rel='stylesheet'"
      href="/assets/app.ccd406f9.css"
    />
    <noscript
      ><link rel="stylesheet" href="/assets/app.ccd406f9.css"
    /></noscript>

For dependencies with type: 'other', SSG will generate on head, for example for { file: '/assets/test.787f7936.jpg', type: 'other' }:

<link rel="prefetch" href="/assets/test.787f7936.jpg" />

For rest js dependencies just add its corresponding link, for example for '/assets/Counter.adaf98b7.js':

    <link
      rel="modulepreload"
      crossorigin=""
      href="/assets/Counter.adaf98b7.js"
    />

Originally posted by @userquin in https://github.com/antfu/vite-ssg/discussions/58#discussioncomment-960863

antfu-collective / vite-ssg

feat: Add improvements on SSG build #80