From ~729KB to ~24.2KB (~11.2KB Gzip)

highlight.worker.js

// Core import
import hljs from 'highlight.js/lib/highlight'

addEventListener('message', async event => {
  const { language, code } = event.data
  // Language import
  const x = await (await import(`highlight.js/lib/languages/${language}`)).default
  // Register language
  hljs.registerLanguage(language, x)
  const result = hljs.highlightAuto(code)
  postMessage(result.value)
})

nuxt.config.js

import webpack from 'webpack'
import WorkerPlugin from 'worker-plugin'

export default {
  build: {
    plugins: [
      new WorkerPlugin()
    ],
    extend: ({ output }) => {
      // output.globalObject is set to "window". It must be set to "self" to support HMR in Workers.
      output.globalObject = 'self'
    }
  }
}

pre.vue

<template>
  <pre v-html="highlight" />
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    language: {
      type: String,
      default: 'javascript'
    }
  },

  data () {
    return {
      highlight: this.content
    }
  },

  beforeMount () {
    if (process.browser) {
      const worker = new Worker('@/assets/workers/highlight.worker.js', { type: 'module' })
      worker.postMessage({ 
        language: this.language, 
        code: this.highlight 
      })
      worker.onmessage = event => this.highlight =  event.data
    }
  }
}
</script>