Bundle Size Reduction

[brophdawg11]

Is there any way to opt in to portions of the vue-markdown package for limited functionality and a smaller build? The bundle is prohibitively large for a simple markdown display component.

https://bundlephobia.com/result?p=vue-markdown@2.2.4

[failpunk]

Anyone using any alternatives? There haven't been any commits in well over a year and this thing is huge!

[wopian]

The only other Vue-specific alternatives I'm aware of are considerably larger than vue-markdown's 167.7 kB size 😭

203.7 kB https://bundlephobia.com/result?p=vue-simple-markdown@1.0.8 232.9 kB https://bundlephobia.com/result?p=m-markdown-preview@1.0.0 1.1 mB https://bundlephobia.com/result?p=markdown-it-vue@1.0.5

---

However, you can use the framework-agnostic marked which weighs in at only 7.2 kB (https://bundlephobia.com/result?p=marked@0.5.1). Example implementation: https://vuejs.org/v2/examples/

[BlakeCampbells]

I just went through and used marked.

What I came up with was alot like Basic Examples.

Just as a way to keep refactoring easy I name this:

vue-markdown

<template>
  <div v-html="compiledMarkdown"></div>
</template>

<script>
import marked from 'marked'

export default {
  props: {
    source: { default: '', type: String },
  },
  computed: {
    compiledMarkdown: function () {
      return marked(this.source, { sanitize: true, breaks: true })
    }
  },
}
</script>

Then my components were changed from

Before

<vue-markdown :html="true" :linkify="true" :source="webContent"/>

After

<vue-markdown :source="webContent"/>

After changing the imports to look at my component it was good. If you are using VueMarkdown's more advanced options then you might need to make additional changes.