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
相关推荐
小墨宝26 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED41 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿1 小时前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子1 小时前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜2 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js