舆情报告2023,汕头关键词优化服务,怎么设计个人网站,电商网站建设总结为了精简打包输出的dist目录大小#xff0c;我们可以引入CDN外部包的方式#xff0c;来缩小打包的体积#xff0c;加快打包速度。这里介绍Vite和Webpack中如何引入React CDN外部包。
一、Vite引入CDN包
1、安装插件
npm i vitejs/plugin-react-refresh vite-plugin-cdn-i…为了精简打包输出的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-importexport 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;varcdn外部包var方式定义的全局变量名。pathcdn外部包的地址。
3、自动配置
// vite.config.js
import reactRefresh from vitejs/plugin-react-refresh
import importToCDN, { autoComplete } from vite-plugin-cdn-importexport 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 srchttps://cdn.bootcdn.net/ajax/libs/react/18.2.0/umd/react.development.js/script三、CDN开源包仓库
推荐CDN包仓库https://www.bootcdn.cn/react/ 推荐使用UMD版本例如
UMMUMD版本通用的模块版本支持多种模块方式EJSCommonJS-多用于Nodejs项目。ESMECMAScript Modules基于es6中esmodule静态引入机制。
