html中require.config 缓存问题
在html中，require的官方基本用法如下：
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
但在实践过程中，我们可能会有很多需要配置的，比如jquery...
然后我们大约会把这些配置写到配置文件，如下：
// require.config.js
require.config({
paths: {
jquery : "/js/library/jquery.min",
},
shim : {
}
});
然后，再在 main.js 中引用
//mian.js
require(["/js/require.config.js"],function(){
"use strict";
require(["jquery"], function ($) {
//功能代码
});
})
因为网页缓存问题，这种方式存在当 require.config.js 有修改时，客户端的 require.config.js 并不会更新的问题。同时如果有多个html都用了require，那每个模块的 main.js 都需要在头部加上述代码。
既然在require中引用 config，会有缓存问题，那我就把 require.config.js 放到 html ，并且增加版本控制。但需要注意的是， rquire.config.js 必须放到 require.js 后面，因为他用到了require类。
如下
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js"></script>
<script src="scripts/require.config.js?v=xxx"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
这种形式会存在一个新的问题：当 require.config.js 修改后，由于 require.js 已经在浏览器缓存，所以很快（快到 require.config.js 还未加载完成）就会加载 main.js ，此时 man.js 没有享受到 require.config.js 中的配置。
这里我想到了 require.js 的模式（先加载 require.js , 再加载 main.js ）与现在的需求（先加载 require.config.js ，再加载 main.js ）大概相同。所以看了 require.js 中的实现，把相关部分的代码复制到 require.config.js 。
最终，我使用的代码样例如下：
需要注意的是：html 中，需要移动 data-main 的位置：
<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title> scripts/main.js after require.js loads. -->
<script src="scripts/require.js"></script>
<!-- data-main 移动到这里 -->
<script src="scripts/require.config.js?v=xxx" data-main="scripts/main" ></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>
// require.config.js
;(function () { let rev = 'xxxx'; let cfg = {
// 不设置超时 = 0
waitSeconds: 60, paths: {
'jquery': '../../../../Common/Common/jquery-3.3.1/dist/jquery.min', },
shim: {
'jquery': {exports: 'jQuery'}, },
urlArgs: function (id, url) {
if (url.indexOf('http') === 0) {
return '';
}
let args = `rev=${rev}`;
// /Common/Common 下的文件不用版本控制, 都是 3 方库
if (url.indexOf('/Common/Common/') >= 0) {
args = 'v=2'
}
return (url.indexOf('?') === -1 ? '?' : '&') + args;
}
}; let dataMain = '';
let scripts = document.getElementsByTagName('script');
for (let i = scripts.length - 1; i > -1; i -= 1) {
let script = scripts[i];
let src = script.getAttribute('src');
if (src.indexOf('require.common.config.js') > 0) {
dataMain = script.getAttribute('data-main');
if (dataMain) {
//Preserve dataMain in case it is a path (i.e. contains '?')
let mainScript = dataMain; //Set final baseUrl if there is not already an explicit one,
//but only do so if the data-main value is not a loader plugin
//module ID.
if (!cfg.baseUrl && mainScript.indexOf('!') === -1) {
//Pull off the directory of data-main for use as the
//baseUrl.
src = mainScript.split('/');
mainScript = src.pop();
let subPath = src.length ? src.join('/') + '/' : './'; cfg.baseUrl = subPath;
}
}
break;
}
} require.config(cfg); if (dataMain) {
require([dataMain]);
} }());
html中require.config 缓存问题的更多相关文章
- avalon 中require.config源码分析
/********************************************************************* * 配置系统 在系统运行的开始就需要读取系统中requir ...
- nodejs中 require 方法的加载规则
require参数类型 http.fs.path等,原生模块 ./mod或../mod,相对路径的文件模块 /pathtomodule/mod,绝对路径的文件模块 mod,非原生模块的文件模块 在进 ...
- [原创]mybatis中整合ehcache缓存框架的使用
mybatis整合ehcache缓存框架的使用 mybaits的二级缓存是mapper范围级别,除了在SqlMapConfig.xml设置二级缓存的总开关,还要在具体的mapper.xml中开启二级缓 ...
- 在.net中读写config文件的各种方法
阅读目录 开始 config文件 - 自定义配置节点 config文件 - Property config文件 - Element config文件 - CDATA config文件 - Collec ...
- mybatis中的查询缓存
一: 查询缓存 Mybatis提供查询缓存,用于减轻数据压力,提高数据库压力. Mybatis提供一级缓存和二级缓存. 在操作数据库时需要构造SqlSession对象,在对象中有一个数据结构(Hash ...
- 在Spring、Hibernate中使用Ehcache缓存(2)
这里将介绍在Hibernate中使用查询缓存.一级缓存.二级缓存,整合Spring在HibernateTemplate中使用查询缓存.,这里是hibernate3,使用hibernate4类似,不过不 ...
- C#开发微信门户及应用(48) - 在微信框架中整合CacheManager 缓存框架
在我们的很多框架或者项目应用中,缓存在一定程度上可以提高程序的响应速度,以及减轻服务器的承载压力,因此在一些地方我们都考虑引入缓存模块,这篇随笔介绍使用开源缓存框架CacheManager来实现数据的 ...
- requireJs require.config公共配置
//场景:让require.config配置文件成一个公共文件,每个页面引用这个公共配置 //方式一样例: require.config({ baseUrl: (function () { var p ...
- spring(三、spring中的eheche缓存、redis使用)
spring(三.spring中的eheche缓存.redis使用) 本文主要介绍为什么要构建ehcache+redis两级缓存?以及在实战中如何实现?思考如何配置缓存策略更合适?这样的方案可能遗留什 ...
随机推荐
- 11. this.setState更新问题
this.setState是异步的,所以在this.setState之后不能立刻得到最新的state数据关于如何获取最新的数据,有如下三种方法 1.回调函数 this.setState({ xxx:' ...
- Python最佳工程实践，建立一个完美的工程项目
在程序开发时候一套好的开发环境和工具栈,可以帮我们极大的提高开发的效率,避免把大量时间浪费在周边琐事上.本文以Python为例,教大家如何快速打造完美的Python项目开发环境:内容涵盖了模块依赖管理 ...
- 2019-2020-1 20199328《Linux内核原理与分析》第九周作业
笔记部分 2019/11/12 14:45:44 从CPU和内存的角度看linux系统的运行 CPU角度:首先我们进行了系统调度,然后系统进入内核态,把信息压栈,然后我们进行进程管理,由于进入系统调用 ...
- Qt 正则表达式检查 IP 格式
KillerSmath 2018年6月29日 下午10:41 @Pranit-Patil Hi there. Like @jonB says above, you should to replace\ ...
- C51_PID 水温控制系统
C51_PID 水温控制系统 51CPIDUART水温控制 前言 通过C语言程序写入51单片机实现水的温度的采集,并通过控制器控制加热器给水体加热,对水体的温进行PID控制,保证温度在设定值范围内波动 ...
- USACO Training Section 1.3混合牛奶 Mixing Milk
题目描述 由于乳制品产业利润很低,所以降低原材料(牛奶)价格就变得十分重要.帮助Marry乳业找到最优的牛奶采购方案. Marry乳业从一些奶农手中采购牛奶,并且每一位奶农为乳制品加工企业提供的价格是 ...
- HTML（表格标签）
<table> 标签 表格由 <table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义) ...
- 安装KubeSphere
1. KubeSphere 是什么 1.1. 官方解释 KubeSphere是一个分布式操作系统,提供以Kubernetes为核心的云原生堆栈,旨在成为第三方应用程序的即插即用架构,以促进其生态系统的 ...
- JMeter Nmon Tool V2.0 插件
很早之前宝路已将nmon监控功能集成到了JMeter中,自己在使用旧版本时,也有诸多不满意的地方.趁着五一假期(基本都是晚上,白天要陪孩子),对插件底层代码进行了重构,自己还要反复测试调整,最晚的一次 ...
- 深度学习环境搭建：window10+CUDA10.0+CUDNN+pytorch1.2.0
去年底入手一台联想Y7000P,配置了Nvidia GeForce GTX 1660 Ti GPU,GPU内存6G,但是因为有GPU服务器,所以一直没有在这台笔记本上跑过模型,如今经过一番折腾,终于在 ...