Vite和Webpack如何使用CDN包

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

一、Vite引入CDN包

1、安装插件

sh 复制代码
npm i @vitejs/plugin-react-refresh vite-plugin-cdn-import -D

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

2、手动配置

ts 复制代码
// 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、自动配置

ts 复制代码
// 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

ts 复制代码
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静态引入机制。
相关推荐
江号软件分享1 小时前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js