vite-plugin-fast-external
🚀 High performance without lexical transform
🌱 Support custom external code
📦 Built in Vue, React, Antd, Element and others, Out of the box
English | 简体中文
-
Like Webpack externals, support browser, Node.js and Electron
-
With out ast analyze, load virtual files by resolveId-hooks -- Real efficient
-
Support customize the code snippets by return string from function -- Real flexible 🎉
Install
npm i vite-plugin-fast-external -D
Usage
import external from 'vite-plugin-fast-external'
export default {
plugins: [
external({
vue: 'Vue',
}),
],
}
Builtins
You can easily use some builtin modules
import external from 'vite-plugin-fast-external'
import {
antd_vue_v1,
antd_vue_v3,
antd_v4,
element_plus,
element_ui,
react_dom_v17,
react_dom_v18,
react_v17,
react_v18,
vue_composition_api,
vue_v2,
vue_v3,
} from 'vite-plugin-fast-external/presets'
export default {
plugins: [
external({
'ant-design-vue': antd_vue_v3,
antd: antd_v4,
'element-plus': element_plus,
'element-ui': element_ui,
'react-dom/client': react_dom_v18,
react: react_v18,
'@vue/composition-api': vue_composition_api,
vue: vue_v3,
}),
],
}
In your web App
import { ref, reactive, watch } from 'vue'
import { ref, reactive, watch } from '@vue/composition-api'
import { useState, useEffect, useMemo } from 'react'
import { createRoot } from 'react-dom/client'
import { Button, Table } from 'antd'
If you want to modify the builtin module
import { libMeta2external } from 'vite-plugin-fast-external/presets'
import vue_v2 from 'vite-plugin-fast-external/presets/vue-v2'
vue_v2.name = 'ExtendVue'
vue_v2.members = vue_v2.members.push('ExtendAPI')
export default {
plugins: [
external({
vue: libMeta2external(vue_v2),
}),
],
}
Customize (Advance)
Support custom external code by function
external({
module: () => `
const M = window.Module;
const D = M.default || M;
export { D as default };
export const member1 = M.member1;
// other members...
`,
})
Load a file
Support nested module id, support return Promise
resolve({
'path/filename': () => require('fs/promises').readFile('path', 'utf-8'),
})
API
external(entries)
type entries = Record<string, string | ((id: string) => string | Promise<string>)>;
How to work
In fact, the plugin will intercept your module import and return the specified code snippet
Let's use external({ vue: 'Vue' })
as an example, this will get the below code
const M = window['Vue']; export { M as default }