Back to the contents of Vue

# How to get rid of markdown-it for optimizing the bundle size of the Vue2 app.

The size of markdown-it is slightly big. If your app is slow to start due to bundle download time, you can remove it from the bundle by using markdown-it with the CDN.

Add the CDN link to the file index.html under the public folder.

For example:


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <!-- markdown-it -->
    <script src=""></script>

# Add external setting

Add an external setting of xterm on the vue.config.js file as refer markdown-it for the external global variable named without a hyphen as markdown as follows:


module.exports = {
  chainWebpack: (config) => {

# import markdown-it as usual

In the .vue file using the markdown-it, import markdown-it as usual.



    <div v-html="md.render(news)"/>

var MarkdownIt = require('markdown-it')
export default {
  data: () => ({
    md: new MarkdownIt({
    news: "# still in development"

# references

Last Updated: 1/22/2023, 9:30:53 AM