https://github.com/mmf-fe/vite-plugin-cdn-import
Import modules from CDN with vite plugin
https://github.com/mmf-fe/vite-plugin-cdn-import
cdn vite-plugin
Last synced: 2 months ago
JSON representation
Import modules from CDN with vite plugin
- Host: GitHub
- URL: https://github.com/mmf-fe/vite-plugin-cdn-import
- Owner: MMF-FE
- License: mit
- Created: 2021-05-16T01:47:02.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-23T05:06:56.000Z (11 months ago)
- Last Synced: 2025-03-23T16:01:35.664Z (3 months ago)
- Topics: cdn, vite-plugin
- Language: TypeScript
- Homepage:
- Size: 269 KB
- Stars: 218
- Watchers: 4
- Forks: 33
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Import modules from CDN with vite plugin
English | [简体中文](README.zh-CN.md)
[](https://github.com/MMF-FE/vite-plugin-cdn-import/releases)
[](https://github.com/MMF-FE/vite-plugin-cdn-import/blob/master/LICENSE)
Allows you to specify modules to be introduced in a production environment using a CDN.
This can reduce build time and improve page load speed in production environments.
## Installation
Install the plugin with npm:
```
npm install vite-plugin-cdn-import --save-dev
```
or yarn
```
yarn add vite-plugin-cdn-import -D
```
## Basic Usage
Add it to vite.config.js
```js
// vite.config.js
import cdn from 'vite-plugin-cdn-import'
export default {
plugins: [
cdn({
modules: [
{
name: 'react',
var: 'React',
path: `umd/react.production.min.js`,
},
{
name: 'react-dom',
var: 'ReactDOM',
path: `umd/react-dom.production.min.js`,
},
],
}),
],
}
```
### Use preset
```js
// vite.config.js
import cdn from 'vite-plugin-cdn-import'
export default {
plugins: [
cdn({
modules: ['react', 'react-dom'],
}),
],
}
```
### Preset packages
- react
- react-dom
- react-router-dom
- antd
- vue
- vue2
- vue-router
- vue-router@3
- moment
- dayjs
- axios
- lodash
## Options
### prodUrl
Global prodUrl attribute, template url that generates CND file path.
- REF: [prodUrl](https://github.com/shirotech/webpack-cdn-plugin?tab=readme-ov-file#produrlstring--unpkgcomnameversionpath)
- Type
```ts
{
prodUrl?: string
}
```
- Default:
### modules
external config
- Type
```ts
type GetModuleFunc = (prodUrl: string) => Module
{
modules: (Module | Module[] | GetModuleFunc | GetModuleFunc[])[]
}
```
### enableInDevMode
Enabled in dev mode
- Type: `boolean`
- Default：`false`
> Please ensure process.env.NODE_ENV === 'development' when you use vite2, vite3.
### generateScriptTag
Custom generated script tags
- Type
```ts
generateScriptTag?: (
name: string,
scriptUrl: string,
) => Omit
```
### generateCssLinkTag
Customize generated css link tags
- Type
```ts
generateCssLinkTag?: (
name: string,
cssUrl: string,
) => Omit
```
### Module
| Name | Description | Type |
| ---- | --------------------------------------------- | ----------------- |
| name | package name | string |
| alias | Alias of name, for example "react-dom/client" is an alias of "react-dom" | string[] |
| var | Variables assigned globally to the module| string |
| path | Specify the load path on the CDN | string / string[] |
| css | Multiple style sheets can be loaded from CDN addresses | string / string[] |
| prodUrl | Override global prodUrl | string / string[] |
## Other CDN pordUrl
| Name | pordUrl |
| ----- | -------------------------------------------------------- |
| unpkg | //unpkg.com/{name}@{version}/{path} |
| cdnjs | //cdnjs.cloudflare.com/ajax/libs/{name}/{version}/{path} |
## Ressources
- [webpack-cdn-plugin](https://github.com/shirotech/webpack-cdn-plugin)
- [rollup-plugin-external-globals](https://github.com/eight04/rollup-plugin-external-globals)
- [vite-plugin-externals](https://github.com/crcong/vite-plugin-externals)