Various ways to introduce external scripts in Vue projects

introduction

In modern front-end development, we often need to use some third-party external scripts or libraries, especially maps, charts, analysis tools, etc. In Vue projects, there are several ways to introduce external scripts, and the choice depends on the project's requirements and performance requirements. This article will introduce in detail several common methods for introducing external scripts into the Vue project, and discuss the applicable scenarios, advantages and disadvantages and implementation methods of each method.

1. Introduce external scripts in public/

Applicable scenarios:

This can be introduced in this way when external libraries are global and multiple components in the project need to be used. Typical scenarios include map API, analysis tools, etc.

Implementation method:

On the Vue projectpublic/In the file, directly pass<script>Tags introduce external JavaScript files.

&lt;!-- exist public/ Introduce external scripts --&gt;
&lt;head&gt;
  &lt;script src="/"&gt;&lt;/script&gt;
&lt;/head&gt;

advantage:

Simple and easy to use: Just inIntroduced once in the project, all components in the project can be accessed.
Globally available: The imported external scripts will take effect throughout the application and are suitable for libraries that require global use.

shortcoming:

No loading on demand: All scripts will be loaded at the start of the application, which may lead to unnecessary loading and affect performance.
Unable to dynamically control: The script cannot be loaded dynamically based on conditions, which may lead to unnecessary waste of resources.

2. Introduce using the <script> tag in Vue component

Applicable scenarios:

Suitable for situations where external libraries are used only in a specific component and do not want it to load globally.

Implementation method:

In Vue componentsmounted()In the hook, dynamically insert it through JavaScript.<script>Tags to load external resources.

&lt;template&gt;
  &lt;div&gt;
    &lt;!-- Vue Component content --&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  mounted() {
    const script = ('script');
     = '/';
     = () =&gt; {
      // Logic execution after the script is loaded    };
    (script);  // Add script to page  }
}
&lt;/script&gt;

advantage:

High flexibility: Suitable for scenarios where external scripts need to be loaded on demand.
Load on demand: Scripts are loaded only when components are loaded, reducing unnecessary waste of resources.

shortcoming:

Loading order issue: You need to make sure that the script has been loaded before use. Can be passedonloadEvents or Promise to ensure loading order.
Manual management: It is necessary to manually manage the loading and unloading of external libraries, which may lead to memory leaks.

3. Introduce external libraries through the () plug-in mechanism

Applicable scenarios:

Suitable for situations where external libraries are Vue plugins, for examplevue-router、vuexwait.

Implementation method:

existorPassed in the file()Introduce and use plug-ins.

import Vue from 'vue';
import SomeLibrary from 'some-library';

(SomeLibrary);

advantage:

concise: Just call once()You can install plug-ins, a library suitable for global use.
Automated management:Vue will automatically manage the life cycle and dependencies of the plug-in.

shortcoming:

Available for Vue plug-ins only: This method is only applicable to Vue plug-ins and cannot be used in ordinary JavaScript libraries.

4. Introduce external modules through import or require

Applicable scenarios:

When the external library has been installed into the project through npm, useimportorrequireIntroduced. This method is suitable for modular JavaScript libraries.

Implementation method:

passimportorrequireIntroduce external modules in Vue components or other JavaScript files.

import SomeLibrary from 'some-library';

// Or use requireconst SomeLibrary = require('some-library');

advantage:

Modular management:passimportorrequireIt can clearly manage external dependencies in the project and have clear code structure.
Build tool optimization:Webpack or Vite can optimize these modules, such as code segmentation, lazy loading, etc.

shortcoming:

Requires installation of the library: The dependency must be installed through npm, and external CDN scripts cannot be directly introduced.

5. Dynamic import() load on demand

Applicable scenarios:

When a project needs to load external libraries on demand, it reduces the resource burden during initial loading, especially under the requirements of performance optimization.

Implementation method:

passimport()Dynamically load modules or external libraries.

// Load external libraries on demand in Vue componentexport default {
  mounted() {
    import('/')
      .then((module) =&gt; {
        // Use dynamically loaded libraries        (module);
      })
      .catch((error) =&gt; {
        ('Failed to load external script:', error);
      });
  }
};

advantage:

Load on demand: Load scripts only when needed, reducing the resource size for the first load.
Modular: Dynamicimport()It can be compatible with modular systems and provide a more flexible loading method.

shortcoming:

Asynchronous loading: Dynamic loading is asynchronous and needs to deal with load order issues. You may need to usePromiseto ensure the script loading order.
Browser compatibility: Although most modern browsers support dynamicsimport(), but some older versions of browsers may not support it and may require polyfill.

6. Use the Vue CLI or Vite plug-in to configure external libraries

Applicable scenarios:

Suitable for situations where certain external libraries are required to be introduced globally and centrally managed through build tools.

Implementation method (Vite configuration example):

// Configure external scriptsexport default {
  plugins: [
    {
      name: 'external-scripts',
      transformIndexHtml(html) {
        return (
          '&lt;head&gt;',
          `&lt;head&gt;&lt;script src="/"&gt;&lt;/script&gt;`
        );
      },
    },
  ],
};

advantage:

Centralized management: Centrally manage the introduction of external scripts through the build tool plug-in, avoiding manual introduction in each component.
No need to modify components: No need to manually introduce external libraries into Vue components, reducing redundancy.

shortcoming:

Complex configuration: It needs to modify the configuration file of the build tool, suitable for developers with certain development experience.

7. Summary

There are many ways to introduce external scripts in Vue projects, and the appropriate solution should be selected based on project requirements, performance requirements and usage scenarios. For global libraries, it is recommended topublic/Introduced in ; For libraries loaded on demand or used in specific components, dynamic import() or dynamic insertion within the component can be used.<script>Label. For modularly managed libraries, you can directly useimportorrequireIntroduced.

The above is the detailed content of various ways to introduce external scripts in the Vue project. For more information about Vue introducing external scripts, please pay attention to my other related articles!