Para optimizar el tamaño del directorio de la salida del empaquetado dist
, podemos introducir paquetes externos CDN para reducir el volumen del empaquetado y acelerar el empaquetado. Aquí hay una introducción Vite
sobre Webpack
cómo presentarlo React CDN外部包
.
1. Vite presenta el paquete CDN
1. Instale el complemento
npm i @vitejs/plugin-react-refresh vite-plugin-cdn-import -D
package.json
Si se ha instalado antes react
, recuerde borrarlo.
2. Configuración manual
// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'
import importToCDN from 'vite-plugin-cdn-import'
export default {
plugins: [
importToCDN({
modules: [
{
name: 'react',
var: 'React',
path: `umd/react.production.min.js`,
},
{
name: 'react-dom',
var: 'ReactDOM',
path: `umd/react-dom.production.min.js`,
},
],
}),
],
}
import
nombre: nombre del módulo, que es el nombre del paquete cuando se introduce en el proyecto , por ejemplo:import React, { useState } from 'react';
var
var: nombre de variable global definido por el paquete externo cdn .- ruta: la dirección del paquete externo cdn.
3. Configuración automática
// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'
import importToCDN, {
autoComplete } from 'vite-plugin-cdn-import'
export default {
plugins: [
importToCDN({
modules: [
autoComplete('react'),
autoComplete('react-dom')
],
}),
reactRefresh(),
],
}
Paquetes soportados por configuración automática:
"react" | "react-dom" | "react-router-dom" |
"antd" | "ahooks" | "@ant-design/charts" |
"vue" | "vue2" | "@vueuse/shared" |
"@vueuse/core" | "moment" |
"eventemitter3" | "file-saver" |
"browser-md5-file" | "xlsx | "crypto-js" |
"axios" | "lodash" | "localforage"
2. Webpack presenta el paquete CDN
package.json
Si se ha instalado antes react
, recuerde borrarlo.
1. Configurar config/config.js
export default defineConfig({
// webpack5: {
// externals: {
// react: "React"
// }
// },
chainWebpack(config) {
config.externals({
// '模块名': '全局变量名'
react: 'React',
});
}
})
2. Modificar la plantilla html
Ábrelo src\pages\document.ejs
e introduce los siguientes archivos en la etiqueta:
<script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
3. Almacén de paquetes de código abierto CDN
Almacén de paquetes CDN recomendado: https://www.bootcdn.cn/react/Versión
recomendada UMD
, Por ejemplo:
- UMM: una versión de módulo común de la versión UMD, que admite múltiples métodos de módulo
- EJS: CommonJS: utilizado principalmente en proyectos Nodejs.
- ESM: Módulos ECMAScript, basados en el mecanismo de introducción estática de esmodule en es6.