How to implement dynamic loading scripts for vue

This article mainly introduces how vue implements dynamic loading scripts. The article introduces the example code in detail, which has certain reference value for everyone's learning or work. Friends who need it can refer to it.

Today I am studying how to use tinymce rich text editor in vue, and then I see how to use it on other frameworks. It dynamically loads tinymce scripts. If you introduce static files locally or npm installation will cause the vue project to be packaged too large. This method of introducing dynamic scripts is a good practice. The code block below is called dynamicLoadScript. As the name suggests, dynamic loading scripts are dynamically loading. This js is only effective for loading tinymce, but if you want to load other scripts, you can make a little change.

We can create a file

On code:

let callbacks = [];//Put an array to place the callback function
function loadedTinymce() {// Method for detecting whether the script is loaded well. If tinymce is loaded, there will be tinymce attribute on the window object. To load other scripts, you only need to change this judgment. // to fixed /PanJiaChen/vue-element-admin/issues/2144
 // check is successfully downloaded script
 return 
}

const dynamicLoadScript = (src, callback) =&gt; {
 const existingScript = (src);//Get script tag element const cb = callback || function() {};//Get the callback function
 if (!existingScript) {//If there is no script tag for this script  const script = ('script');//Create a script tag   = src // src url for the third-party library being loaded.
   = src
  (script)
  (cb);//Add the callback function to the callbacks array  const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd;//If it is a standard browser, there is onload attribute. If it is an ie browser, there is no onload attribute.  onEnd(script)
 }

 if (existingScript &amp;&amp; cb) {//If this script tag exists and there is a callback function  if (loadedTinymce()) {//Detection of whether there is tinymce attribute   cb(null, existingScript);//If there is a tinymce object, execute the callback function  } else {
   (cb);//If there is no tinymce object, add the callback function to the callback function array  }
 }

 function stdOnEnd(script) {//After the script is loaded by the standard browser   = function() {//After the script is loading successfully   //  = null here is necessary
   // because even IE9 works not like others
    =  = null;//Blank the onload and oneerror properties of the script tag   for (const cb of callbacks) {//Execute callback function The reason why I use an array to place the callback function is to deal with the occurrence of the event.    cb(null, script)
   }
   callbacks = null;//Put callbacks empty  }
   = function() {//After the script fails to load    =  = null;//Empty the script tag's onload and onerror overwrite the native onload and nerror events   cb(new Error('Failed to load ' + src), script);// After the script is loaded incorrectly, the callback function will be executed and the error message will be returned  }
 }

 function ieOnEnd(script) {//If it is ie browser   = function() {//After the script is loading successfully   if ( !== 'complete' &amp;&amp;  !== 'loaded') return;// If the script is not loaded well, the callback function will not be executed. The ie browser will automatically report an error.    = null;//If loading successfully   for (const cb of callbacks) {//Execute the callback function    cb(null, script) // there is no way to catch loading errors in IE8
   }
   callbacks = null;//Empty callbacks  }
 }
}

export default dynamicLoadScript;//Expose the method of dynamically loading scripts

How to use it?

Introduce the above code block into the component (actually, it is to introduce that method)

import load from './dynamicLoadScript'

The appeal path can be introduced according to actual situations

load(tinymceCDN, (err) =&gt; {//tinymceCDN represents the CDN address of tinymce. The next parameter is the callback method    if (err) {//If the script loads incorrectly, this pops up an error message     this.$()
     return
    }
    ();// Otherwise, execute the initialization of the tinymce method   })

The above dynamic loading script is in vue, which I personally think is a good practice and can reduce the size of the vue project.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.