Passé de mode

Back to the contents of Vue

# How to get rid of xTerm.js for optimizing the bundle size of the Vue2 app.

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

Add the CDN link to the file index.html under the public folder. Then, set the object { Terminal } ``` to the global variablewindow.xterm`` For example:






 
 
 


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

    <!-- Xterm -->
    <script src="https://cdn.jsdelivr.net/npm/xterm@4.16.0/lib/xterm.min.js"></script>
    <script> window.xterm = { Terminal }; </script>
  </head>

# Add external setting

Add an external setting of xterm on the vue.config.js file as refer xterm for the external global variable xterm as follows:




 




module.exports = {
  chainWebpack: (config) => {
      config.externals({
        "xterm":"xterm",
      })
  }
}

# Import Terminal and css on the file using xTerm

In the .vue file using the xterm, import Terminal function as usual from xterm and import css directory from the CDN as follows:







 















 


<template>
  <div ref="Xterm"></div>
</template>

<script>
//import 'xterm/css/xterm.css'
import { Terminal } from 'xterm'

export default {
  methods: {
    refreshXterm(){
      this.newXterm()
    },
    newXterm(){
      this.term = new Terminal();
      this.term.open(this.$refs.Xterm)
    },
  },
}
</script>

<style>
@import 'https://cdn.jsdelivr.net/npm/xterm@4.16.0/css/xterm.css';
</style>
Last Updated: 1/22/2023, 9:30:53 AM

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