Home / Class/ VueSSRServerPlugin Class — vue Architecture

VueSSRServerPlugin Class — vue Architecture

Architecture documentation for the VueSSRServerPlugin class in server.ts from the vue codebase.

Entity Profile

Dependency Diagram

graph TD
  98d7d741_3778_ad2e_a5fb_07b84450328e["VueSSRServerPlugin"]
  cd66000a_18c2_302c_0879_e0c30e3bf787["server.ts"]
  98d7d741_3778_ad2e_a5fb_07b84450328e -->|defined in| cd66000a_18c2_302c_0879_e0c30e3bf787
  3c4d0f54_eb47_bd36_938f_a716452a4213["constructor()"]
  98d7d741_3778_ad2e_a5fb_07b84450328e -->|method| 3c4d0f54_eb47_bd36_938f_a716452a4213
  a49da80f_b793_f663_40e5_6baf1d842252["apply()"]
  98d7d741_3778_ad2e_a5fb_07b84450328e -->|method| a49da80f_b793_f663_40e5_6baf1d842252

Relationship Graph

Source Code

packages/server-renderer/src/webpack-plugin/server.ts lines 3–74

export default class VueSSRServerPlugin {
  constructor(options = {}) {
    //@ts-expect-error
    this.options = Object.assign(
      {
        filename: 'vue-ssr-server-bundle.json'
      },
      options
    )
  }

  apply(compiler) {
    validate(compiler)

    const stage = 'PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER'
    onEmit(compiler, 'vue-server-plugin', stage, (compilation, cb) => {
      const stats = compilation.getStats().toJson()
      const entryName = Object.keys(stats.entrypoints)[0]
      const entryInfo = stats.entrypoints[entryName]

      if (!entryInfo) {
        // #5553
        return cb()
      }

      const entryAssets = entryInfo.assets.map(getAssetName).filter(isJS)

      if (entryAssets.length > 1) {
        throw new Error(
          `Server-side bundle should have one single entry file. ` +
            `Avoid using CommonsChunkPlugin in the server config.`
        )
      }

      const entry = entryAssets[0]
      if (!entry || typeof entry !== 'string') {
        throw new Error(
          `Entry "${entryName}" not found. Did you specify the correct entry option?`
        )
      }

      const bundle = {
        entry,
        files: {},
        maps: {}
      }

      Object.keys(compilation.assets).forEach(name => {
        if (isJS(name)) {
          bundle.files[name] = compilation.assets[name].source()
        } else if (name.match(/\.js\.map$/)) {
          bundle.maps[name.replace(/\.map$/, '')] = JSON.parse(
            compilation.assets[name].source()
          )
        }
        // do not emit anything else for server
        delete compilation.assets[name]
      })

      const json = JSON.stringify(bundle, null, 2)
      //@ts-expect-error
      const filename = this.options.filename

      compilation.assets[filename] = {
        source: () => json,
        size: () => json.length
      }

      cb()
    })
  }
}

Frequently Asked Questions

What is the VueSSRServerPlugin class?
VueSSRServerPlugin is a class in the vue codebase, defined in packages/server-renderer/src/webpack-plugin/server.ts.
Where is VueSSRServerPlugin defined?
VueSSRServerPlugin is defined in packages/server-renderer/src/webpack-plugin/server.ts at line 3.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free