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

这篇具有很好参考价值的文章主要介绍了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

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 的图表库,用于绘制各种类型的图表。

然后,打包前端文章来源地址https://www.toymoban.com/news/detail-793187.html

npm run build

到了这里,关于react之unpkg.com前端资源加载慢、加载不出的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 『前端积累』web前端学习资源分享清单

    w3cplus w3school 前端观察 腾讯Web前端Alloy团队 qq前端月报 淘宝前端团队fed 汤姆大叔博客 张鑫旭博客 阮一峰博客 廖雪峰官网 牧云云博客 前端小智 小胡子哥的个人网站 Jerry Qu fouber github 木易杨 github (前端进阶系列) xiaozhi github(小智GitHub博客) 境枫博客(语雀) CavsZhouyou g

    2024年02月08日
    浏览(31)
  • 后端请求转发与请求重定对于向前端静态资源的加载影响

    虽然在实际开发过程中用的很少,这里记录一下遇到的问题。因为有一次导致前端CSS样式文件无法加载,最后找出BUG的步骤 后端代码 前端代码 前端文件路径 URL变化:127.0.0.1:8080/test/hello 不改变 发现前端样式已经丢失,html加载的css,js和图片资源出现了404:因为转发依靠的是

    2024年02月21日
    浏览(55)
  • github版面混乱加载不出的解决办法

    最近出现打开github 界面加载不成功,网页访问乱码,打开chrome的检查发现 github的github.githubassets.com 拒绝访问, 解法: 1.先打开hosts文件所在的目录 C:WindowsSystem32driversetc 2.右键点击hosts文件-选择用记事本或者Notepad++打开该host文件 3.在该hosts文件新增如下IP信息(直接把如下内

    2024年02月13日
    浏览(34)
  • 积木报表集成前端加载js文件404

    在集成积木报表和shiro时候: 集成积木报表,shrio,shrio是定义在另一个模块下的,供另一个启动类使用,积木报表集成shrio的时候,需要依赖存放shrio的核心包,该核心包除了存放shrio之外,还有swagger,mybatisPlus等 积木报表集成后,页面老是加载积木报表中的js,css文件404,查

    2024年02月13日
    浏览(32)
  • Django项目第一次打开加载不出css文件

    你需要找到setting.py如下部分  修改你存放css文件和js等文件的目录 指定正确,本地就能跑了

    2024年02月10日
    浏览(36)
  • Web 前端性能优化之三:加载优化

    2、加载优化 1、延迟加载 本着节约不浪费的原则,在首次打开网站时,应尽量只加载首屏内容所包含的资源,而首屏之外涉及的图片或视频,可以等到用户滚动视窗浏览时再去加载。以上就是延迟加载优化策略的产生逻辑,通过延迟加载“非关键”的图片及视频资源,使得页

    2024年04月26日
    浏览(44)
  • 前端面试:【React】构建现代Web的利器

    嘿,亲爱的React探险家!在前端开发的旅程中,有一个神奇的库,那就是 React 。React是一个用于构建现代Web应用的强大工具,它提供了组件化开发、状态管理、生命周期管理和虚拟DOM等特性,让你的应用开发变得更加高效和愉快。 1. 什么是React? React是一个由Facebook开发和维护

    2024年02月11日
    浏览(56)
  • 基于MSE实现web前端视频预加载

    媒体源扩展 API(MSE) 提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE,媒体流能够通过 创建,并且能通过使用 和 元素进行播放。 正如上面所说,MSE 让我们可以通过 JS 创建媒体资源,使用起来也十分方便: 媒体资源对象创建完毕,接下来就是喂给它视频数据(片段

    2024年02月01日
    浏览(51)
  • Web前端 3D开发入门规划 3D效果将不再是桌面应用的专利

    随着 WEB领域的快速发展 3D技术开始不再是桌面应用的专利 WEB3D技术的应用 实现了启用网址的3维呈现 让界面更直观 立体的展示 他打破了传统平面的展示形式 那么 目前的话 政府也有大量的新基建的项目 如 数字孪生 智慧城市 智慧园区 智慧工厂 智慧消费等等项目都涉及到了

    2024年02月10日
    浏览(42)
  • 【若依】前后端分离部署前端配置二级域名(部署到Nginx上,打开后一直显示正在加载系统资源)

    问题描述 最初部署前端文件到nginx上之后,打开页面却一直显示“正在加载系统资源,请耐心等待”字样,无法正常运行。研究后发现问题是由于服务器使用Nginx转发域名请求,无法使用根目录,所以对前端进行二级域名配置,修改代码如下: vue.config.js 其实若依给的注释里

    2024年02月03日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包