dva+react中的CDN缓存

最新推荐文章于 2023-02-18 18:19:59 发布
最新推荐文章于 2023-02-18 18:19:59 发布
阅读量718 收藏
点赞数
分类专栏： web前端 文章标签： reactjs webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41604826/article/details/103717113
版权
所谓CDN缓存

已经放在服务器的项目，如果做了调整重新打包上传之后发现，不会及时更新，刷新没用，必须清除缓存才有用。就是因为CDN缓存，这个缓存的存在是为了减轻服务器的请求压力，但是无疑也造成了困扰，怎么结局？
调整配置文件：此处是使用dva+react，使用的打包工具是roadhog,所以调整.webpackrc文件
1.添加配置：

 "hash": true,
  "html": {
    "template": "./src/index.ejs"
  },

2:创建index.ejs文件，内容等同public中的Index.html
3:打包之后会发现每个js文件都会后缀一个随机数，而且当修改了某个文件之后，对应的文件随机数也会变更，重新上传之后，资源名字有差异，就会请求新的数据，就达到加载最新数据的目的
在这里插入图片描述

~小仙女~
关注
专栏目录
react_T_v18
Pwsifeng的博客
06-16 1646
初学者
React相关知识点
m0_56752010的博客
10-26 610
一、什么是 React? - 官方解释：用于构建用户界面的 JavaScript 库。是一个将数据渲染为 HTML 视图的开源 JavaScript 库。 - 1.发送请求获取数据 - 2.处理数据（过滤、整理格式等） - 3.操作 DOM 呈现页面 二、为什么要学？ - 原生 JavaScript 操作 DOM 繁琐，效率低；（DOM-API 操作UI） - 使用 JavaScript 直接操作 DOM ,浏览器会进行大量的重绘重排； - 原生 JavaScript 没有组件化编码方案，代码复用率低； 三
React 页面缓存 keep-Alive
qq_40837841的博客
02-18 825
React 页面缓存 keep-Alive
react路由缓存实现原理
QingHan_wow的博客
07-05 1304
琢磨了很久，如果一个路由里的状态很多，那么如果手动将状态存到redux或者dva或者localStorage里，等路由再次渲染的时候初始化数据是非常麻烦的，但是如果只是将路由的dom节点隐藏，不从dom树中删除，那么就免去了很多数据的存取逻辑，主要的逻辑如下，技术用的是umi+reacthooks+dva+typescript。 如果不熟悉umi的项目框架可以先去学习一下umi的基础，再来看这篇文章。 创建父路由layouts布局，ui设计稿里所有的页面都是基于这个layouts父路由的子路由，我们再lay
React和dva项目前端问题详解
qq_41609775的博客
11-05 911
1. config文件单独打包 在前端项目根目录建立文件webpack.config.js ，若存在，则在里面修改代码。 webpack.config.js里面代码如下。 let webpack = require('webpack'); let path = require('path'); export default function (config, env) { Object.a...
react 从列表页到详情页返回后保持列表页的状态
zyf_baby的博客
07-03 3877
react 从列表页到详情页返回后保持列表页的状态痛点解决方案：react-router-cache-route实现页面状态的缓存版本用法详细例子1.配置路由2.修改缓存页面的部分内容-didRecover 痛点 移动端开发时会遇到在列表页点击进入详情，返回后列表页刷新的情况，对用户体验很不友好。 解决方案：react-router-cache-route实现页面状态的缓存 版本 "react": "^17.0.2", "react-router-cache-route": "^1.11.
react（dva） 进入列表页面后返回再次进入 组件不更新的原因（react-router-cache-route）
hzxOnlineOk的博客
10-20 2045
react-router-cache-route 是路由缓存工具，通常在dva的首页app.js中一起搭配使用 但是需要注意的是，每一个route路由路径在定义的时候，都需要指定是否需要cache，如果使用copy大法，很容易忽略 这会导致一种后果，即从路由A点击跳转进入路由B，再由路由B点击返回路由A，最后再次点击跳转进入路由B，打印后会发现，路由B对应的组件没有被重新加载，这正是因为route.js中的配置，配置成了cache=true import { Router, Route } from
DVA2.x中的文件上传与下载
DVA（Data-Visualization-Architecture）是一个基于React和Redux的轻量级前端开发框架。它提供了一种可预测、可维护的数据流方案，使得复杂的应用状态管理变得简单和可扩展。在DVA2.x中，文件上传与下载是一个非常...
React学习
weixin_53126517的博客
03-18 1172
文章目录一、React的简介1、介绍2、特点3、框架对比二、环境搭建1、引入文件的方式2、官方脚手架(模块化)第三方脚手架第一个React程序JSX1、JSX的介绍2、特点：3、JSX的语法**ReactDOM.render()函数**条件渲染列表渲染组件函数方式的组件ES5的写法：ES6类的写法：多个组件props外部传值：组件内部使用： 一、React的简介 1、介绍 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC
三、mock与umi-plugin-react插件
rocktanga的博客
02-13 1255
一、Mock 数据 umi 里约定 mock 文件夹下的文件或者 page(s) 文件夹下的 _mock 文件即 mock 文件。 这个mock数据，默认导出的结果，前面为请求方式和请求的url，后面的为返回前端的结果。结果可以是函数，也可以是对象 关闭mock：直接返回mock：false，就可以关闭mock了。如果是用的ant design pro那么直接运行命令的时候就可以关闭mock 注：返回值为函数的时候就很灵活，函数里面就相当于在写java代码一样(只不过还是js语法)，可以设置
dva——03——models异步处理
x1037490413的博客
03-31 1414
访问时根据路由动态决定加载哪些组件，如果组件加上connect,可以获得状态（model），组件dispatch一个action到模型中，如果是同步则到Reducer,状态发生改变，谁用了connect就得到这个状态 如果是异步到effect，需要写成生成器的写法，在effect中先进行异步处理，处理完了再通过同步给到Reducer,Reducer是负责数据更新的，再通过connect传给组件。Subscribtion做一些初始化设置，比如loadding框显示转圈，数据请求完后隐藏转圈 ...
H5 页面列表缓存方案
u012384510的博客
04-30 1445
大家好，我是若川（点这里加我微信ruochuan12，长期交流学习）。今天给大家介绍一下关于h5页面的列表缓存方案。感谢屏幕前的你一直关注着我。点击下方卡片关注我、加个星标，或者查看源码...
react脚手架配置cdn
weixin_43090018的博客
09-30 2344
项目是使用react脚手架搭建的，使用了customize-cra、react-app-rewired来修改脚手架默认的配置 1、添加配置项 安装和配置完成基本的config-overrides.js后，添加addWebpackExternals选项用来配置cdn 完整的配置项请查看：官方文档，下面只展示配置cdn的代码 在里面写入我们需要cdn加载的文件，我们直接把G2plot挂载到全局 const {override, addLessLoader, addWebpackAlias, addWebpa
React Hook如何保证每次渲染state不会丢失，Dva Model在state中存储数据的底层原理
比起未来可期，我更喜欢如约而至
09-05 2232
问题描述 1、 我们知道JavaScript中想要实现类似于Java静态变量的话，可以用闭包和localStorage实现。 闭包：有权访问另一个函数作用域变量的函数叫做闭包。 满足三个条件 1. 定义了局部变量 2. 函数返回一个匿名函数 3. 返回的匿名函数中需要使用第一步定义的局部变量 局部变量被另一个函数使用，即变量被引用，所以就不会被回收了，因此可以利用这一个特性来封装一个私有变量。 本地存储是一个window的属性，包括localStorage和sessionStorage，前者一直
react缓存问题
有姿态的北漂的博客
02-21 8211
问题描述： 我们公司自己的react项目，先打包部署v1.1版本，一切正常。 v1.2版本做了很多页面和功能的修改和新增，但是打包部署之后，发现有些界面还是保持了v1.1的状态，比如有些新增按钮没有显示出来等等。需要手动清空浏览器缓存之后才会更新成新页面。 原因： 浏览器在访问相同的url的时候，会根据一些头信息来判断是否重新渲染和向服务器请求资源，也就是说，如果url是相同的，浏览器就有
dva踩坑记录(更新...)
Lawliet
11-07 1726
dva适合有一定react，redux开发经验的人上手，文档很少。。这里记录下一点踩坑点，使用技巧，一些原理。 1.dispatch方法的回调函数怎么使用 有时候需要返回数据根据数据作进一步处理，有时候这个dispatch是异步的，所以就需要回调中作下一步处理。 查了下资料，有一些方案，最好的还是在你的effects里的generator函数里return 一下你的值 dispatch({}).t...
dva.js 下载本地静态文件
西风XF的博客
10-08 1684
以下载execl静态文件test.xlsx文件为例： 把test.xlsx放到public文件夹下。以便打包的时候能找到该文件， 然后在业务js文件中写： <a href='./test.xlsx' download="test.xlsx">下载模板</a> href路径为 ./test.xlsx 是打包后能找到该文件 ~over~...
dvajs数据持久化存储dva-model-persist
qq_37942845的博客
06-15 4051
之前写用dva写页面，发现没有什么好用的数据持久化处理，索性就自己撸一个： index.js: // 1. Initialize let allState = {} let unloadListener = !1 const initialState = window.localStorage.getItem('store') if (initialState && initialState !== '{}') { // get store window.localStorag
React + Umi + Dva + Antd
最新发布
12-15
React + Umi + Dva + Antd 是一种常用的前端技术栈，其中： React 是一个用于构建用户界面的 JavaScript 库，提供了高效、灵活且可重用的组件。 Umi 是一个可插拔的企业级 React 应用框架，提供了类 Next.js 的约定式路由、插件化的配置、插件集成的方式等。 Dva 是一个基于 Redux 和 Redux-saga 的数据流方案，提供了简化开发体验的额外内置功能，例如 react-router 和 fetch。 Antd 是一个基于 React 的 UI 组件库，提供了丰富的组件和样式，可以帮助开发者快速构建美观且易于维护的用户界面。 以下是一个使用 React + Umi + Dva + Antd 的示例代码： ```javascript import React from 'react'; import { connect } from 'dva'; import { Button } from 'antd'; const ExamplePage = ({ dispatch, count }) => { const handleClick = () => { dispatch({ type: 'example/addCount', }); }; return ( <div> <h1>Count: {count}</h1> <<Button onClick={handleClick}>Add</Button> </div> ); }; export default connect(({ example }) => ({ count: example.count, }))(ExamplePage); ``` 在上面的示例代码中，我们使用了 connect 函数将组件与 Redux store 进行连接，从而可以通过 props 访问 store 中的数据和 dispatch 函数。同时，我们还使用了 Antd 提供的 Button 组件来渲染一个按钮。当用户点击按钮时，我们会触发一个名为 addCount 的 action，从而更新 store 中的 count 数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值