react之unpkg.com前端资源加载慢、加载不出

文章目录

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

bash 复制代码
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/[email protected]/dist/charts.min.js',
    //使用 组织架构图、流程图、资金流向图、缩进树图 才需要使用
    //'https://unpkg.com/@ant-design/[email protected]/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

javascript 复制代码
  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/[email protected]/dist/charts.min.js',
    //使用 组织架构图、流程图、资金流向图、缩进树图 才需要使用
    //'https://unpkg.com/@ant-design/[email protected]/dist/charts_g6.min.js',
  ],
    // externals 是 webpack 中的一个配置项,它允许你将一些模块标记为外部依赖,即不会被打包到最终的输出文件中。在这个配置项中,你可以将某些模块指定为外部依赖,并且指定他们在全局变量中的名称,这样在你的代码中使用这些模块时,webpack 就会从全局变量中引用它们,而不是将它们打包进输出文件中。
  externals: {
    // react: 'React',
    // 'react-dom': 'ReactDOM',
    // "@ant-design/charts": "charts"
   },

这段代码是用于加载所需的 JavaScript 库的脚本。scripts、externals的内容我们注释掉~

注意: externals 是 webpack 中的一个配置项,它允许你将一些模块标记为外部依赖,即不会被打包到最终的输出文件中。在这个配置项中,你可以将某些模块指定为外部依赖,并且指定他们在全局变量中的名称,这样在你的代码中使用这些模块时,webpack 就会从全局变量中引用它们,而不是将它们打包进输出文件中。

根据你注释的情况,安装包,比如根据上面,安装如下:

bash 复制代码
npm install react react-dom @ant-design/charts

在 React 应用中,通常会使用 react 和 react-dom 库来创建和渲染组件。而 @ant-design/charts 库是 Ant Design 提供的一个基于 G2Plot 的图表库,用于绘制各种类型的图表。

然后,打包前端

bash 复制代码
npm run build
相关推荐
树上有只程序猿3 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼38 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯