Vite和Webpack如何使用CDN包

为了精简打包输出的dist目录大小，我们可以引入CDN外部包的方式，来缩小打包的体积，加快打包速度。这里介绍Vite和Webpack中如何引入React CDN外部包。

一、Vite引入CDN包

1、安装插件

npm i @vitejs/plugin-react-refresh vite-plugin-cdn-import -D
1

如何之前在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`,
                },
            ],
        }),
    ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 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(),
    ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

自动配置支持的包：

"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"
1
2
3
4
5
6
7

二、Webpack引入CDN包

如何之前在package.json有安装react，要记得清除。

1、配置 config/config.js

export default defineConfig({
  // webpack5: {
  //   externals: {
  //     react: "React"
  //   }
  // },
  chainWebpack(config) {
    config.externals({
      // '模块名': '全局变量名'
      react: 'React',
    });
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

2、修改html模版

打开src\pages\document.ejs，在标签中引入下面文件：

1

三、CDN开源包仓库

推荐CDN包仓库：https://www.bootcdn.cn/react/
推荐使用UMD版本，例如：

• UMM：UMD版本通用的模块版本，支持多种模块方式
• EJS：CommonJS-多用于Nodejs项目。
• ESM：ECMAScript Modules，基于es6中esmodule静态引入机制。