react之unpkg.com前端资源加载慢
什么是unpkg.com
unpkg 是一个内容源自 npm 的全球快速 CDN。
作为前端开发者，我们对 unpkg 都不陌生，它是一个基于 npm registry 的静态资源 CDN 服务。
它提供了一种快捷的静态资源访问能力，只需要遵循约定的 URL 进行访问，即可在页面中加载任意 npm 包里面的文件内容。虽然前端的开发模式已经不像当年那么的轻量的，往往需要用 webpack 等构建后进行部署。但在很多轻量的场景下，往往希望直接引入公共的 npm 包
加载慢原因
unpkg有时候会被墙了，unpkg上的相关资源都不能访问，才导致项目资源加载不出。
解决方案
替换国内cdn
在react项目 config/config.ts 中找到相关配置，关键字： unpkg.com
export default defineConfig({
// 前端配置了 publicPath 为 /static/，那么前端应用程序在生产环境下应该通过 /static/ 路径来访问静态资源
publicPath: process.env.NODE_ENV === 'production' ? '/static/' : '/',
hash: true,
antd: {},
dva: {
hmr: true,
},
// for Ant Design Charts https://pro.ant.design/zh-CN/docs/graph
scripts: [
'https://unpkg.com/react@17/umd/react.production.min.js',
'https://unpkg.com/react-dom@17/umd/react-dom.production.min.js',
'https://unpkg.com/@ant-design/charts@1.0.5/dist/charts.min.js',
//使用 组织架构图、流程图、资金流向图、缩进树图 才需要使用
//'https://unpkg.com/@ant-design/charts@1.0.5/dist/charts_g6.min.js',
],
externals: {
react: 'React',
'react-dom': 'ReactDOM',
"@ant-design/charts": "charts"
},
把 unpkg.com 换成国内cdn源。
把 unpkg.com 替换成unpkg.zhimg.com
在 package.json 中打包进来
可以将这些脚本的加载方式从外部 CDN 改为在 package.json 中打包进来。
config/config.ts 中找到相关配置，关键字： unpkg.com
scripts: [
//全部注释掉，不使用cdn源，直接pacakge.json中引入
// 'https://unpkg.com/react@17/umd/react.production.min.js',
// 'https://unpkg.com/react-dom@17/umd/react-dom.production.min.js',
// 'https://unpkg.com/@ant-design/charts@1.0.5/dist/charts.min.js',
//使用 组织架构图、流程图、资金流向图、缩进树图 才需要使用
//'https://unpkg.com/@ant-design/charts@1.0.5/dist/charts_g6.min.js',
],
// externals 是 webpack 中的一个配置项，它允许你将一些模块标记为外部依赖，即不会被打包到最终的输出文件中。在这个配置项中，你可以将某些模块指定为外部依赖，并且指定他们在全局变量中的名称，这样在你的代码中使用这些模块时，webpack 就会从全局变量中引用它们，而不是将它们打包进输出文件中。
externals: {
// react: 'React',
// 'react-dom': 'ReactDOM',
// "@ant-design/charts": "charts"
},
这段代码是用于加载所需的 JavaScript 库的脚本。scripts、externals的内容我们注释掉~
注意： externals 是 webpack 中的一个配置项，它允许你将一些模块标记为外部依赖，即不会被打包到最终的输出文件中。在这个配置项中，你可以将某些模块指定为外部依赖，并且指定他们在全局变量中的名称，这样在你的代码中使用这些模块时，webpack 就会从全局变量中引用它们，而不是将它们打包进输出文件中。
根据你注释的情况，安装包，比如根据上面，安装如下：
npm install react react-dom @ant-design/charts
在 React 应用中，通常会使用 react 和 react-dom 库来创建和渲染组件。而 @ant-design/charts 库是 Ant Design 提供的一个基于 G2Plot 的图表库，用于绘制各种类型的图表。
然后，打包前端
npm run build