Vite-plugin-inject-externals NPM

When vite is packaged, the specified module is imported from CDN instead.

Script tag and link tag can be injected into the specified location.

Reduce build time and increase page load speed in production environments.

Installation

Install the plugin with npm:

npm install --save-dev vite-plugin-inject-externals

Basic Usage

// vite.config.js
import injectExternals from 'vite-plugin-inject-externals'

export default {
  plugins: [
    injectExternals({
      // Default value: 'head-prepend'
      // The custom injection location will replace the corresponding text in index.html
      injectTo: '<!-- Custom placeholder for vite plugin inject externals -->',
      modules: [
        {
          name: 'vue',
          global: 'Vue',
          path: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js'
        },
        {
          name: 'axios',
          global: 'axios',
          // If there are name and global, but there are no path and htmltag, the global variables will be replaced directly, but the script tag will not be injected
          // path: 'https://cdn.jsdelivr.net/npm/axios@0.22.0/dist/axios.min.js'
        },
        {
          name: 'md-editor-v3',
          global: 'MdEditorV3',
          path: 'https://cdn.jsdelivr.net/npm/md-editor-v3@1.5.0/lib/md-editor-v3.umd.js',
          injectTo: '<!-- example2 -->'
        },
        // If there is path but no global, the link tag will be injected
        {
          name: 'md-editor-v3/lib/style.css',
          // If there is a name but no global, the import of name will be deleted, which is only applicable to bare imports(import 'md-editor-v3/lib/style.css')
          path: 'https://cdn.jsdelivr.net/npm/md-editor-v3@1.5.0/lib/style.css',
        }
      ]
    })
  ],
}

Result

// dev
import { createApp } from 'vue'
import axios from 'axios'
import MdEditorV3 from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'

createApp()
axios()
console.log(MdEditorV3)

// build
Vue.createApp()
axios()
console.log(MdEditorV3)

<!-- Inject CDN links -->
<script type="text/javascript" src="https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js"></script>

Extended usage

// vite.config.js
import injectExternals from 'vite-plugin-inject-externals'

export default {
  plugins: [
    injectExternals({
      // Default value: 'head-prepend'
      // The custom injection location will replace the corresponding text in index.html
      injectTo: '<!-- Custom placeholder for vite plugin inject externals -->',
      modules: [
        {
          name: 'vue',
          // When the import method is bare imports(import 'md-editor-v3/lib/style.css'), and there is a name('md-editor-v3/lib/style.css') but no global, the import will be deleted.
          // When the import method is not bare imports, and there are name and global, the global variables will be replaced.
          global: 'Vue',
          // If there is a path, the script tag will be injected if there are name and global.
          // If there is a path, the link tag will be injected if there is no global.
          path: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js',
          // Custom HTML tags with higher priority than path
          htmlTag: {
            tag: 'script',
            attrs: {
              type: 'text/javascript',
              crossorigin: '',
              src: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js'
            }
          },
          // Module has no injectto. The injectto of the previous layer is the default
          injectTo: '<!-- Custom1 -->'
        }
      ]
    })
  ],
}

InjectExternalsConfig

Name	Required	Desc	Type	Default
command	`false`	Inject HTML tag when running which command, A value of true indicates that HTML tags are injected when both build and serve commands are run	`'build' / true`	`'build'`
injectTo	`false`	Location of HTML tags injection	`'head' / 'body' / 'head-prepend' / 'body-prepend' / string`	`'head-prepend'`
modules	`true`	Modules configuration	`InjectExternalsModule[]`	`[]`

InjectExternalsModule

Name	Required	Desc	Type	Default
name	`false`	Module name	`string`
global	`false`	Global variables corresponding to the module	`string`
path	`true`	CDN link of JS or CSS resources. If there is no global, it indicates that it is a CSS resource.	`string`
htmlTag	`true`	Custom HTML tags, priority is higher than path.	`HtmlTag`
injectTo	`false`	Location of HTML tags injection	`string`	`InjectExternalsConfig.injectTo`