为了精简打包输出的dist
目录大小,我们可以引入CDN外部包的方式,来缩小打包的体积,加快打包速度。这里介绍Vite
和Webpack
中如何引入React CDN外部包
。
一、Vite引入CDN包
1、安装插件
npm i @vitejs/plugin-react-refresh vite-plugin-cdn-import -D
如何之前在package.json
有安装react
,要记得清除。
2、手动配置
// 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`,},],}),],
}
- name:模块名,也就是在项目中
import
引入时的包名,例如:import React, { useState } from 'react';
- var:cdn外部包
var
方式定义的全局变量名。 - path:cdn外部包的地址。
3、自动配置
// 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(),],
}
自动配置支持的包:
"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"
二、Webpack引入CDN包
如何之前在package.json
有安装react
,要记得清除。
1、配置 config/config.js
export default defineConfig({// webpack5: {// externals: {// react: "React"// }// },chainWebpack(config) {config.externals({// '模块名': '全局变量名'react: 'React',});}
})
2、修改html模版
打开src\pages\document.ejs
,在标签中引入下面文件:
<script src="https://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js"></script>
三、CDN开源包仓库
推荐CDN包仓库:https://www.bootcdn.cn/react/
推荐使用UMD
版本,例如:
- UMM:UMD版本通用的模块版本,支持多种模块方式
- EJS:CommonJS-多用于Nodejs项目。
- ESM:ECMAScript Modules,基于es6中esmodule静态引入机制。