createClientConfig.ts

import {
  CopyRspackPlugin,
  CssExtractRspackPlugin,
  LightningCssMinimizerRspackPlugin,
} from '@rspack/core'
import type { Module } from '@rspack/core'
import type { App } from '@vuepress/core'
import { fs } from '@vuepress/utils'
import type { RspackChain } from 'rspack-chain'

import { createClientBaseConfig } from '../config/index.js'
import type { RspackBundlerOptions } from '../types.js'
import { createClientPlugin } from './createClientPlugin.js'

/**
 * Filename of the client manifest file that generated by client plugin
 */
export const CLIENT_MANIFEST_FILENAME = '.server/client-manifest.json'

export const createClientConfig = async (
  app: App,
  options: RspackBundlerOptions,
): Promise<RspackChain> => {
  const config = await createClientBaseConfig({
    app,
    options,
    isBuild: true,
  })

  // vuepress client plugin, handle client assets info for ssr
  config
    .plugin('vuepress-client')
    .use(createClientPlugin(app.dir.temp(CLIENT_MANIFEST_FILENAME)))

  // copy files from public dir to dest dir
  if (fs.pathExistsSync(app.dir.public())) {
    config.plugin('copy').use(CopyRspackPlugin, [
      {
        patterns: [{ from: app.dir.public(), to: app.dir.dest() }],
      },
    ])
  }

  // optimizations for production mode
  // css-extract
  config.plugin('css-extract').use(CssExtractRspackPlugin, [
    {
      filename: 'assets/css/styles.[chunkhash:8].css',
    },
  ])

  config.optimization.splitChunks({
    cacheGroups: {
      // ensure all css are extracted together.
      // since most of the CSS will be from the theme and very little
      // CSS will be from async chunks
      styles: {
        idHint: 'styles',
        // necessary to ensure async chunks are also extracted
        test: (m: Module) => m.type.includes('css/mini-extract'),
        chunks: 'all',
        enforce: true,
        reuseExistingChunk: true,
      },
      // extract external library to a standalone chunk
      vendor: {
        idHint: 'vendor',
        test: /node_modules/,
        chunks: 'all',
        priority: -10,
        reuseExistingChunk: true,
      },
    },
  })

  // enable runtimeChunk
  config.optimization.runtimeChunk(true)

  // minimize
  config.optimization.minimize(true)

  // minimizer
  config.optimization.set('minimizer', [
    // keep the default minimizer
    '...',
    // add css minimizer
    new LightningCssMinimizerRspackPlugin(),
  ])

  // disable performance hints
  if (!app.env.isDebug) {
    config.performance.hints(false)
  }

  return config
}