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/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

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/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 就会从全局变量中引用它们,而不是将它们打包进输出文件中。

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

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

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

然后,打包前端

bash 复制代码
npm run build
相关推荐
Huazzi.几秒前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
吃土少女古拉拉8 分钟前
前端和后端
前端·学习笔记
寒雒1 小时前
【Python】实战:实现GUI登录界面
开发语言·前端·python
独上归州1 小时前
Vue与React的Suspense组件对比
前端·vue.js·react.js·suspense
Komorebi⁼1 小时前
Vue核心特性解析(内含实践项目:设置购物车)
前端·javascript·vue.js·html·html5
明月清风徐徐1 小时前
Vue实训---0-完成Vue开发环境的搭建
前端·javascript·vue.js
SameX1 小时前
HarmonyOS Next 企业数据备份与恢复策略
前端·harmonyos
SameX1 小时前
HarmonyOS Next 企业数据传输安全策略
前端·harmonyos
daopuyun1 小时前
LoadRunner小贴士|开发Web-HTTP/HTML协议HTML5相关视频应用测试脚本的方法
前端·http·html
李先静1 小时前
AWTK-WEB 快速入门(1) - C 语言应用程序
c语言·开发语言·前端