Vite和Webpack如何使用CDN包

为了精简打包输出的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静态引入机制。